No OneTemporary
Actions

Authored By

Unknown

Size

138 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/bookmark_folder_edit/bookmark_folder_edit.js b/src/components/bookmark_folder_edit/bookmark_folder_edit.js
	index 7480704959..ae5aebedd9 100644
	--- a/src/components/bookmark_folder_edit/bookmark_folder_edit.js
	+++ b/src/components/bookmark_folder_edit/bookmark_folder_edit.js
	@@ -1,92 +1,92 @@
	import EmojiPicker from 'src/components/emoji_picker/emoji_picker.vue'

	import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useOAuthStore } from 'src/stores/oauth.js'

	import { fetchBookmarkFolders } from 'src/api/user.js'

	const BookmarkFolderEdit = {
	data() {
	return {
	name: '',
	nameDraft: '',
	emoji: '',
	emojiUrl: null,
	emojiDraft: '',
	emojiUrlDraft: null,
	emojiPickerExpanded: false,
	reallyDelete: false,
	}
	},
	components: {
	EmojiPicker,
	},
	created() {
	if (!this.id) return

	fetchBookmarkFolders({
	credentials: useOAuthStore().token,
	- }).then((folders) => {
	+ }).then(({ data: folders }) => {
	const folder = folders.find((folder) => folder.id === this.id)
	if (!folder) return

	this.nameDraft = this.name = folder.name
	this.emojiDraft = this.emoji = folder.emoji
	this.emojiUrlDraft = this.emojiUrl = folder.emoji_url
	})
	},
	computed: {
	id() {
	return this.$route.params.id
	},
	},
	methods: {
	selectEmoji(event) {
	this.emojiDraft = event.insertion
	this.emojiUrlDraft = event.insertionUrl
	},
	showEmojiPicker() {
	if (!this.emojiPickerExpanded) {
	this.$refs.picker.showPicker()
	}
	},
	onShowPicker() {
	this.emojiPickerExpanded = true
	},
	onClosePicker() {
	this.emojiPickerExpanded = false
	},
	updateFolder() {
	useBookmarkFoldersStore()
	.updateBookmarkFolder({
	folderId: this.id,
	name: this.nameDraft,
	emoji: this.emojiDraft,
	})
	.then(() => {
	this.$router.push({ name: 'bookmark-folders' })
	})
	},
	createFolder() {
	useBookmarkFoldersStore()
	.createBookmarkFolder({ name: this.nameDraft, emoji: this.emojiDraft })
	.then(() => {
	this.$router.push({ name: 'bookmark-folders' })
	})
	.catch((e) => {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'bookmark_folders.error',
	messageArgs: [e.message],
	level: 'error',
	})
	})
	},
	deleteFolder() {
	useBookmarkFoldersStore().deleteBookmarkFolder({ folderId: this.id })
	this.$router.push({ name: 'bookmark-folders' })
	},
	},
	}

	export default BookmarkFolderEdit
	diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
	index b03bc0256c..68306acbe4 100644
	--- a/src/components/chat/chat.js
	+++ b/src/components/chat/chat.js
	@@ -1,431 +1,432 @@
	import { throttle } from 'lodash'
	import { mapState as mapPiniaState } from 'pinia'
	import { mapGetters, mapState } from 'vuex'

	import ChatMessage from 'src/components/chat_message/chat_message.vue'
	import ChatTitle from 'src/components/chat_title/chat_title.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import chatService from '../../services/chat_service/chat_service.js'
	import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
	import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
	import {
	getNewTopPosition,
	getScrollPosition,
	isBottomedOut,
	isScrollable,
	} from './chat_layout_utils.js'

	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useOAuthStore } from 'src/stores/oauth.js'

	import {
	chatMessages,
	getOrCreateChat,
	sendChatMessage,
	} from 'src/api/chats.js'
	import { WSConnectionStatus } from 'src/api/public.js'

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

	library.add(faChevronDown, faChevronLeft)

	const BOTTOMED_OUT_OFFSET = 10
	const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
	const SAFE_RESIZE_TIME_OFFSET = 100
	const MARK_AS_READ_DELAY = 1500
	const MAX_RETRIES = 10

	const Chat = {
	components: {
	ChatMessage,
	ChatTitle,
	PostStatusForm,
	},
	data() {
	return {
	jumpToBottomButtonVisible: false,
	hoveredMessageChainId: undefined,
	lastScrollPosition: {},
	scrollableContainerHeight: '100%',
	errorLoadingChat: false,
	messageRetriers: {},
	}
	},
	created() {
	this.startFetching()
	window.addEventListener('resize', this.handleResize)
	},
	mounted() {
	window.addEventListener('scroll', this.handleScroll)
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	}

	this.$nextTick(() => {
	this.handleResize()
	})
	},
	unmounted() {
	window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('resize', this.handleResize)
	if (typeof document.hidden !== 'undefined')
	document.removeEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	this.$store.dispatch('clearCurrentChat')
	},
	computed: {
	recipient() {
	return this.currentChat && this.currentChat.account
	},
	recipientId() {
	return this.$route.params.recipient_id
	},
	formPlaceholder() {
	if (this.recipient) {
	return this.$t('chats.message_user', {
	nickname: this.recipient.screen_name_ui,
	})
	} else {
	return ''
	}
	},
	chatViewItems() {
	return chatService.getView(this.currentChatMessageService)
	},
	newMessageCount() {
	return (
	this.currentChatMessageService &&
	this.currentChatMessageService.newMessageCount
	)
	},
	streamingEnabled() {
	return (
	this.mergedConfig.useStreamingApi &&
	this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	)
	},
	...mapGetters([
	'currentChat',
	'currentChatMessageService',
	'findOpenedChatByRecipientId',
	'mergedConfig',
	]),
	...mapPiniaState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	...mapState({
	mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
	currentUser: (state) => state.users.currentUser,
	}),
	},
	watch: {
	chatViewItems() {
	// We don't want to scroll to the bottom on a new message when the user is viewing older messages.
	// Therefore we need to know whether the scroll position was at the bottom before the DOM update.
	const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
	this.$nextTick(() => {
	if (bottomedOutBeforeUpdate) {
	this.scrollDown()
	}
	})
	},
	$route: function () {
	this.startFetching()
	},
	mastoUserSocketStatus(newValue) {
	if (newValue === WSConnectionStatus.JOINED) {
	this.fetchChat({ isFirstFetch: true })
	}
	},
	},
	methods: {
	// Used to animate the avatar near the first message of the message chain when any message belonging to the chain is hovered
	onMessageHover({ isHovered, messageChainId }) {
	this.hoveredMessageChainId = isHovered ? messageChainId : undefined
	},
	onFilesDropped() {
	this.$nextTick(() => {
	this.handleResize()
	})
	},
	handleVisibilityChange() {
	this.$nextTick(() => {
	if (!document.hidden && this.bottomedOut(BOTTOMED_OUT_OFFSET)) {
	this.scrollDown({ forceRead: true })
	}
	})
	},
	// "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
	handleResize(opts = {}) {
	const { delayed = false } = opts

	if (delayed) {
	setTimeout(() => {
	this.handleResize({ ...opts, delayed: false })
	}, SAFE_RESIZE_TIME_OFFSET)
	return
	}

	this.$nextTick(() => {
	const { offsetHeight = undefined } = getScrollPosition()
	const diff = offsetHeight - this.lastScrollPosition.offsetHeight
	if (diff !== 0 && !this.bottomedOut()) {
	this.$nextTick(() => {
	window.scrollBy({ top: -Math.trunc(diff) })
	})
	}
	this.lastScrollPosition = getScrollPosition()
	})
	},
	scrollDown(options = {}) {
	const { behavior = 'auto', forceRead = false } = options
	this.$nextTick(() => {
	window.scrollTo({
	top: document.documentElement.scrollHeight,
	behavior,
	})
	})
	if (forceRead) {
	this.readChat()
	}
	},
	readChat() {
	if (
	!(
	this.currentChatMessageService && this.currentChatMessageService.maxId
	)
	) {
	return
	}
	if (document.hidden) {
	return
	}
	const lastReadId = this.currentChatMessageService.maxId
	this.$store.dispatch('readChat', {
	id: this.currentChat.id,
	lastReadId,
	})
	},
	bottomedOut(offset) {
	return isBottomedOut(offset)
	},
	reachedTop() {
	return window.scrollY <= 0
	},
	cullOlderCheck() {
	window.setTimeout(() => {
	if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.$store.dispatch(
	'cullOlderMessages',
	this.currentChatMessageService.chatId,
	)
	}
	}, 5000)
	},
	handleScroll: throttle(function () {
	this.lastScrollPosition = getScrollPosition()
	if (!this.currentChat) {
	return
	}

	if (this.reachedTop()) {
	this.fetchChat({ maxId: this.currentChatMessageService.minId })
	} else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.jumpToBottomButtonVisible = false
	this.cullOlderCheck()
	if (this.newMessageCount > 0) {
	// Use a delay before marking as read to prevent situation where new messages
	// arrive just as you're leaving the view and messages that you didn't actually
	// get to see get marked as read.
	window.setTimeout(() => {
	// Don't mark as read if the element doesn't exist, user has left chat view
	if (this.$el) this.readChat()
	}, MARK_AS_READ_DELAY)
	}
	} else {
	this.jumpToBottomButtonVisible = true
	}
	}, 200),
	handleScrollUp(positionBeforeLoading) {
	const positionAfterLoading = getScrollPosition()
	window.scrollTo({
	top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
	})
	},
	fetchChat({ isFirstFetch = false, fetchLatest = false, maxId }) {
	const chatMessageService = this.currentChatMessageService
	if (!chatMessageService) {
	return
	}
	if (fetchLatest && this.streamingEnabled) {
	return
	}

	const chatId = chatMessageService.chatId
	const fetchOlderMessages = !!maxId
	const sinceId = fetchLatest && chatMessageService.maxId

	return chatMessages({
	id: chatId,
	maxId,
	sinceId,
	credentials: useOAuthStore().token,
	- }).then((messages) => {
	+ }).then(({ data: messages }) => {
	// Clear the current chat in case we're recovering from a ws connection loss.
	if (isFirstFetch) {
	chatService.clear(chatMessageService)
	}

	const positionBeforeUpdate = getScrollPosition()
	this.$store
	.dispatch('addChatMessages', { chatId, messages })
	.then(() => {
	this.$nextTick(() => {
	if (fetchOlderMessages) {
	this.handleScrollUp(positionBeforeUpdate)
	}

	// In vertical screens, the first batch of fetched messages may not always take the
	// full height of the scrollable container.
	// If this is the case, we want to fetch the messages until the scrollable container
	// is fully populated so that the user has the ability to scroll up and load the history.
	if (!isScrollable() && messages.length > 0) {
	this.fetchChat({
	maxId: this.currentChatMessageService.minId,
	})
	}
	})
	})
	})
	},
	async startFetching() {
	let chat = this.findOpenedChatByRecipientId(this.recipientId)
	if (!chat) {
	try {
	- chat = await getOrCreateChat({
	+ const { data } = await getOrCreateChat({
	accountId: this.recipientId,
	credentials: useOAuthStore().token,
	})
	+ chat = data
	} catch (e) {
	console.error('Error creating or getting a chat', e)
	this.errorLoadingChat = true
	}
	}
	if (chat) {
	this.$nextTick(() => {
	this.scrollDown({ forceRead: true })
	})
	this.$store.dispatch('addOpenedChat', { chat })
	this.doStartFetching()
	}
	},
	doStartFetching() {
	this.$store.dispatch('startFetchingCurrentChat', {
	fetcher: () =>
	promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000),
	})
	this.fetchChat({ isFirstFetch: true })
	},
	handleAttachmentPosting() {
	this.$nextTick(() => {
	this.handleResize()
	// When the posting form size changes because of a media attachment, we need an extra resize
	// to account for the potential delay in the DOM update.
	this.scrollDown({ forceRead: true })
	})
	},
	sendMessage({ status, media, idempotencyKey }) {
	const params = {
	id: this.currentChat.id,
	content: status,
	idempotencyKey,
	}

	if (media[0]) {
	params.mediaId = media[0].id
	}

	const fakeMessage = buildFakeMessage({
	attachments: media,
	chatId: this.currentChat.id,
	content: status,
	userId: this.currentUser.id,
	idempotencyKey,
	})

	this.$store
	.dispatch('addChatMessages', {
	chatId: this.currentChat.id,
	messages: [fakeMessage],
	})
	.then(() => {
	this.handleAttachmentPosting()
	})

	return this.doSendMessage({
	params,
	fakeMessage,
	retriesLeft: MAX_RETRIES,
	})
	},
	doSendMessage({ params, fakeMessage, retriesLeft = MAX_RETRIES }) {
	if (retriesLeft <= 0) return

	sendChatMessage({
	params,
	credentials: useOAuthStore().token,
	})
	- .then((data) => {
	+ .then(({ data }) => {
	this.$store.dispatch('addChatMessages', {
	chatId: this.currentChat.id,
	updateMaxId: false,
	messages: [{ ...data, fakeId: fakeMessage.id }],
	})

	return data
	})
	.catch((error) => {
	console.error('Error sending message', error)
	this.$store.dispatch('handleMessageError', {
	chatId: this.currentChat.id,
	fakeId: fakeMessage.id,
	isRetry: retriesLeft !== MAX_RETRIES,
	})
	if (
	(error.statusCode >= 500 && error.statusCode < 600) \|\|
	error.message === 'Failed to fetch'
	) {
	this.messageRetriers[fakeMessage.id] = setTimeout(
	() => {
	this.doSendMessage({
	params,
	fakeMessage,
	retriesLeft: retriesLeft - 1,
	})
	},
	1000 * 2 ** (MAX_RETRIES - retriesLeft),
	)
	}
	return {}
	})

	return Promise.resolve(fakeMessage)
	},
	goBack() {
	this.$router.push({
	name: 'chats',
	params: { username: this.currentUser.screen_name },
	})
	},
	},
	}

	export default Chat
	diff --git a/src/components/remote_user_resolver/remote_user_resolver.js b/src/components/remote_user_resolver/remote_user_resolver.js
	index b44629fcf5..75304fe52a 100644
	--- a/src/components/remote_user_resolver/remote_user_resolver.js
	+++ b/src/components/remote_user_resolver/remote_user_resolver.js
	@@ -1,38 +1,38 @@
	import { useOAuthStore } from 'src/stores/oauth.js'

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

	const RemoteUserResolver = {
	data: () => ({
	error: false,
	}),
	mounted() {
	this.redirect()
	},
	methods: {
	redirect() {
	const id = this.$route.params.username + '@' + this.$route.params.hostname
	fetchUser({
	id,
	credentials: useOAuthStore().token,
	})
	- .then((externalUser) => {
	+ .then(({ data: externalUser }) => {
	if (externalUser.error) {
	this.error = true
	} else {
	this.$store.commit('addNewUsers', [externalUser])
	const id = externalUser.id
	this.$router.replace({
	name: 'external-user-profile',
	params: { id },
	})
	}
	})
	.catch(() => {
	this.error = true
	})
	},
	},
	}

	export default RemoteUserResolver
	diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
	index 5dbd79de4b..c11579e53b 100644
	--- a/src/components/settings_modal/tabs/appearance_tab.js
	+++ b/src/components/settings_modal/tabs/appearance_tab.js
	@@ -1,509 +1,509 @@
	import { mapActions } from 'pinia'

	import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
	import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import FloatSetting from '../helpers/float_setting.vue'
	import IntegerSetting from '../helpers/integer_setting.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import UnitSetting from '../helpers/unit_setting.vue'
	import Preview from './old_theme_tab/theme_preview.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { normalizeThemeData, useInterfaceStore } from 'src/stores/interface.js'
	import { useOAuthStore } from 'src/stores/oauth.js'

	import { updateProfileImages } from 'src/api/user.js'
	import { newImporter } from 'src/services/export_import/export_import.js'
	import {
	adoptStyleSheets,
	createStyleSheet,
	} from 'src/services/style_setter/style_setter.js'
	import { getCssRules } from 'src/services/theme_data/css_utils.js'
	import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
	import { init } from 'src/services/theme_data/theme_data_3.service.js'
	import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'

	const AppearanceTab = {
	data() {
	return {
	availableThemesV3: [],
	availableThemesV2: [],
	bundledPalettes: [],
	compilationCache: {},
	fileImporter: newImporter({
	accept: '.json, .iss',
	validator: this.importValidator,
	onImport: this.onImport,
	parser: this.importParser,
	onImportFailure: this.onImportFailure,
	}),
	palettesKeys: [
	'bg',
	'fg',
	'link',
	'text',
	'cRed',
	'cGreen',
	'cBlue',
	'cOrange',
	],
	userPalette: {},
	intersectionObserver: null,
	forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map(
	(mode, i) => ({
	key: mode,
	value: i - 1,
	label: this.$t(
	`settings.style.themes3.hacks.forced_roundness_mode_${mode}`,
	),
	}),
	),
	underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(
	`settings.style.themes3.hacks.underlay_override_mode_${mode}`,
	),
	})),
	backgroundUploading: false,
	background: null,
	backgroundError: null,
	backgroundPreview: null,
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	IntegerSetting,
	FloatSetting,
	UnitSetting,
	Preview,
	PaletteEditor,
	},
	mounted() {
	useInterfaceStore().getThemeData()

	const updateIndex = (resource) => {
	const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
	const currentIndex = useInstanceStore()[`${resource}sIndex`]

	let promise
	if (currentIndex) {
	promise = Promise.resolve(currentIndex)
	} else {
	promise = useInterfaceStore()[`fetch${capitalizedResource}sIndex`]()
	}

	return promise.then((index) => {
	return Object.entries(index).map(([k, func]) => [k, func()])
	})
	}

	updateIndex('style').then((styles) => {
	styles.forEach(([key, stylePromise]) =>
	stylePromise.then((data) => {
	const meta = data.find((x) => x.component === '@meta')
	this.availableThemesV3.push({
	key,
	data,
	name: meta.directives.name,
	version: 'v3',
	})
	}),
	)
	})

	updateIndex('theme').then((themes) => {
	themes.forEach(([key, themePromise]) =>
	themePromise.then((data) => {
	if (!data) {
	console.warn(`Theme with key ${key} is empty or malformed`)
	} else if (Array.isArray(data)) {
	console.warn(
	`Theme with key ${key} is a v1 theme and should be moved to static/palettes/index.json`,
	)
	} else if (!data.source && !data.theme) {
	console.warn(`Theme with key ${key} is malformed`)
	} else {
	this.availableThemesV2.push({
	key,
	data,
	name: data.name,
	version: 'v2',
	})
	}
	}),
	)
	})

	this.userPalette = useInterfaceStore().paletteDataUsed \|\| {}

	updateIndex('palette').then((bundledPalettes) => {
	bundledPalettes.forEach(([key, palettePromise]) =>
	palettePromise.then((v) => {
	let palette
	if (Array.isArray(v)) {
	const [
	name,
	bg,
	fg,
	text,
	link,
	cRed = '#FF0000',
	cGreen = '#00FF00',
	cBlue = '#0000FF',
	cOrange = '#E3FF00',
	] = v
	palette = {
	key,
	name,
	bg,
	fg,
	text,
	link,
	cRed,
	cBlue,
	cGreen,
	cOrange,
	}
	} else {
	palette = { key, ...v }
	}
	if (!palette.key.startsWith('style.')) {
	this.bundledPalettes.push(palette)
	}
	}),
	)
	})

	this.previewTheme('stock', 'v3')

	if (window.IntersectionObserver) {
	this.intersectionObserver = new IntersectionObserver(
	(entries, observer) => {
	entries.forEach(({ target, isIntersecting }) => {
	if (!isIntersecting) return
	const theme = this.availableStyles.find(
	(x) => x.key === target.dataset.themeKey,
	)
	this.$nextTick(() => {
	if (theme) this.previewTheme(theme.key, theme.version, theme.data)
	})
	observer.unobserve(target)
	})
	},
	{
	root: this.$refs.themeList,
	},
	)
	} else {
	this.availableStyles.forEach((theme) =>
	this.previewTheme(theme.key, theme.version, theme.data),
	)
	}
	},
	updated() {
	this.$nextTick(() => {
	this.$refs.themeList
	.querySelectorAll('.theme-preview')
	.forEach((node) => {
	this.intersectionObserver.observe(node)
	})
	})
	},
	watch: {
	paletteDataUsed() {
	this.userPalette = this.paletteDataUsed \|\| {}
	},
	},
	computed: {
	isDefaultBackground() {
	return !this.$store.state.users.currentUser.background_image
	},
	switchInProgress() {
	return useInterfaceStore().themeChangeInProgress
	},
	paletteDataUsed() {
	return useInterfaceStore().paletteDataUsed
	},
	availableStyles() {
	return [...this.availableThemesV3, ...this.availableThemesV2]
	},
	availablePalettes() {
	return [...this.bundledPalettes, ...this.stylePalettes]
	},
	stylePalettes() {
	const ruleset = useInterfaceStore().styleDataUsed \|\| []
	if (!ruleset && ruleset.length === 0) return
	const meta = ruleset.find((x) => x.component === '@meta')
	const result = ruleset
	.filter((x) => x.component.startsWith('@palette'))
	.map((x) => {
	const { variant, directives } = x
	const {
	bg,
	fg,
	text,
	link,
	accent,
	cRed,
	cBlue,
	cGreen,
	cOrange,
	wallpaper,
	} = directives

	const result = {
	name: `${meta.directives.name \|\| this.$t('settings.style.themes3.palette.imported')}: ${variant}`,
	key: `style.${variant.toLowerCase().replace(/ /g, '_')}`,
	bg,
	fg,
	text,
	link,
	accent,
	cRed,
	cBlue,
	cGreen,
	cOrange,
	wallpaper,
	}
	return Object.fromEntries(Object.entries(result).filter(([, v]) => v))
	})
	return result
	},
	noIntersectionObserver() {
	return !window.IntersectionObserver
	},
	instanceWallpaper() {
	useInstanceStore().instanceIdentity.background
	},
	instanceWallpaperUsed() {
	return (
	useInstanceStore().instanceIdentity.background &&
	!this.$store.state.users.currentUser.background_image
	)
	},
	customThemeVersion() {
	const { themeVersion } = useInterfaceStore()
	return themeVersion
	},
	isCustomThemeUsed() {
	const { customTheme, customThemeSource } = this.mergedConfig
	return customTheme != null \|\| customThemeSource != null
	},
	isCustomStyleUsed() {
	const { styleCustomData } = this.mergedConfig
	return styleCustomData != null
	},
	...SharedComputedObject(),
	},
	methods: {
	importFile() {
	this.fileImporter.importData()
	},
	importParser(file, filename) {
	if (filename.endsWith('.json')) {
	return JSON.parse(file)
	} else if (filename.endsWith('.iss')) {
	return deserialize(file)
	}
	},
	onImport(parsed, filename) {
	if (filename.endsWith('.json')) {
	useInterfaceStore().setThemeCustom(parsed.source \|\| parsed.theme)
	} else if (filename.endsWith('.iss')) {
	useInterfaceStore().setStyleCustom(parsed)
	}
	},
	onImportFailure(result) {
	console.error('Failure importing theme:', result)
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'settings.invalid_theme_imported',
	level: 'error',
	})
	},
	importValidator(parsed, filename) {
	if (filename.endsWith('.json')) {
	const version = parsed._pleroma_theme_version
	return version >= 1 \|\| version <= 2
	} else if (filename.endsWith('.iss')) {
	if (!Array.isArray(parsed)) return false
	if (parsed.length < 1) return false
	if (parsed.find((x) => x.component === '@meta') == null) return false
	return true
	}
	},
	isThemeActive(key) {
	return (
	key ===
	(this.mergedConfig.theme \|\| useInstanceStore().instanceIdentity.theme)
	)
	},
	isStyleActive(key) {
	return (
	key ===
	(this.mergedConfig.style \|\| useInstanceStore().instanceIdentity.style)
	)
	},
	isPaletteActive(key) {
	return (
	key ===
	(this.mergedConfig.palette \|\|
	useInstanceStore().instanceIdentity.palette)
	)
	},
	...mapActions(useInterfaceStore, ['setStyle', 'setTheme']),
	setPalette(name, data) {
	useInterfaceStore().setPalette(name)
	this.userPalette = data
	},
	setPaletteCustom(data) {
	useInterfaceStore().setPaletteCustom(data)
	this.userPalette = data
	},
	resetTheming() {
	useInterfaceStore().setStyle('stock')
	},
	previewTheme(key, version, input) {
	let theme3
	if (this.compilationCache[key]) {
	theme3 = this.compilationCache[key]
	} else if (input) {
	if (version === 'v2') {
	const style = normalizeThemeData(input)
	const theme2 = convertTheme2To3(style)
	theme3 = init({
	inputRuleset: theme2,
	ultimateBackgroundColor: '#000000',
	liteMode: true,
	debug: true,
	onlyNormalState: true,
	})
	} else if (version === 'v3') {
	const palette = input.find((x) => x.component === '@palette')
	let paletteRule
	if (palette) {
	const { directives } = palette
	directives.link = directives.link \|\| directives.accent
	directives.accent = directives.accent \|\| directives.link
	paletteRule = {
	component: 'Root',
	directives: Object.fromEntries(
	Object.entries(directives)
	.filter(([k]) => k && k !== 'name')
	.map(([k, v]) => ['--' + k, 'color \| ' + v]),
	),
	}
	} else {
	paletteRule = null
	}

	theme3 = init({
	inputRuleset: [...input, paletteRule].filter((x) => x),
	ultimateBackgroundColor: '#000000',
	liteMode: true,
	onlyNormalState: true,
	})
	}
	} else {
	theme3 = init({
	inputRuleset: [],
	ultimateBackgroundColor: '#000000',
	liteMode: true,
	onlyNormalState: true,
	})
	}

	if (!this.compilationCache[key]) {
	this.compilationCache[key] = theme3
	}

	const sheet = createStyleSheet('appearance-tab-previews', 90)
	sheet.addRule(
	[
	'#theme-preview-',
	key,
	' {\n',
	getCssRules(theme3.eager).join('\n'),
	'\n}',
	].join(''),
	)
	sheet.ready = true
	adoptStyleSheets()
	},
	uploadFile(slot, e) {
	const file = e.target.files[0]
	if (!file) {
	return
	}
	if (file.size > useInstanceStore()[slot + 'limit']) {
	const filesize = fileSizeFormatService.fileSizeFormat(file.size)
	const allowedsize = fileSizeFormatService.fileSizeFormat(
	useInstanceStore()[slot + 'limit'],
	)
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'upload.error.message',
	messageArgs: [
	this.$t('upload.error.file_too_big', {
	filesize: filesize.num,
	filesizeunit: filesize.unit,
	allowedsize: allowedsize.num,
	allowedsizeunit: allowedsize.unit,
	}),
	],
	level: 'error',
	})
	return
	}

	const reader = new FileReader()
	reader.onload = ({ target }) => {
	const img = target.result
	this[slot + 'Preview'] = img
	this[slot] = file
	}
	reader.readAsDataURL(file)
	},
	resetBackground() {
	const confirmed = window.confirm(
	this.$t('settings.reset_background_confirm'),
	)
	if (confirmed) {
	this.submitBackground('')
	}
	},
	resetUploadedBackground() {
	this.backgroundPreview = null
	},
	clearBackgroundError() {
	this.backgroundError = null
	},
	submitBackground(background) {
	if (!this.backgroundPreview && background !== '') {
	return
	}

	this.backgroundUploading = true
	updateProfileImages({
	background,
	credentials: useOAuthStore().token,
	})
	- .then((data) => {
	+ .then(({ data }) => {
	this.$store.commit('addNewUsers', [data])
	this.$store.commit('setCurrentUser', data)
	this.backgroundPreview = null
	this.backgroundError = null
	})
	.catch((e) => {
	this.backgroundError = e
	})
	.finally(() => {
	this.backgroundUploading = false
	})
	},
	},
	}

	export default AppearanceTab
	diff --git a/src/components/settings_modal/tabs/composing_tab.js b/src/components/settings_modal/tabs/composing_tab.js
	index 3a2384832d..1586c87bfb 100644
	--- a/src/components/settings_modal/tabs/composing_tab.js
	+++ b/src/components/settings_modal/tabs/composing_tab.js
	@@ -1,192 +1,192 @@
	import { mapState } from 'pinia'

	import FontControl from 'src/components/font_control/font_control.vue'
	import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
	import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
	import Select from 'src/components/select/select.vue'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import FloatSetting from '../helpers/float_setting.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 { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'

	import { updateProfile } from 'src/api/user.js'
	import localeService from 'src/services/locale/locale.service.js'
	import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faDatabase,
	faGlobe,
	faMessage,
	faPenAlt,
	faSliders,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faGlobe, faMessage, faPenAlt, faDatabase, faSliders)

	const ComposingTab = {
	data() {
	return {
	subjectLineOptions: ['email', 'noop', 'masto'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(
	`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`,
	),
	})),
	conversationDisplayOptions: ['tree', 'linear'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_display_${mode}`),
	})),
	absoluteTime12hOptions: ['24h', '12h'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.absolute_time_format_12h_${mode}`),
	})),
	conversationOtherRepliesButtonOptions: ['below', 'inside'].map(
	(mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_other_replies_button_${mode}`),
	}),
	),
	mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(
	(mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.mention_link_display_${mode}`),
	}),
	),
	userPopoverAvatarActionOptions: ['close', 'zoom', 'open'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.user_popover_avatar_action_${mode}`),
	})),
	unsavedPostActionOptions: ['save', 'discard', 'confirm'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.unsaved_post_action_${mode}`),
	})),
	loopSilentAvailable:
	// Firefox
	Object.getOwnPropertyDescriptor(
	HTMLVideoElement.prototype,
	'mozHasAudio',
	) \|\|
	// Chrome-likes
	Object.getOwnPropertyDescriptor(
	HTMLMediaElement.prototype,
	'webkitAudioDecodedByteCount',
	) \|\|
	// Future spec, still not supported in Nightly 63 as of 08/2018
	Object.getOwnPropertyDescriptor(
	HTMLMediaElement.prototype,
	'audioTracks',
	),
	emailLanguage: this.$store.state.users.currentUser.language \|\| [''],
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	IntegerSetting,
	FloatSetting,
	UnitSetting,
	InterfaceLanguageSwitcher,
	ScopeSelector,
	Select,
	FontControl,
	},
	computed: {
	postFormats() {
	return useInstanceCapabilitiesStore().postFormats
	},
	postContentOptions() {
	return this.postFormats.map((format) => ({
	key: format,
	value: format,
	label: this.$t(`post_status.content_type["${format}"]`),
	}))
	},
	language: {
	get: function () {
	return useMergedConfigStore().mergedConfig.interfaceLanguage
	},
	set: function (val) {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'interfaceLanguage',
	value: val,
	})
	},
	},
	...SharedComputedObject(),
	...mapState(useInstanceStore, ['blockExpiration']),
	},
	methods: {
	changeDefaultScope(value) {
	this.$store.dispatch('setProfileOption', { name: 'defaultScope', value })
	},
	clearCache(key) {
	clearCache(key)
	.then(() => {
	this.$store.dispatch('settingsSaved', { success: true })
	})
	.catch((error) => {
	this.$store.dispatch('settingsSaved', { error })
	})
	},
	tooSmall() {
	this.$emit('tooSmall')
	},
	tooBig() {
	this.$emit('tooBig')
	},
	getNavMode() {
	return this.$refs.tabSwitcher.getNavMode()
	},
	clearAssetCache() {
	this.clearCache(cacheKey)
	},
	clearEmojiCache() {
	this.clearCache(emojiCacheKey)
	},
	updateProfile() {
	const params = {
	language: localeService.internalToBackendLocaleMulti(
	this.emailLanguage,
	),
	}

	updateProfile({
	params,
	credentials: useOAuthStore().token,
	- }).then((user) => {
	+ }).then(({ data: user }) => {
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	})
	},
	updateFont(key, value) {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'theme3hacks',
	value: {
	...this.mergedConfig.theme3hacks,
	fonts: {
	...this.mergedConfig.theme3hacks.fonts,
	[key]: value,
	},
	},
	})
	},
	},
	}

	export default ComposingTab
	diff --git a/src/components/settings_modal/tabs/data_import_export_tab.js b/src/components/settings_modal/tabs/data_import_export_tab.js
	index a896576588..4554f4a1f1 100644
	--- a/src/components/settings_modal/tabs/data_import_export_tab.js
	+++ b/src/components/settings_modal/tabs/data_import_export_tab.js
	@@ -1,135 +1,135 @@
	import { mapState } from 'vuex'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import Exporter from 'src/components/exporter/exporter.vue'
	import Importer from 'src/components/importer/importer.vue'

	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useOAuthTokensStore } from 'src/stores/oauth_tokens.js'

	import {
	addBackup,
	exportFriends,
	fetchBlocks,
	fetchMutes,
	importBlocks,
	importFollows,
	importMutes,
	listBackups,
	} from 'src/api/user.js'

	const DataImportExportTab = {
	data() {
	return {
	activeTab: 'profile',
	newDomainToMute: '',
	listBackupsError: false,
	addBackupError: false,
	addedBackup: false,
	backups: [],
	}
	},
	created() {
	useOAuthTokensStore().fetchTokens()
	this.fetchBackups()
	},
	components: {
	Importer,
	Exporter,
	Checkbox,
	},
	computed: {
	...mapState({
	user: (state) => state.users.currentUser,
	}),
	},
	methods: {
	getFollowsContent() {
	return exportFriends({
	id: this.user.id,
	credentials: useOAuthStore().token,
	}).then(this.generateExportableUsersContent)
	},
	getBlocksContent() {
	return fetchBlocks({
	credentials: useOAuthStore().token,
	}).then(this.generateExportableUsersContent)
	},
	getMutesContent() {
	return fetchMutes({
	credentials: useOAuthStore().token,
	}).then(this.generateExportableUsersContent)
	},
	importFollows(file) {
	return importFollows({
	file,
	credentials: useOAuthStore().token,
	- }).then((status) => {
	+ }).then(({ data: status }) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	importBlocks(file) {
	return importBlocks({
	file,
	credentials: useOAuthStore().token,
	- }).then((status) => {
	+ }).then(({ data: status }) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	importMutes(file) {
	return importMutes({
	file,
	credentials: useOAuthStore().token,
	- }).then((status) => {
	+ }).then(({ data: status }) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	- generateExportableUsersContent(users) {
	+ generateExportableUsersContent({ data: users }) {
	// Get addresses
	return users
	.map((user) => {
	// check is it's a local user
	if (user && user.is_local) {
	// append the instance address
	return user.screen_name + '@' + location.hostname
	}
	return user.screen_name
	})
	.join('\n')
	},
	addBackup() {
	addBackup({
	credentials: useOAuthStore().token,
	})
	.then(() => {
	this.addedBackup = true
	this.addBackupError = false
	})
	.catch((error) => {
	this.addedBackup = false
	this.addBackupError = error
	})
	.then(() => this.fetchBackups())
	},
	fetchBackups() {
	listBackups({
	credentials: useOAuthStore().token,
	})
	- .then((res) => {
	+ .then(({ data: res }) => {
	this.backups = res
	this.listBackupsError = false
	})
	.catch((error) => {
	this.listBackupsError = error.error
	})
	},
	},
	}

	export default DataImportExportTab
	diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
	index e40bb993e0..bed6f65004 100644
	--- a/src/components/settings_modal/tabs/general_tab.js
	+++ b/src/components/settings_modal/tabs/general_tab.js
	@@ -1,77 +1,77 @@
	import { mapState } from 'pinia'

	import FontControl from 'src/components/font_control/font_control.vue'
	import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import FloatSetting from '../helpers/float_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 { useLocalConfigStore } from 'src/stores/local_config.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'

	import { updateProfile } from 'src/api/user.js'
	import localeService from 'src/services/locale/locale.service.js'

	const GeneralTab = {
	data() {
	return {
	absoluteTime12hOptions: ['24h', '12h'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.absolute_time_format_12h_${mode}`),
	})),
	emailLanguage: this.$store.state.users.currentUser.language \|\| [''],
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	UnitSetting,
	FloatSetting,
	FontControl,
	InterfaceLanguageSwitcher,
	},
	computed: {
	language: {
	get: function () {
	return useMergedConfigStore().mergedConfig.interfaceLanguage
	},
	set: function (val) {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'interfaceLanguage',
	value: val,
	})
	},
	},
	...SharedComputedObject(),
	...mapState(useInstanceCapabilitiesStore, ['blockExpiration']),
	},
	methods: {
	updateProfile() {
	const params = {
	language: localeService.internalToBackendLocaleMulti(
	this.emailLanguage,
	),
	}

	updateProfile({
	params,
	credentials: useOAuthStore().token,
	- }).then((user) => {
	+ }).then(({ data: user }) => {
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	})
	},
	updateFont(path, value) {
	useLocalConfigStore().set({ path, value })
	},
	},
	}

	export default GeneralTab
	diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
	index cb945012f0..7814122497 100644
	--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
	+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
	@@ -1,140 +1,140 @@
	import { get, isEmpty, map, reject } from 'lodash'

	import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
	import BlockCard from 'src/components/block_card/block_card.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue'
	import List from 'src/components/list/list.vue'
	import MuteCard from 'src/components/mute_card/mute_card.vue'
	import ProgressButton from 'src/components/progress_button/progress_button.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useOAuthTokensStore } from 'src/stores/oauth_tokens.js'

	import { importBlocks, importFollows } from 'src/api/user.js'

	const MutesAndBlocks = {
	data() {
	return {
	activeTab: 'profile',
	}
	},
	created() {
	useOAuthTokensStore().fetchTokens()
	useInstanceStore().getKnownDomains()
	},
	components: {
	TabSwitcher,
	DomainMuteCard,
	BlockCard,
	List,
	MuteCard,
	ProgressButton,
	Autosuggest,
	Checkbox,
	},
	computed: {
	knownDomains() {
	return useInstanceStore().knownDomains
	},
	user() {
	return this.$store.state.users.currentUser
	},
	blocks() {
	return get(this.$store.state.users.currentUser, 'blockIds', [])
	},
	mutes() {
	return get(this.$store.state.users.currentUser, 'muteIds', [])
	},
	domains() {
	return get(this.$store.state.users.currentUser, 'domainMutes', [])
	},
	},
	methods: {
	fetchItems(group) {
	return () => this.$store.dispatch('fetch' + group, this.userId)
	},
	importFollows(file) {
	return importFollows({
	file,
	credentials: useOAuthStore().token,
	- }).then((status) => {
	+ }).then(({ data: status }) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	importBlocks(file) {
	return importBlocks({
	file,
	credentials: useOAuthStore().token,
	- }).then((status) => {
	+ }).then(({ data: status }) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	generateExportableUsersContent(users) {
	// Get addresses
	return users
	.map((user) => {
	// check is it's a local user
	if (user && user.is_local) {
	// append the instance address
	return user.screen_name + '@' + location.hostname
	}
	return user.screen_name
	})
	.join('\n')
	},
	activateTab(tabName) {
	this.activeTab = tabName
	},
	filterUnblockedUsers(userIds) {
	return reject(userIds, (userId) => {
	const relationship = this.$store.getters.relationship(this.userId)
	return relationship.blocking \|\| userId === this.user.id
	})
	},
	filterUnMutedUsers(userIds) {
	return reject(userIds, (userId) => {
	const relationship = this.$store.getters.relationship(this.userId)
	return relationship.muting \|\| userId === this.user.id
	})
	},
	queryUserIds(query) {
	return this.$store
	.dispatch('searchUsers', { query })
	.then((users) => map(users, 'id'))
	},
	blockUsers(ids) {
	return this.$store.dispatch('blockUsers', ids)
	},
	unblockUsers(ids) {
	return this.$store.dispatch('unblockUsers', ids)
	},
	muteUsers(ids) {
	return this.$store.dispatch('muteUsers', ids)
	},
	unmuteUsers(ids) {
	return this.$store.dispatch('unmuteUsers', ids)
	},
	filterUnMutedDomains(urls) {
	return urls.filter((url) => !this.user.domainMutes.includes(url))
	},
	queryKnownDomains(query) {
	return new Promise((resolve) => {
	resolve(
	this.knownDomains.filter((url) => url.toLowerCase().includes(query)),
	)
	})
	},
	unmuteDomains(domains) {
	return this.$store.dispatch('unmuteDomains', domains)
	},
	},
	}

	export default MutesAndBlocks
	diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
	index d30a82bf9d..844e223c9f 100644
	--- a/src/components/settings_modal/tabs/profile_tab.js
	+++ b/src/components/settings_modal/tabs/profile_tab.js
	@@ -1,62 +1,62 @@
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import UserCard from 'src/components/user_card/user_card.vue'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'

	import { useOAuthStore } from 'src/stores/oauth.js'

	import { updateProfile } from 'src/api/user.js'

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

	library.add(faTimes, faPlus, faCircleNotch)

	const ProfileTab = {
	data() {
	return {
	// Whether user is locked or not
	locked: this.$store.state.users.currentUser.locked,
	}
	},
	components: {
	UserCard,
	Checkbox,
	BooleanSetting,
	},
	computed: {
	user() {
	return this.$store.state.users.currentUser
	},
	...SharedComputedObject(),
	},
	methods: {
	updateProfile() {
	const params = {
	locked: this.locked,
	}
	updateProfile({
	params,
	credentials: useOAuthStore().token,
	})
	- .then((user) => {
	+ .then(({ data: user }) => {
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	})
	.catch((error) => {
	this.displayUploadError(error)
	})
	},
	},
	watch: {
	locked() {
	this.updateProfile()
	},
	},
	}

	export default ProfileTab
	diff --git a/src/components/settings_modal/tabs/security_tab/mfa_totp.js b/src/components/settings_modal/tabs/security_tab/mfa_totp.js
	index a22e880700..bbe06c2176 100644
	--- a/src/components/settings_modal/tabs/security_tab/mfa_totp.js
	+++ b/src/components/settings_modal/tabs/security_tab/mfa_totp.js
	@@ -1,54 +1,54 @@
	import { mapState } from 'vuex'

	import Confirm from './confirm.vue'

	import { useOAuthStore } from 'src/stores/oauth.js'

	import { mfaDisableOTP } from 'src/api/user.js'

	export default {
	props: ['settings'],
	data: () => ({
	error: false,
	currentPassword: '',
	deactivate: false,
	inProgress: false, // progress peform request to disable otp method
	}),
	components: {
	confirm: Confirm,
	},
	computed: {
	isActivated() {
	return this.settings.totp
	},
	},
	methods: {
	doActivate() {
	this.$emit('activate')
	},
	cancelDeactivate() {
	this.deactivate = false
	},
	doDeactivate() {
	this.error = null
	this.deactivate = true
	},
	confirmDeactivate() {
	// confirm deactivate TOTP method
	this.error = null
	this.inProgress = true
	mfaDisableOTP({
	password: this.currentPassword,
	credentials: useOAuthStore().token,
	- }).then((res) => {
	+ }).then(({ data: res }) => {
	this.inProgress = false
	if (res.error) {
	this.error = res.error
	return
	}
	this.deactivate = false
	this.$emit('deactivate')
	})
	},
	},
	}
	diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.js b/src/components/settings_modal/tabs/security_tab/security_tab.js
	index 30a8b580ef..45876f8485 100644
	--- a/src/components/settings_modal/tabs/security_tab/security_tab.js
	+++ b/src/components/settings_modal/tabs/security_tab/security_tab.js
	@@ -1,186 +1,186 @@
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ProgressButton from 'src/components/progress_button/progress_button.vue'
	import Mfa from './mfa.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useOAuthTokensStore } from 'src/stores/oauth_tokens'

	import {
	addAlias,
	changeEmail,
	changePassword,
	deleteAccount,
	deleteAlias,
	listAliases,
	moveAccount,
	} from 'src/api/user.js'
	import localeService from 'src/services/locale/locale.service.js'

	const SecurityTab = {
	data() {
	return {
	newEmail: '',
	changeEmailError: false,
	changeEmailPassword: '',
	changedEmail: false,
	deletingAccount: false,
	deleteAccountConfirmPasswordInput: '',
	deleteAccountError: false,
	changePasswordInputs: ['', '', ''],
	changedPassword: false,
	changePasswordError: false,
	moveAccountTarget: '',
	moveAccountPassword: '',
	movedAccount: false,
	moveAccountError: false,
	aliases: [],
	listAliasesError: false,
	addAliasTarget: '',
	addedAlias: false,
	addAliasError: false,
	}
	},
	created() {
	useOAuthTokensStore().fetchTokens()
	this.fetchAliases()
	},
	components: {
	ProgressButton,
	Mfa,
	Checkbox,
	},
	computed: {
	user() {
	return this.$store.state.users.currentUser
	},
	pleromaExtensionsAvailable() {
	return useInstanceCapabilitiesStore().pleromaExtensionsAvailable
	},
	oauthTokens() {
	return useOAuthTokensStore().tokens.map((oauthToken) => {
	return {
	id: oauthToken.id,
	appName: oauthToken.app_name,
	validUntil: new Date(oauthToken.valid_until).toLocaleDateString(
	localeService.internalToBrowserLocale(this.$i18n.locale),
	),
	}
	})
	},
	},
	methods: {
	confirmDelete() {
	this.deletingAccount = true
	},
	deleteAccount() {
	deleteAccount({
	credentials: useOAuthStore().token,
	password: this.deleteAccountConfirmPasswordInput,
	- }).then((res) => {
	+ }).then(({ data: res }) => {
	if (res.status === 'success') {
	this.$store.dispatch('logout')
	this.$router.push({ name: 'root' })
	} else {
	this.deleteAccountError = res.error
	}
	})
	},
	changePassword() {
	const params = {
	password: this.changePasswordInputs[0],
	newPassword: this.changePasswordInputs[1],
	newPasswordConfirmation: this.changePasswordInputs[2],
	credentials: useOAuthStore().token,
	}
	- changePassword(params).then((res) => {
	+ changePassword(params).then(({ data: res }) => {
	if (res.status === 'success') {
	this.changedPassword = true
	this.changePasswordError = false
	this.logout()
	} else {
	this.changedPassword = false
	this.changePasswordError = res.error
	}
	})
	},
	changeEmail() {
	const params = {
	email: this.newEmail,
	password: this.changeEmailPassword,
	credentials: useOAuthStore().token,
	}
	- changeEmail(params).then((res) => {
	+ changeEmail(params).then(({ data: res }) => {
	if (res.status === 'success') {
	this.changedEmail = true
	this.changeEmailError = false
	} else {
	this.changedEmail = false
	this.changeEmailError = res.error
	}
	})
	},
	moveAccount() {
	const params = {
	targetAccount: this.moveAccountTarget,
	password: this.moveAccountPassword,
	credentials: useOAuthStore().token,
	}
	- moveAccount(params).then((res) => {
	+ moveAccount(params).then(({ data: res }) => {
	if (res.status === 'success') {
	this.movedAccount = true
	this.moveAccountError = false
	} else {
	this.movedAccount = false
	this.moveAccountError = res.error
	}
	})
	},
	removeAlias(alias) {
	deleteAlias({
	alias,
	credentials: useOAuthStore().token,
	}).then(() => this.fetchAliases())
	},
	addAlias() {
	addAlias({
	alias: this.addAliasTarget,
	credentials: useOAuthStore().token,
	})
	.then(() => {
	this.addedAlias = true
	this.addAliasError = false
	this.addAliasTarget = ''
	})
	.catch((error) => {
	this.addedAlias = false
	this.addAliasError = error
	})
	.then(() => this.fetchAliases())
	},
	fetchAliases() {
	listAliases({
	credentials: useOAuthStore().token,
	})
	- .then((res) => {
	+ .then(({ data: res }) => {
	this.aliases = res.aliases
	this.listAliasesError = false
	})
	.catch((error) => {
	this.listAliasesError = error.error
	})
	},
	logout() {
	this.$store.dispatch('logout')
	this.$router.replace('/')
	},
	revokeToken(id) {
	if (window.confirm(`${this.$i18n.t('settings.revoke_token')}?`)) {
	useOAuthTokensStore().revokeToken(id)
	}
	},
	},
	}

	export default SecurityTab
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index 2f10c5ebc0..70fb057af1 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,622 +1,622 @@
	import {
	isEqual,
	escape as ldEscape,
	unescape as ldUnescape,
	merge,
	} from 'lodash'
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
	import suggestor from 'src/components/emoji_input/suggestor.js'
	import ProgressButton from 'src/components/progress_button/progress_button.vue'
	import Select from 'src/components/select/select.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserLink from 'src/components/user_link/user_link.vue'

	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'
	import { useMediaViewerStore } from 'src/stores/media_viewer'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { usePostStatusStore } from 'src/stores/post_status'
	import { useUserHighlightStore } from 'src/stores/user_highlight.js'

	import { updateProfile } from 'src/api/user.js'
	import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
	import localeService from 'src/services/locale/locale.service.js'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faBirthdayCake,
	faClockRotateLeft,
	faEdit,
	faExpandAlt,
	faExternalLinkAlt,
	faRss,
	faSave,
	faSearchPlus,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSave,
	faRss,
	faBell,
	faSearchPlus,
	faExternalLinkAlt,
	faEdit,
	faTimes,
	faExpandAlt,
	faBirthdayCake,
	faClockRotateLeft,
	)

	const KNOWN_TAGS = new Set([
	'mrf_tag:media-force-nsfw',
	'mrf_tag:media-strip',
	'mrf_tag:force-unlisted',
	'mrf_tag:sandbox',
	'mrf_tag:disable-remote-subscription',
	'mrf_tag:disable-any-subscription',
	])

	export default {
	props: {
	// Enables all the options for profile editing, used in settings -> profile tab
	editable: {
	required: false,
	default: false,
	type: Boolean,
	},
	// ID of user to show data of
	userId: {
	required: true,
	type: String,
	},
	// Use a compact layout that hides bio, stats etc.
	hideBio: {
	required: false,
	default: false,
	type: Boolean,
	},
	// Hide action buttons
	hideButtons: {
	required: false,
	default: false,
	type: Boolean,
	},
	// default - open profile, 'zoom' - zoom, function - call function
	avatarAction: {
	required: false,
	type: String,
	default: 'default',
	},
	// Show note editor if supported
	hasNoteEditor: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Show close icon (for popovers)
	showClose: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Show close icon (for popovers)
	showExpand: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Disable forced 3:1 aspect ratio
	compact: {
	required: false,
	type: Boolean,
	default: false,
	},
	},
	components: {
	DialogModal: defineAsyncComponent(
	() => import('src/components/dialog_modal/dialog_modal.vue'),
	),
	UserAvatar,
	Checkbox,
	RemoteFollow: defineAsyncComponent(
	() => import('src/components/remote_follow/remote_follow.vue'),
	),
	ModerationTools: defineAsyncComponent(
	() => import('src/components/moderation_tools/moderation_tools.vue'),
	),
	AccountActions: defineAsyncComponent(
	() => import('src/components/account_actions/account_actions.vue'),
	),
	ProgressButton,
	FollowButton: defineAsyncComponent(
	() => import('src/components/follow_button/follow_button.vue'),
	),
	Select,
	UserLink,
	UserNote: defineAsyncComponent(
	() => import('src/components/user_note/user_note.vue'),
	),
	UserTimedFilterModal: defineAsyncComponent(
	() =>
	import(
	'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
	),
	),
	ColorInput,
	EmojiInput,
	ImageCropper: defineAsyncComponent(
	() => import('src/components/image_cropper/image_cropper.vue'),
	),
	},
	data() {
	const user = this.$store.getters.findUser(this.userId)

	return {
	followRequestInProgress: false,

	// Editable stuff
	editImage: false,

	newName: user.name_unescaped,
	editingName: false,

	newBio: ldUnescape(user.description),
	editingBio: false,

	newAvatar: null,
	newAvatarFile: null,

	newBanner: null,
	newBannerFile: null,

	newActorType: user.actor_type,
	newBirthday: user.birthday,
	newShowBirthday: user.show_birthday,
	newShowRole: user.show_role,

	newFields: user.fields?.map((field) => ({
	name: field.name,
	value: field.value,
	})),

	editingFields: false,
	}
	},
	created() {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	escapedNewBio() {
	return ldEscape(this.newBio).replace(/\n/g, '<br>')
	},
	somethingToSave() {
	if (this.newName !== this.user.name_unescaped) return true
	if (this.newBio !== ldUnescape(this.user.description)) return true
	if (this.newAvatar !== null) return true
	if (this.newBanner !== null) return true
	if (this.newActorType !== this.user.actor_type) return true
	if (this.newBirthday !== this.user.birthday) return true
	if (this.newShowBirthday !== this.user.show_birthday) return true
	if (this.newShowRole !== this.user.show_role) return true
	if (
	!isEqual(
	this.newFields,
	this.user.fields?.map((field) => ({
	name: field.name,
	value: field.value,
	})),
	)
	)
	return true
	return false
	},
	groupActorAvailable() {
	return useInstanceCapabilitiesStore().groupActorAvailable
	},
	availableActorTypes() {
	return this.groupActorAvailable
	? ['Person', 'Service', 'Group']
	: ['Person', 'Service']
	},
	user() {
	return this.$store.getters.findUser(this.userId)
	},
	role() {
	return this.user.role
	},
	relationship() {
	return this.$store.getters.relationship(this.userId)
	},
	isOtherUser() {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl() {
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn() {
	return this.$store.state.users.currentUser
	},
	dailyAvg() {
	const days = Math.ceil(
	(new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000),
	)
	return Math.round(this.user.statuses_count / days)
	},
	emoji() {
	return useEmojiStore().customEmoji.map((e) => ({
	shortcode: e.displayText,
	static_url: e.imageUrl,
	url: e.imageUrl,
	}))
	},
	userHighlightType: {
	get() {
	return useUserHighlightStore().get(this.user.screen_name).type
	},
	set(type) {
	if (type !== 'disabled') {
	useUserHighlightStore().setAndSave({
	user: this.user.screen_name,
	value: { type },
	})
	} else {
	useUserHighlightStore().unsetAndSave({ user: this.user.screen_name })
	}
	},
	},
	userHighlightColor: {
	get() {
	return useUserHighlightStore().get(this.user.screen_name).color
	},
	set(color) {
	useUserHighlightStore().setAndSave({
	user: this.user.screen_name,
	value: { color },
	})
	},
	},
	visibleRole() {
	if (!this.user.show_role && !this.user.adminData) {
	return
	}
	const rights = this.user.rights
	if (!rights) {
	return
	}
	const validRole = rights.admin \|\| rights.moderator
	const roleTitle = rights.admin ? 'admin' : 'moderator'
	return validRole && roleTitle
	},
	hideFollowsCount() {
	return this.isOtherUser && this.user.hide_follows_count
	},
	hideFollowersCount() {
	return this.isOtherUser && this.user.hide_followers_count
	},
	showModerationMenu() {
	const privileges = this.loggedIn.privileges
	return (
	this.loggedIn.role === 'admin' \|\|
	privileges.has('users_manage_activation_state') \|\|
	privileges.has('users_delete') \|\|
	privileges.has('users_manage_tags')
	)
	},
	hasNote() {
	return this.relationship.note
	},
	supportsNote() {
	return 'note' in this.relationship
	},
	muteExpiryAvailable() {
	return Object.hasOwn(this.user, 'mute_expires_at')
	},
	muteExpiry() {
	return this.user.mute_expires_at === false
	? this.$t('user_card.mute_expires_forever')
	: this.$t('user_card.mute_expires_at', [
	new Date(this.user.mute_expires_at).toLocaleString(),
	])
	},
	blockExpiryAvailable() {
	return Object.hasOwn(this.user, 'block_expires_at')
	},
	blockExpiry() {
	return this.user.block_expires_at == null
	? this.$t('user_card.block_expires_forever')
	: this.$t('user_card.block_expires_at', [
	new Date(this.user.mute_expires_at).toLocaleString(),
	])
	},
	formattedBirthday() {
	const browserLocale = localeService.internalToBrowserLocale(
	this.$i18n.locale,
	)
	return (
	this.user.birthday &&
	new Date(Date.parse(this.user.birthday)).toLocaleDateString(
	browserLocale,
	{ timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' },
	)
	)
	},
	formattedJoinDate() {
	const browserLocale = localeService.internalToBrowserLocale(
	this.$i18n.locale,
	)
	return (
	this.user.created_at &&
	new Date(Date.parse(this.user.created_at)).toLocaleDateString(
	browserLocale,
	{ timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' },
	)
	)
	},

	// Editable stuff
	avatarImgSrc() {
	const currentUrl =
	this.user.profile_image_url_original \|\| this.defaultAvatar
	if (!this.editable) return currentUrl
	const newUrl =
	this.newAvatar === null ? this.defaultAvatar : this.newAvatar
	return this.newAvatar === null ? currentUrl : newUrl
	},
	bannerImgSrc() {
	const currentUrl = this.user.cover_photo \|\| this.defaultBanner
	if (!this.editable) return currentUrl
	const newUrl =
	this.newBanner === null ? this.defaultBanner : this.newBanner
	return this.newBanner === null ? currentUrl : newUrl
	},
	defaultAvatar() {
	return (
	useInstanceStore().server +
	useInstanceStore().instanceIdentity.defaultAvatar
	)
	},
	defaultBanner() {
	return (
	useInstanceStore().server +
	useInstanceStore().instanceIdentity.defaultBanner
	)
	},
	isDefaultAvatar() {
	const baseAvatar = useInstanceStore().instanceIdenitity.defaultAvatar
	return (
	!this.$store.state.users.currentUser.profile_image_url \|\|
	this.$store.state.users.currentUser.profile_image_url.includes(
	baseAvatar,
	)
	)
	},
	isDefaultBanner() {
	const baseBanner = useInstanceStore().instanceIdentity.defaultBanner
	return (
	!this.$store.state.users.currentUser.cover_photo \|\|
	this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
	)
	},
	fieldsLimits() {
	return useInstanceStore().limits.fieldsLimits
	},
	maxFields() {
	return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
	},
	emojiUserSuggestor() {
	return suggestor({
	emoji: [
	...useEmojiStore().standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	store: this.$store,
	})
	},
	emojiSuggestor() {
	return suggestor({
	emoji: [
	...useEmojiStore().standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	})
	},
	allowNonSquareEmoji() {
	return this.mergedConfig.nonSquareEmoji
	},
	hideUserStats() {
	return this.mergedConfig.hideUserStats
	},
	hideRemarks() {
	return this.mergedConfig.userCardHidePersonalMarks
	},
	...mapState(useMergedConfigStore, ['mergedConfig']),
	},
	methods: {
	isKnownTag(tag) {
	return KNOWN_TAGS.has(tag)
	},
	muteUser() {
	this.$refs.timedMuteDialog.optionallyPrompt()
	},
	unmuteUser() {
	this.$store.dispatch('unmuteUser', this.user.id)
	},
	subscribeUser() {
	return this.$store.dispatch('subscribeUser', this.user.id)
	},
	unsubscribeUser() {
	return this.$store.dispatch('unsubscribeUser', this.user.id)
	},
	linkClicked({ target }) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	userProfileLink(user) {
	return generateProfileLink(
	user.id,
	user.screen_name,
	useInstanceStore().restrictedNicknames,
	)
	},
	openProfileTab() {
	useInterfaceStore().openSettingsModalTab('profile')
	},
	zoomAvatar() {
	const attachment = {
	url: this.user.profile_image_url_original,
	type: 'image',
	}
	useMediaViewerStore().setMedia([attachment])
	useMediaViewerStore().setCurrentMedia(attachment)
	},
	mentionUser() {
	usePostStatusStore().openPostStatusModal({
	profileMention: true,
	repliedUser: this.user,
	})
	},
	onAvatarClickHandler(e) {
	if (this.onAvatarClick) {
	e.preventDefault()
	this.onAvatarClick()
	}
	},

	// Editable stuff
	changeAvatar() {
	this.editImage = 'avatar'
	},
	changeBanner() {
	this.editImage = 'banner'
	},
	submitImage({ canvas, file }) {
	if (canvas) {
	return canvas.toBlob((data) =>
	this.submitImage({ canvas: null, file: data }),
	)
	}

	const reader = new window.FileReader()
	reader.onload = (e) => {
	const dataUrl = e.target.result

	if (this.editImage === 'avatar') {
	this.newAvatar = dataUrl
	this.newAvatarFile = file
	} else {
	this.newBanner = dataUrl
	this.newBannerFile = file
	}

	this.editImage = false
	}

	reader.readAsDataURL(file)
	},
	resetImage() {
	if (this.editImage === 'avatar') {
	this.newAvatar = null
	this.newAvatarFile = null
	} else {
	this.newBanner = null
	this.newBannerFile = null
	}
	this.editImage = false
	},
	addField() {
	if (this.newFields.length < this.maxFields) {
	this.newFields.push({ name: '', value: '' })
	}
	},
	deleteField(index) {
	this.newFields.splice(index, 1)
	},
	propsToNative(props) {
	return propsToNative(props)
	},
	cancelImageText() {
	return
	},
	resetState() {
	const user = this.$store.state.users.currentUser

	this.newName = user.name_unescaped
	this.newBio = ldUnescape(user.description)

	this.newAvatar = null
	this.newAvatarFile = null

	this.newBanner = null
	this.newBannerFile = null

	this.newActorType = user.actor_type
	this.newBirthday = user.birthday
	this.newShowBirthday = user.show_birthday
	this.newShowRole = user.show_role

	this.newFields = user.fields.map((field) => ({
	name: field.name,
	value: field.value,
	}))
	},
	updateProfile() {
	const params = {
	note: this.newBio,

	// Backend notation.
	display_name: this.newName,
	fields_attributes: this.newFields.filter((el) => el != null),
	show_role: !!this.newShowRole,
	birthday: this.newBirthday \|\| '',
	show_birthday: !!this.newShowBirthday,
	}

	if (this.newActorType) {
	params.actor_type = this.newActorType
	}

	if (this.newAvatarFile !== null) {
	params.avatar = this.newAvatarFile
	}

	if (this.newBannerFile !== null) {
	params.header = this.newBannerFile
	}

	updateProfile({ params })
	- .then((user) => {
	+ .then(({ data: user }) => {
	this.newFields.splice(this.newFields.length)
	merge(this.newFields, user.fields)
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	this.resetState()
	})
	.catch((error) => {
	this.displayUploadError(error)
	})
	},
	displayUploadError(error) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'upload.error.message',
	messageArgs: [error.message],
	level: 'error',
	})
	},
	},
	}
	diff --git a/src/components/who_to_follow/who_to_follow.js b/src/components/who_to_follow/who_to_follow.js
	index 3c0b53b0d1..6f00b3e5e7 100644
	--- a/src/components/who_to_follow/who_to_follow.js
	+++ b/src/components/who_to_follow/who_to_follow.js
	@@ -1,45 +1,45 @@
	import FollowCard from 'src/components/follow_card/follow_card.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useOAuthStore } from 'src/stores/oauth.js'

	import { fetchUser, suggestions } from 'src/api/public.js'

	const WhoToFollow = {
	components: {
	FollowCard,
	},
	data() {
	return {
	users: [],
	}
	},
	mounted() {
	this.getWhoToFollow()
	},
	methods: {
	showWhoToFollow(reply) {
	reply.forEach(({ id }) => {
	fetchUser({
	id,
	credentials: useOAuthStore().token,
	- }).then((externalUser) => {
	+ }).then(({ data: externalUser }) => {
	if (!externalUser.error) {
	this.$store.commit('addNewUsers', [externalUser])
	this.users.push(externalUser)
	}
	})
	})
	},
	getWhoToFollow() {
	const credentials = useOAuthStore().token
	if (credentials) {
	- suggestions({ credentials }).then((reply) => {
	+ suggestions({ credentials }).then(({ data: reply }) => {
	this.showWhoToFollow(reply)
	})
	}
	},
	},
	}

	export default WhoToFollow
	diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
	index 32f9dc918d..7a65ba39d2 100644
	--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
	+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
	@@ -1,85 +1,85 @@
	import { shuffle } from 'lodash'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useOAuthStore } from 'src/stores/oauth.js'

	import { fetchUser, suggestions } from 'src/api/public.js'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

	function showWhoToFollow(panel, reply) {
	const shuffled = shuffle(reply)

	panel.usersToFollow.forEach((toFollow, index) => {
	const user = shuffled[index]
	const img = user.avatar \|\| useInstanceStore().instanceIdentity.defaultAvatar
	const name = user.acct

	toFollow.img = img
	toFollow.name = name

	fetchUser({
	id: name,
	credentials: useOAuthStore().token,
	- }).then((externalUser) => {
	+ }).then(({ data: externalUser }) => {
	if (!externalUser.error) {
	panel.$store.commit('addNewUsers', [externalUser])
	toFollow.id = externalUser.id
	}
	})
	})
	}

	function getWhoToFollow(panel) {
	const credentials = panel.$store.state.users.currentUser.credentials
	if (credentials) {
	panel.usersToFollow.forEach((toFollow) => {
	toFollow.name = 'Loading...'
	})
	- suggestions({ credentials }).then((reply) => {
	+ suggestions({ credentials }).then(({ data: reply }) => {
	showWhoToFollow(panel, reply)
	})
	}
	}

	const WhoToFollowPanel = {
	data: () => ({
	usersToFollow: [],
	}),
	computed: {
	user: function () {
	return this.$store.state.users.currentUser.screen_name
	},
	suggestionsEnabled() {
	return useInstanceCapabilitiesStore().suggestionsEnabled
	},
	},
	methods: {
	userProfileLink(id, name) {
	return generateProfileLink(
	id,
	name,
	useInstanceStore().restrictedNicknames,
	)
	},
	},
	watch: {
	user: function () {
	if (this.suggestionsEnabled) {
	getWhoToFollow(this)
	}
	},
	},
	mounted: function () {
	this.usersToFollow = new Array(3).fill().map(() => ({
	img: useInstanceStore().instanceIdentity.defaultAvatar,
	name: '',
	id: 0,
	}))
	if (this.suggestionsEnabled) {
	getWhoToFollow(this)
	}
	},
	}

	export default WhoToFollowPanel
	diff --git a/src/modules/profileConfig.js b/src/modules/profileConfig.js
	index 80f881a25b..3fca7d6a85 100644
	--- a/src/modules/profileConfig.js
	+++ b/src/modules/profileConfig.js
	@@ -1,143 +1,143 @@
	import { get, set } from 'lodash'

	import { useOAuthStore } from 'src/stores/oauth.js'

	import { updateNotificationSettings, updateProfile } from 'src/api/user.js'

	const defaultApi = ({ rootState, commit }, { path, value }) => {
	const params = {}
	set(params, path, value)
	return updateProfile({
	params,
	credentials: useOAuthStore().token,
	- }).then((result) => {
	+ }).then(({ data: result }) => {
	commit('addNewUsers', [result])
	commit('setCurrentUser', result)
	})
	}

	const notificationsApi = ({ rootState, commit }, { path, value, oldValue }) => {
	const settings = {}
	set(settings, path, value)
	return updateNotificationSettings({
	settings,
	credentials: useOAuthStore().token,
	- }).then((result) => {
	+ }).then(({ data: result }) => {
	if (result.status === 'success') {
	commit('confirmProfileOption', { name, value })
	} else {
	commit('confirmProfileOption', { name, value: oldValue })
	}
	})
	}

	/**
	* Map that stores relation between path for reading (from user profile),
	* for writing (into API) an what API to use.
	*
	* Shorthand - instead of { get, set, api? } object it's possible to use string
	* in case default api is used and get = set
	*
	* If no api is specified, defaultApi is used (see above)
	*/
	export const settingsMap = {
	defaultScope: 'source.privacy',
	defaultNSFW: 'source.sensitive', // BROKEN: pleroma/pleroma#2837
	stripRichContent: {
	get: 'source.pleroma.no_rich_text',
	set: 'no_rich_text',
	},
	// Privacy
	locked: 'locked',
	acceptChatMessages: {
	get: 'pleroma.accepts_chat_messages',
	set: 'accepts_chat_messages',
	},
	allowFollowingMove: {
	get: 'pleroma.allow_following_move',
	set: 'allow_following_move',
	},
	discoverable: {
	get: 'source.pleroma.discoverable',
	set: 'discoverable',
	},
	hideFavorites: {
	get: 'pleroma.hide_favorites',
	set: 'hide_favorites',
	},
	hideFollowers: {
	get: 'pleroma.hide_followers',
	set: 'hide_followers',
	},
	hideFollows: {
	get: 'pleroma.hide_follows',
	set: 'hide_follows',
	},
	hideFollowersCount: {
	get: 'pleroma.hide_followers_count',
	set: 'hide_followers_count',
	},
	hideFollowsCount: {
	get: 'pleroma.hide_follows_count',
	set: 'hide_follows_count',
	},
	// NotificationSettingsAPIs
	webPushHideContents: {
	get: 'pleroma.notification_settings.hide_notification_contents',
	set: 'hide_notification_contents',
	api: notificationsApi,
	},
	blockNotificationsFromStrangers: {
	get: 'pleroma.notification_settings.block_from_strangers',
	set: 'block_from_strangers',
	api: notificationsApi,
	},
	}

	export const defaultState = Object.fromEntries(
	Object.keys(settingsMap).map((key) => [key, null]),
	)

	const profileConfig = {
	state: { ...defaultState },
	mutations: {
	confirmProfileOption(state, { name, value }) {
	set(state, name, value)
	},
	wipeProfileOption(state, { name }) {
	set(state, name, null)
	},
	wipeAllProfileOptions(state) {
	Object.keys(settingsMap).forEach((key) => {
	set(state, key, null)
	})
	},
	// Set the settings based on their path location
	setCurrentUser(state, user) {
	Object.entries(settingsMap).forEach((map) => {
	const [name, value] = map
	const { get: path = value } = value
	set(state, name, get(user._original, path))
	})
	},
	},
	actions: {
	setProfileOption({ rootState, state, commit }, { name, value }) {
	const oldValue = get(state, name)
	const map = settingsMap[name]
	if (!map) throw new Error('Invalid server-side setting')
	const { set: path = map, api = defaultApi } = map
	commit('wipeProfileOption', { name })

	api({ rootState, commit }, { path, value, oldValue }).catch((e) => {
	console.warn('Error setting server-side option:', e)
	commit('confirmProfileOption', { name, value: oldValue })
	})
	},
	logout({ commit }) {
	commit('wipeAllProfileOptions')
	},
	},
	}

	export default profileConfig
	diff --git a/src/services/follow_request_fetcher/follow_request_fetcher.service.js b/src/services/follow_request_fetcher/follow_request_fetcher.service.js
	index ecb6cb7dd7..e49206fcdc 100644
	--- a/src/services/follow_request_fetcher/follow_request_fetcher.service.js
	+++ b/src/services/follow_request_fetcher/follow_request_fetcher.service.js
	@@ -1,30 +1,30 @@
	import { fetchFollowRequests } from 'src/api/user.js'
	import { promiseInterval } from 'src/services/promise_interval/promise_interval.js'

	const fetchAndUpdate = ({ store, credentials }) => {
	return fetchFollowRequests({ credentials })
	.then(
	- (requests) => {
	+ ({ data: requests }) => {
	store.commit('setFollowRequests', requests)
	store.commit('addNewUsers', requests)
	},
	(rej) => {
	console.error(rej)
	},
	)
	.catch((e) => {
	console.error(e)
	})
	}

	const startFetching = ({ credentials, store }) => {
	const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
	boundFetchAndUpdate()
	return promiseInterval(boundFetchAndUpdate, 10000)
	}

	const followRequestFetcher = {
	startFetching,
	}

	export default followRequestFetcher
	diff --git a/src/stores/admin_settings.js b/src/stores/admin_settings.js
	index 9c9e69d8b3..06bcab9aed 100644
	--- a/src/stores/admin_settings.js
	+++ b/src/stores/admin_settings.js
	@@ -1,617 +1,617 @@
	import { cloneDeep, differenceWith, flatten, get, isEqual, set } from 'lodash'
	import { defineStore } from 'pinia'

	import { useOAuthStore } from 'src/stores/oauth.js'

	import {
	addNewEmojiFile,
	changeStatusScope,
	createEmojiPack,
	deleteAccounts,
	deleteEmojiPack,
	disableMFA,
	downloadRemoteEmojiPack,
	downloadRemoteEmojiPackZIP,
	getAvailableFrontends,
	getInstanceConfigDescriptions,
	getInstanceDBConfig,
	getUserData,
	importEmojiFromFS,
	installFrontend,
	listRemoteEmojiPacks,
	listStatuses,
	listUsers,
	pushInstanceDBConfig,
	reloadEmoji,
	requirePasswordChange,
	resendConfirmationEmail,
	setUsersActivationStatus,
	setUsersApprovalStatus,
	setUsersConfirmationStatus,
	setUsersRight,
	setUsersSuggestionStatus,
	setUsersTags,
	} from 'src/api/admin.js'
	import { listEmojiPacks } from 'src/api/public.js'
	import { parseStatus } from 'src/services/entity_normalizer/entity_normalizer.service.js'

	export const defaultState = {
	frontends: [],
	loaded: false,
	needsReboot: null,
	config: null,
	modifiedPaths: null,
	descriptions: null,
	draft: null,
	dbConfigEnabled: null,
	}

	export const newUserFlags = {
	...defaultState.flagStorage,
	}

	export const useAdminSettingsStore = defineStore('adminSettings', {
	state: () => ({
	...cloneDeep(defaultState),
	}),
	actions: {
	// Configuration Stuff
	setInstanceAdminNoDbConfig() {
	this.loaded = false
	this.dbConfigEnabled = false
	},
	updateAdminSettings({ config, modifiedPaths }) {
	this.loaded = true
	this.dbConfigEnabled = true
	this.config = config
	this.modifiedPaths = modifiedPaths
	},
	updateAdminDescriptions({ descriptions }) {
	this.descriptions = descriptions
	},
	updateAdminDraft({ path, value }) {
	const [group, key, subkey] = path
	const parent = [group, key, subkey]

	set(this.draft, path, value)

	// force-updating grouped draft to trigger refresh of group settings
	if (path.length > parent.length) {
	set(this.draft, parent, cloneDeep(get(this.draft, parent)))
	}
	},
	resetAdminDraft() {
	this.draft = cloneDeep(this.config)
	},

	loadAdminStuff() {
	getInstanceDBConfig({
	credentials: useOAuthStore().token,
	}).then(({ data: backendDbConfig }) => {
	if (backendDbConfig.error) {
	if (backendDbConfig.error.status === 400) {
	backendDbConfig.error.json().then((errorJson) => {
	if (/configurable_from_database/.test(errorJson.error)) {
	this.setInstanceAdminNoDbConfig()
	}
	})
	}
	} else {
	this.setInstanceAdminSettings({
	credentials: useOAuthStore().token,
	backendDbConfig,
	})
	}
	})
	if (this.descriptions === null) {
	getInstanceConfigDescriptions({
	credentials: useOAuthStore().token,
	}).then(({ data: backendDescriptions }) =>
	this.setInstanceAdminDescriptions({
	credentials: useOAuthStore().token,
	backendDescriptions,
	}),
	)
	}
	},
	setInstanceAdminSettings({ backendDbConfig }) {
	const config = this.config \|\| {}
	const modifiedPaths = new Set()

	backendDbConfig.configs.forEach((c) => {
	const path = [c.group, c.key]
	if (c.db) {
	// Path elements can contain dot, therefore we use ' -> ' as a separator instead
	// Using strings for modified paths for easier searching
	c.db.forEach((x) => modifiedPaths.add([...path, x].join(' -> ')))
	}

	// we need to preserve tuples on second level only, possibly third
	// but it's not a case right now.
	const convert = (value, preserveTuples, preserveTuplesLv2) => {
	if (Array.isArray(value) && value.length > 0 && value[0].tuple) {
	if (!preserveTuples) {
	return value.reduce((acc, c) => {
	if (c.tuple == null) {
	return {
	...acc,
	[c]: c,
	}
	}
	return {
	...acc,
	[c.tuple[0]]: convert(c.tuple[1], preserveTuplesLv2),
	}
	}, {})
	} else {
	return value.map((x) => x.tuple)
	}
	} else {
	if (!preserveTuples) {
	return value
	} else {
	return value.tuple
	}
	}
	}
	// for most stuff we want maps since those are more convenient
	// however this doesn't allow for multiple values per same key
	// so for those cases we want to preserve tuples as-is
	// right now it's made exclusively for :pleroma.:rate_limit
	// so it might not work properly elsewhere
	const preserveTuples = path.find((x) => x === ':rate_limit')
	set(config, path, convert(c.value, false, preserveTuples))
	})
	// patching http adapter config to be easier to handle
	const adapter = config[':pleroma'][':http'][':adapter']
	if (Array.isArray(adapter)) {
	config[':pleroma'][':http'][':adapter'] = {
	[':ssl_options']: {
	[':versions']: [],
	},
	}
	}
	this.updateAdminSettings({ config, modifiedPaths })
	this.resetAdminDraft()
	},
	setInstanceAdminDescriptions({ backendDescriptions }) {
	const convert = (
	{ children, description, label, key = '<ROOT>', group, suggestions },
	path,
	acc,
	) => {
	const newPath = group ? [group, key] : [key]
	const obj = { description, label, suggestions }
	if (Array.isArray(children)) {
	children.forEach((c) => {
	convert(c, newPath, obj)
	})
	}
	set(acc, newPath, obj)
	}

	const descriptions = {}

	backendDescriptions.forEach((d) => convert(d, '', descriptions))
	this.updateAdminDescriptions({ descriptions })
	},

	// This action takes draft state, diffs it with live config state and then pushes
	// only differences between the two. Difference detection only work up to subkey (third) level.
	pushAdminDraft() {
	// TODO cleanup paths in modifiedPaths
	const convert = (value) => {
	if (typeof value !== 'object') {
	return value
	} else if (Array.isArray(value)) {
	return value.map(convert)
	} else {
	return Object.entries(value).map(([k, v]) => ({ tuple: [k, v] }))
	}
	}

	// Getting all group-keys used in config
	const allGroupKeys = flatten(
	Object.entries(this.config).map(([group, lv1data]) =>
	Object.keys(lv1data).map((key) => ({ group, key })),
	),
	)

	// Only using group-keys where there are changes detected
	const changedGroupKeys = allGroupKeys.filter(({ group, key }) => {
	return !isEqual(this.config[group][key], this.draft[group][key])
	})

	// Here we take all changed group-keys and get all changed subkeys
	const changed = changedGroupKeys.map(({ group, key }) => {
	const config = this.config[group][key]
	const draft = this.draft[group][key]

	// We convert group-key value into entries arrays
	const eConfig = Object.entries(config)
	const eDraft = Object.entries(draft)

	// Then those entries array we diff so only changed subkey entries remain
	// We use the diffed array to reconstruct the object and then shove it into convert()
	return {
	group,
	key,
	value: convert(
	Object.fromEntries(differenceWith(eDraft, eConfig, isEqual)),
	),
	}
	})

	pushInstanceDBConfig({
	credentials: useOAuthStore().token,
	payload: {
	configs: changed,
	},
	})
	.then(() =>
	getInstanceDBConfig({
	credentials: useOAuthStore().token,
	}).then(({ data }) => data),
	)
	.then((backendDbConfig) =>
	this.setInstanceAdminSettings({
	credentials: useOAuthStore().token,

	backendDbConfig,
	}),
	)
	},
	pushAdminSetting({ path, value }) {
	const [group, key, ...rest] = Array.isArray(path)
	? path
	: path.split(/\./g)
	const clone = {} // not actually cloning the entire thing to avoid excessive writes
	set(clone, rest, value)

	// TODO cleanup paths in modifiedPaths
	const convert = (value) => {
	if (typeof value !== 'object') {
	return value
	} else if (Array.isArray(value)) {
	return value.map(convert)
	} else {
	return Object.entries(value).map(([k, v]) => ({ tuple: [k, v] }))
	}
	}

	pushInstanceDBConfig({
	credentials: useOAuthStore().token,
	payload: {
	configs: [
	{
	group,
	key,
	value: convert(clone),
	},
	],
	},
	})
	.then(() =>
	getInstanceDBConfig({
	credentials: useOAuthStore().token,
	}).then(({ data }) => data),
	)
	.then((backendDbConfig) =>
	this.setInstanceAdminSettings({
	credentials: useOAuthStore().token,
	backendDbConfig,
	}),
	)
	},
	resetAdminSetting({ path }) {
	const [group, key, subkey] = Array.isArray(path)
	? path
	: path.split(/\./g)

	this.modifiedPaths.delete(path)

	return pushInstanceDBConfig({
	credentials: useOAuthStore().token,
	payload: {
	configs: [
	{
	group,
	key,
	delete: true,
	subkeys: [subkey],
	},
	],
	},
	})
	.then(() =>
	getInstanceDBConfig({
	credentials: useOAuthStore().token,
	}).then(({ data }) => data),
	)
	.then((backendDbConfig) =>
	this.setInstanceAdminSettings({ backendDbConfig }),
	)
	},

	// Frontends Stuff
	loadFrontendsStuff() {
	getAvailableFrontends({
	credentials: useOAuthStore().token,
	}).then(({ data: frontends }) =>
	this.setAvailableFrontends({ frontends }),
	)
	},

	setAvailableFrontends({ frontends }) {
	this.frontends = frontends.map((f) => {
	f.installedRefs = f.installed_refs
	if (f.name === 'pleroma-fe') {
	f.refs = ['master', 'develop']
	} else {
	f.refs = [f.ref]
	}
	return f
	})
	},

	installFrontend() {
	return installFrontend({
	credentials: useOAuthStore().token,
	}).then(({ data }) => data)
	},

	// Statuses stuff
	async fetchStatuses(opts) {
	const {
	data: { total, activities },
	} = await listStatuses({
	credentials: useOAuthStore().token,
	opts,
	})

	const statuses = activities.map(parseStatus)

	await window.vuex.dispatch('addNewStatuses', { statuses })

	return {
	items: statuses,
	count: total,
	}
	},
	async changeStatusScope(opts) {
	const { data } = await changeStatusScope({
	credentials: useOAuthStore().token,
	opts,
	})
	const status = parseStatus(data)

	await window.vuex.dispatch('addNewStatuses', { statuses: [status] })
	},

	// Users stuff
	async fetchUsers(opts) {
	const {
	data: { users, count },
	} = await listUsers({
	credentials: useOAuthStore().token,
	opts,
	})

	return {
	items: await Promise.all(
	users.map(
	async (userAdminData) =>
	await window.vuex.dispatch('updateUserAdminData', {
	userAdminData,
	}),
	),
	),
	count,
	}
	},
	async getUserData({ user }) {
	const api = getUserData
	const { screen_name } = user

	const result = await api({
	credentials: useOAuthStore().token,
	screen_name,
	})

	window.vuex.commit('updateUserAdminData', { user: result.data })
	},
	async deleteUsers({ users }) {
	const screen_names = users.map((u) => u.screen_name)
	const api = deleteAccounts

	const resultUserIds = await api({
	credentials: useOAuthStore().token,
	screen_names,
	})

	resultUserIds.data.forEach((userId) => {
	window.vuex.dispatch(
	'markStatusesAsDeleted',
	(status) => userId === status.user.id,
	)
	// TODO when migrated to pinia, also remove user
	})

	return resultUserIds
	},
	resendConfirmationEmail({ users }) {
	const screen_names = users.map((u) => u.screen_name)

	return resendConfirmationEmail({
	credentials: useOAuthStore().token,
	screen_names,
	}).then(({ data }) => data)
	},
	requirePasswordChange({ users }) {
	const screen_names = users.map((u) => u.screen_name)

	return requirePasswordChange({
	credentials: useOAuthStore().token,
	screen_names,
	}).then(({ data }) => data)
	},
	// Singular only!
	disableMFA({ user }) {
	const { screen_name } = user

	return disableMFA({
	credentials: useOAuthStore().token,
	screen_name,
	}).then(({ data }) => data)
	},
	async setUsersTags({ users, tags, value }) {
	const screen_names = users.map((u) => u.screen_name)
	const api = setUsersTags

	await api({
	credentials: useOAuthStore().token,
	screen_names,
	tags,
	value,
	})

	users.forEach((user) => {
	this.getUserData({ user })
	})
	},
	async setUsersRight({ users, right, value }) {
	const screen_names = users.map((u) => u.screen_name)
	const api = setUsersRight

	await api({
	credentials: useOAuthStore().token,
	screen_names,
	right,
	value,
	})

	users.forEach((user) => {
	window.vuex.commit('updateRight', { user, right, value })
	})
	},
	async setUsersActivationStatus({ users, value }) {
	const screen_names = users.map((u) => u.screen_name)
	const api = setUsersActivationStatus

	const resultUsers = await api({
	credentials: useOAuthStore().token,
	screen_names,
	value,
	})

	resultUsers.data.forEach((user) => {
	window.vuex.commit('updateUserAdminData', { user })
	})
	},
	async setUsersSuggestionStatus({ users, value }) {
	const screen_names = users.map((u) => u.screen_name)
	const api = setUsersSuggestionStatus

	const resultUsers = await api({
	credentials: useOAuthStore().token,
	screen_names,
	value,
	})

	resultUsers.data.forEach((user) => {
	window.vuex.commit('updateUserAdminData', { user })
	})
	},
	async setUsersConfirmationStatus({ users }) {
	const screen_names = users.map((u) => u.screen_name)
	const api = setUsersConfirmationStatus

	await api({
	credentials: useOAuthStore().token,
	screen_names,
	})

	users.forEach((user) => {
	this.getUserData({ user })
	})
	},
	async setUsersApprovalStatus({ users }) {
	const screen_names = users.map((u) => u.screen_name)
	const api = setUsersApprovalStatus

	const resultUsers = await api({
	credentials: useOAuthStore().token,
	screen_names,
	})

	resultUsers.data.forEach((user) => {
	window.vuex.commit('updateUserAdminData', { user })
	})
	},
	reloadEmoji() {
	return reloadEmoji({ credentials: useOAuthStore().token }).then(
	({ data }) => data,
	)
	},
	importEmojiFromFS() {
	return importEmojiFromFS({ credentials: useOAuthStore().token }).then(
	({ data }) => data,
	)
	},
	listEmojiPacks(params) {
	return listEmojiPacks({
	...params,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data)
	},
	listRemoteEmojiPacks(params) {
	return listRemoteEmojiPacks({
	...params,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data)
	},
	addNewEmojiFile({ packName, file, shortcode, filename }) {
	return addNewEmojiFile({
	packName,
	file,
	shortcode,
	filename,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data)
	},
	downloadRemoteEmojiPack({ instance, packName, as }) {
	return downloadRemoteEmojiPack({
	instance,
	packName,
	as,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data)
	},
	downloadRemoteEmojiPackZIP({ url, packName }) {
	return downloadRemoteEmojiPackZIP({
	url,
	packName,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data)
	},
	createEmojiPack({ name }) {
	return createEmojiPack({
	name,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data)
	},
	deleteEmojiPack({ name }) {
	- return createEmojiPack({
	+ return deleteEmojiPack({
	name,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data)
	},
	saveEmojiPackMetadata({ name, newData }) {
	return createEmojiPack({
	name,
	newData,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data)
	},
	},
	})
	diff --git a/src/stores/emoji.js b/src/stores/emoji.js
	index 6ea8d10325..3316f83284 100644
	--- a/src/stores/emoji.js
	+++ b/src/stores/emoji.js
	@@ -1,329 +1,321 @@
	import { merge } from 'lodash'
	import { defineStore } from 'pinia'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useOAuthStore } from 'src/stores/oauth.js'

	import { listEmojiPacks } from 'src/api/public.js'
	import { ensureFinalFallback } from 'src/i18n/languages.js'

	import { annotationsLoader } from 'virtual:pleroma-fe/emoji-annotations'

	const defaultState = {
	// Custom emoji from server
	customEmoji: [],
	customEmojiFetched: false,
	adminPacksLocal: null,
	adminPacksLocalLoading: true,

	// Unicode emoji from bundle
	emoji: {},
	emojiFetched: false,
	unicodeEmojiAnnotations: {},

	// Stickers
	stickers: null,
	}

	const SORTED_EMOJI_GROUP_IDS = [
	'smileys-and-emotion',
	'people-and-body',
	'animals-and-nature',
	'food-and-drink',
	'travel-and-places',
	'activities',
	'objects',
	'symbols',
	'flags',
	]

	const REGIONAL_INDICATORS = (() => {
	const start = 0x1f1e6
	const end = 0x1f1ff
	const A = 'A'.codePointAt(0)
	const res = new Array(end - start + 1)
	for (let i = start; i <= end; ++i) {
	const letter = String.fromCodePoint(A + i - start)
	res[i - start] = {
	replacement: String.fromCodePoint(i),
	imageUrl: false,
	displayText: 'regional_indicator_' + letter,
	displayTextI18n: {
	key: 'emoji.regional_indicator',
	args: { letter },
	},
	}
	}
	return res
	})()

	const loadAnnotations = (lang) => {
	return annotationsLoader[lang]().then((k) => k.default)
	}

	const injectAnnotations = (emoji, annotations) => {
	const availableLangs = Object.keys(annotations)

	return {
	...emoji,
	annotations: availableLangs.reduce((acc, cur) => {
	acc[cur] = annotations[cur][emoji.replacement]
	return acc
	}, {}),
	}
	}

	const injectRegionalIndicators = (groups) => {
	groups.symbols.push(...REGIONAL_INDICATORS)
	return groups
	}

	export const useEmojiStore = defineStore('emoji', {
	state: () => ({ ...defaultState }),
	getters: {
	groupedCustomEmojis(state) {
	const packsOf = (emoji) => {
	const packs = emoji.tags
	.filter((k) => k.startsWith('pack:'))
	.map((k) => {
	const packName = k.slice(5) // remove 'pack:' prefix
	return {
	id: `custom-${packName}`,
	text: packName,
	}
	})

	if (!packs.length) {
	return [
	{
	id: 'unpacked',
	},
	]
	} else {
	return packs
	}
	}

	return this.customEmoji.reduce((res, emoji) => {
	packsOf(emoji).forEach(({ id: packId, text: packName }) => {
	if (!res[packId]) {
	res[packId] = {
	id: packId,
	text: packName,
	image: emoji.imageUrl,
	emojis: [],
	}
	}
	res[packId].emojis.push(emoji)
	})
	return res
	}, {})
	},
	standardEmojiList(state) {
	return (
	SORTED_EMOJI_GROUP_IDS.map((groupId) =>
	(this.emoji[groupId] \|\| []).map((k) =>
	injectAnnotations(k, this.unicodeEmojiAnnotations),
	),
	).reduce((a, b) => a.concat(b), []) ?? []
	)
	},
	standardEmojiGroupList(state) {
	return (
	SORTED_EMOJI_GROUP_IDS.map((groupId) => ({
	id: groupId,
	emojis: (this.emoji[groupId] \|\| []).map((k) =>
	injectAnnotations(k, this.unicodeEmojiAnnotations),
	),
	})) ?? []
	)
	},
	},
	actions: {
	setStickers(stickers) {
	this.stickers = stickers
	},
	async getStaticEmoji() {
	try {
	// See build/emojis_plugin for more details
	const values = (await import('/src/assets/emoji.json')).default

	const emoji = Object.keys(values).reduce((res, groupId) => {
	res[groupId] = values[groupId].map((e) => ({
	displayText: e.slug,
	imageUrl: false,
	replacement: e.emoji,
	}))
	return res
	}, {})
	this.emoji = injectRegionalIndicators(emoji)
	} catch (e) {
	console.warn("Can't load static emoji\n", e)
	}
	},

	loadUnicodeEmojiData(language) {
	const langList = ensureFinalFallback(language)

	return Promise.all(
	langList.map(async (lang) => {
	if (!this.unicodeEmojiAnnotations[lang]) {
	try {
	const annotations = await loadAnnotations(lang)
	this.unicodeEmojiAnnotations[lang] = annotations
	} catch (e) {
	console.warn(
	`Error loading unicode emoji annotations for ${lang}: `,
	e,
	)
	// ignore
	}
	}
	}),
	)
	},

	async getAdminPacksLocal(refresh) {
	if (!refresh && this.adminPacksLocal) return this.adminPacksLocal
	this.adminPacksLocalLoading = true
	this.adminPacksLocal = await this.getAdminPacks(
	useInstanceStore().server,
	(params) =>
	listEmojiPacks({
	...params,
	credentials: useOAuthStore().token,
	- }),
	+ }).then(({ data }) => data),
	)
	this.adminPacksLocalLoading = false
	},

	async getAdminPacks(instance, listFunction) {
	const currentUser = window.vuex.state.users.currentUser

	if (!currentUser.rights.admin) return

	const pageSize = 25

	return await listFunction({
	instance,
	page: 1,
	pageSize: 0,
	})
	.then((data) => {
	- if (data.error !== undefined) {
	- return Promise.reject(data.error)
	- }
	-
	const promises = []

	for (let i = 0; i < Math.ceil(data.count / pageSize); i++) {
	promises.push(
	listFunction({
	instance,
	page: i,
	pageSize,
	}).then((pageData) => {
	- if (pageData.error !== undefined) {
	- return Promise.reject(pageData.error)
	- }
	-
	return pageData.packs
	}),
	)
	}

	return Promise.all(promises).then((results) => {
	return merge({}, ...results)
	})
	})
	.then((allPacks) => {
	// Sort by key
	return Object.keys(allPacks)
	.sort()
	.reduce((acc, key) => {
	if (key.length === 0) return acc
	acc[key] = allPacks[key]
	return acc
	}, {})
	})
	.catch((data) => {
	console.error(data)
	})
	},

	async getCustomEmoji() {
	try {
	let res = await window.fetch('/api/v1/pleroma/emoji')
	if (!res.ok) {
	res = await window.fetch('/api/pleroma/emoji.json')
	}
	if (res.ok) {
	const result = await res.json()
	const values = Array.isArray(result)
	? Object.assign({}, ...result)
	: result
	const caseInsensitiveStrCmp = (a, b) => {
	const la = a.toLowerCase()
	const lb = b.toLowerCase()
	return la > lb ? 1 : la < lb ? -1 : 0
	}
	const noPackLast = (a, b) => {
	const aNull = a === ''
	const bNull = b === ''
	if (aNull === bNull) {
	return 0
	} else if (aNull && !bNull) {
	return 1
	} else {
	return -1
	}
	}
	const byPackThenByName = (a, b) => {
	const packOf = (emoji) =>
	(emoji.tags.filter((k) => k.startsWith('pack:'))[0] \|\| '').slice(
	5,
	)
	const packOfA = packOf(a)
	const packOfB = packOf(b)
	return (
	noPackLast(packOfA, packOfB) \|\|
	caseInsensitiveStrCmp(packOfA, packOfB) \|\|
	caseInsensitiveStrCmp(a.displayText, b.displayText)
	)
	}

	const emoji = Object.entries(values)
	.map(([key, value]) => {
	const imageUrl = value.image_url
	return {
	displayText: key,
	imageUrl: imageUrl
	? useInstanceStore().server + imageUrl
	: value,
	tags: imageUrl
	? value.tags.sort((a, b) => (a > b ? 1 : 0))
	: ['utf'],
	replacement: `:${key}: `,
	}
	// Technically could use tags but those are kinda useless right now,
	// should have been "pack" field, that would be more useful
	})
	.sort(byPackThenByName)
	this.customEmoji = emoji
	} else {
	throw res
	}
	} catch (e) {
	console.warn("Can't load custom emojis\n", e)
	}
	},
	fetchEmoji() {
	if (!this.customEmojiFetched) {
	this.getCustomEmoji().then(() => (this.customEmojiFetched = true))
	}
	if (!this.emojiFetched) {
	this.getStaticEmoji().then(() => (this.emojiFetched = true))
	}
	},
	},
	})
	diff --git a/src/stores/instance.js b/src/stores/instance.js
	index 08bcde1aec..ea3419e804 100644
	--- a/src/stores/instance.js
	+++ b/src/stores/instance.js
	@@ -1,234 +1,235 @@
	import { get, set } from 'lodash'
	import { defineStore } from 'pinia'

	import {
	convertDefinitions,
	INSTANCE_DEFAULT_CONFIG,
	INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
	INSTANCE_IDENTITY_DEFAULT,
	INSTANCE_IDENTITY_DEFAULT_DEFINITIONS,
	LOCAL_DEFAULT_CONFIG,
	LOCAL_DEFAULT_CONFIG_DEFINITIONS,
	validateSetting,
	} from '../modules/default_config_state.js'

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

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

	const REMOTE_INTERACTION_URL = '/main/ostatus'

	const ROOT_STATE_DEFINITIONS = {
	name: {
	type: 'string',
	default: 'PleromaFE',
	},
	registrationOpen: {
	required: true,
	type: 'boolean',
	},
	server: {
	description: 'Server URL',
	required: true,
	type: 'string',
	},
	privateMode: {
	description: 'Private instance?',
	required: true,
	type: 'boolean',
	},
	federating: {
	description: 'Is federation enabled?',
	required: true,
	type: 'boolean',
	},
	federationPolicy: {
	description: '????',
	required: true,
	type: 'object',
	},

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

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

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

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

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

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

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

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

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

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

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

	set(this, path, finalValue)

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

	if (statusId) {
	return `${link}?status_id=${statusId}`
	} else {
	return `${link}?nickname=${nickname}`
	}
	},
	},
	})
	diff --git a/src/stores/lists.js b/src/stores/lists.js
	index 6bafbde7a0..7634f10619 100644
	--- a/src/stores/lists.js
	+++ b/src/stores/lists.js
	@@ -1,167 +1,169 @@
	import { find, remove } from 'lodash'
	import { defineStore } from 'pinia'

	import { useOAuthStore } from 'src/stores/oauth.js'

	import {
	addAccountsToList,
	createList,
	deleteList,
	fetchLists,
	getList,
	getListAccounts,
	removeAccountsFromList,
	updateList,
	} from 'src/api/user.js'
	import { promiseInterval } from 'src/services/promise_interval/promise_interval.js'

	export const useListsStore = defineStore('lists', {
	state: () => ({
	fetcher: null,
	allLists: [],
	allListsObject: {},
	}),
	getters: {
	findListTitle() {
	return (id) => {
	if (!this.allListsObject[id]) return
	return this.allListsObject[id].title
	}
	},
	findListAccounts() {
	return (id) => [...this.allListsObject[id].accountIds]
	},
	},
	actions: {
	startFetching() {
	promiseInterval(() => {
	this.fetcher = fetchLists({
	credentials: useOAuthStore().token,
	})
	.then(({ data: lists }) => this.setLists(lists))
	.catch((e) => {
	console.error(e)
	})
	}, 240000)
	},
	stopFetching() {
	this.fetcher?.stop()
	},
	setLists(value) {
	this.allLists = value
	},
	async createList({ title }) {
	return await createList({
	title,
	credentials: useOAuthStore().token,
	- }).then((list) => {
	+ }).then(({ data: list }) => {
	this.setList({ listId: list.id, title })
	return list
	})
	},
	async fetchList({ listId }) {
	return await getList({
	listId,
	credentials: useOAuthStore().token,
	- }).then((list) => this.setList({ listId: list.id, title: list.title }))
	+ }).then(({ data: list }) =>
	+ this.setList({ listId: list.id, title: list.title }),
	+ )
	},
	async fetchListAccounts({ listId }) {
	return await getListAccounts({
	listId,
	credentials: useOAuthStore().token,
	- }).then((accountIds) => {
	+ }).then(({ data: accountIds }) => {
	if (!this.allListsObject[listId]) {
	this.allListsObject[listId] = { accountIds: [] }
	}
	this.allListsObject[listId].accountIds = accountIds
	})
	},
	async setList({ listId, title }) {
	await updateList({
	listId,
	title,
	credentials: useOAuthStore().token,
	})

	if (!this.allListsObject[listId]) {
	this.allListsObject[listId] = { accountIds: [] }
	}
	this.allListsObject[listId].title = title

	const entry = find(this.allLists, { id: listId })
	if (!entry) {
	this.allLists.push({ id: listId, title })
	} else {
	entry.title = title
	}
	},
	async setListAccounts({ listId, accountIds }) {
	const saved = this.allListsObject[listId]?.accountIds \|\| []
	const added = accountIds.filter((id) => !saved.includes(id))
	const removed = saved.filter((id) => !accountIds.includes(id))
	if (!this.allListsObject[listId]) {
	this.allListsObject[listId] = { accountIds: [] }
	}
	this.allListsObject[listId].accountIds = accountIds
	const promises = []
	if (added.length > 0) {
	promises.push(
	addAccountsToList({
	listId,
	accountIds: added,
	credentials: useOAuthStore().token,
	}),
	)
	}
	if (removed.length > 0) {
	promises.push(
	removeAccountsFromList({
	listId,
	accountIds: removed,
	credentials: useOAuthStore().token,
	}),
	)
	}
	await Promise.all(promises)
	},
	async addListAccount({ listId, accountId }) {
	return await addAccountsToList({
	listId,
	accountIds: [accountId],
	credentials: useOAuthStore().token,
	}).then((result) => {
	if (!this.allListsObject[listId]) {
	this.allListsObject[listId] = { accountIds: [] }
	}
	this.allListsObject[listId].accountIds.push(accountId)
	return result
	})
	},
	async removeListAccount({ listId, accountId }) {
	return await removeAccountsFromList({
	listId,
	accountIds: [accountId],
	credentials: useOAuthStore().token,
	}).then((result) => {
	if (!this.allListsObject[listId]) {
	this.allListsObject[listId] = { accountIds: [] }
	}
	const { accountIds } = this.allListsObject[listId]
	const set = new Set(accountIds)
	set.delete(accountId)
	this.allListsObject[listId].accountIds = [...set]

	return result
	})
	},
	async deleteList({ listId }) {
	await deleteList({
	listId,
	credentials: useOAuthStore().token,
	})

	delete this.allListsObject[listId]
	remove(this.allLists, (list) => list.id === listId)
	},
	},
	})
	diff --git a/src/stores/oauth_tokens.js b/src/stores/oauth_tokens.js
	index afbbb5f46f..10aa371f95 100644
	--- a/src/stores/oauth_tokens.js
	+++ b/src/stores/oauth_tokens.js
	@@ -1,33 +1,33 @@
	import { defineStore } from 'pinia'

	import { useOAuthStore } from 'src/stores/oauth.js'

	import { fetchOAuthTokens, revokeOAuthToken } from 'src/api/user.js'

	export const useOAuthTokensStore = defineStore('oauthTokens', {
	state: () => ({
	tokens: [],
	}),
	actions: {
	fetchTokens() {
	fetchOAuthTokens({
	credentials: useOAuthStore().token,
	}).then(({ data: tokens }) => {
	this.swapTokens(tokens)
	})
	},
	revokeToken(id) {
	revokeOAuthToken({
	id,
	credentials: useOAuthStore().token,
	- }).then((response) => {
	- if (response.status === 201) {
	+ }).then(({ status }) => {
	+ if (status === 201) {
	this.swapTokens(this.tokens.filter((token) => token.id !== id))
	}
	})
	},
	swapTokens(tokens) {
	this.tokens = tokens
	},
	},
	})
	diff --git a/src/stores/polls.js b/src/stores/polls.js
	index 1a1e8e3320..e2f4b0ab25 100644
	--- a/src/stores/polls.js
	+++ b/src/stores/polls.js
	@@ -1,69 +1,69 @@
	import { merge } from 'lodash'
	import { defineStore } from 'pinia'

	import { useOAuthStore } from 'src/stores/oauth.js'

	import { fetchPoll } from 'src/api/public.js'
	import { vote } from 'src/api/user.js'

	export const usePollsStore = defineStore('polls', {
	state: () => ({
	// Contains key = id, value = number of trackers for this poll
	trackedPolls: {},
	pollsObject: {},
	}),
	actions: {
	mergeOrAddPoll(poll) {
	const existingPoll = this.pollsObject[poll.id]
	// Make expired-state change trigger re-renders properly
	poll.expired = Date.now() > Date.parse(poll.expires_at)
	if (existingPoll) {
	this.pollsObject[poll.id] = merge(existingPoll, poll)
	} else {
	this.pollsObject[poll.id] = poll
	}
	},
	updateTrackedPoll(pollId) {
	fetchPoll({
	pollId,
	credentials: useOAuthStore().token,
	- }).then((poll) => {
	+ }).then(({ data: poll }) => {
	setTimeout(() => {
	if (this.trackedPolls[pollId]) {
	this.updateTrackedPoll(pollId)
	}
	}, 30 * 1000)
	this.mergeOrAddPoll(poll)
	})
	},
	trackPoll(pollId) {
	if (!this.trackedPolls[pollId]) {
	setTimeout(() => this.updateTrackedPoll(pollId), 30 * 1000)
	}
	const currentValue = this.trackedPolls[pollId]
	if (currentValue) {
	this.trackedPolls[pollId] = currentValue + 1
	} else {
	this.trackedPolls[pollId] = 1
	}
	},
	untrackPoll(pollId) {
	const currentValue = this.trackedPolls[pollId]
	if (currentValue) {
	this.trackedPolls[pollId] = currentValue - 1
	} else {
	this.trackedPolls[pollId] = 0
	}
	},
	votePoll({ pollId, choices }) {
	return vote({
	pollId,
	choices,
	credentials: useOAuthStore().token,
	}).then(({ data: poll }) => {
	this.mergeOrAddPoll(poll)
	return poll
	})
	},
	},
	})
	diff --git a/src/stores/user_highlight.js b/src/stores/user_highlight.js
	index ca334f5799..b056ca8086 100644
	--- a/src/stores/user_highlight.js
	+++ b/src/stores/user_highlight.js
	@@ -1,364 +1,364 @@
	import {
	merge as _merge,
	clamp,
	clone,
	cloneDeep,
	findLastIndex,
	flatten,
	get,
	groupBy,
	isEqual,
	takeRight,
	uniqWith,
	} from 'lodash'
	import { defineStore } from 'pinia'
	import { toRaw } from 'vue'

	import { useOAuthStore } from 'src/stores/oauth.js'

	import { updateProfileJSON } from 'src/api/user.js'
	import { storage } from 'src/lib/storage.js'

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

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

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

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

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

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

	// Simple
	Object.entries(defaultState.highlight).forEach(([k, v]) => {
	if (typeof v === 'undefined') return
	if (typeof v === 'object') return
	console.warn(`User highlight ${k} is invalid type ${typeof v}, unsetting`)
	delete state.highlight[k]
	})
	}

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

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

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

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

	return result
	}

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

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

	export const _mergeHighlights = (recent, stale) => {
	if (!stale) return recent
	if (!recent) return stale
	const { _journal: recentJournal, ...recentHighlight } = recent
	const { _journal: staleJournal } = stale
	/** Journal entry format:
	* user: user to entry in highlight storage
	* timestamp: timestamp of the change
	* operation: operation type
	* arguments: array of arguments, depends on operation type
	*
	* currently only supported operation type is "set" which just sets the value
	* to requested one. Intended only to be used with simple preferences (boolean, number)
	*/
	const resultHighlight = { ...recentHighlight }
	const Journal = _mergeJournal(staleJournal, recentJournal)
	Journal.forEach(({ user, operation, args }) => {
	if (user.startsWith('_')) {
	throw new Error(
	`journal contains entry to edit internal (starts with _) field '${user}', something is incorrect here, ignoring.`,
	)
	}
	switch (operation) {
	case 'set':
	resultHighlight[user] = args[0]
	break
	case 'unset':
	delete resultHighlight[user]
	break
	default:
	return console.error(`Unknown journal operation: '${operation}'`)
	}
	})
	return { ...resultHighlight, _journal: Journal }
	}

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

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

	const userNew = userData.created_at > NEW_USER_DATE
	let dirty = false

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

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

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

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

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

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

	this.dirty = dirty \|\| needUpload
	this.cache = recent
	// set local timestamp to smaller one if we don't have any changes
	if (stale && recent && !this.dirty) {
	this.cache._timestamp = Math.min(stale._timestamp, recent._timestamp)
	}
	this.highlight = this.cache.highlight
	},
	pushHighlight({ force = false } = {}) {
	const needPush = this.dirty \|\| force
	if (!needPush) return
	this.updateCache({ username: window.vuex.state.users.currentUser.fqn })
	const params = {
	pleroma_settings_store: { user_highlight: this.cache },
	}
	updateProfileJSON({
	params,
	credentials: useOAuthStore().token,
	- }).then((user) => {
	+ }).then(({ data: user }) => {
	this.initUserHighlight(user)
	this.dirty = false
	})
	},
	},
	persist: {
	afterLoad(state) {
	return state
	},
	},
	})

File Metadata

Mime Type: text/x-diff
Expires: Thu, Oct 29, 5:41 PM (1 d, 11 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1798430
Default Alt Text: (138 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions