No OneTemporary
Actions

Size

587 KB

Referenced Files

None

Subscribers

None

View Options

This file is larger than 256 KB, so syntax highlighting was skipped.

	diff --git a/src/App.js b/src/App.js
	index d7a63bd8ae..2854f7dfc5 100644
	--- a/src/App.js
	+++ b/src/App.js
	@@ -1,313 +1,312 @@
	import { throttle } from 'lodash'
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

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

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

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

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

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

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

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

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

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

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

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

	// remove old theme reference if there are any
	if (oldTheme.length) {
	document.body.classList.replace(oldTheme[0], newTheme)
	} else {
	document.body.classList.add(newTheme)
	}
	} else {
	// remove theme reference if non-V3 theme is used
	document.body.classList.remove(...oldTheme)
	}
	},
	removeSplash() {
	document.querySelector('#status').textContent = this.$t(
	'splash.fun_' + Math.ceil(Math.random() * 4),
	)
	const splashscreenRoot = document.querySelector('#splash')
	splashscreenRoot.addEventListener('transitionend', () => {
	splashscreenRoot.remove()
	})
	setTimeout(() => {
	splashscreenRoot.remove() // forcibly remove it, should fix my plasma browser widget t. HJ
	}, 600)
	splashscreenRoot.classList.add('hidden')
	document.querySelector('#app').classList.remove('hidden')
	},
	},
	}
	diff --git a/src/App.vue b/src/App.vue
	index 84a6f7d3d8..bd19c5c10f 100644
	--- a/src/App.vue
	+++ b/src/App.vue
	@@ -1,82 +1,82 @@
	<template>
	<div
	v-show="themeApplied"
	id="app-loaded"
	:style="bgStyle"
	>
	<div
	id="app_bg_wrapper"
	class="app-bg-wrapper"
	/>
	<MobileNav v-if="layoutType === 'mobile'" />
	<DesktopNav
	v-else
	:class="navClasses"
	/>
	<Notifications v-if="currentUser" />
	<div
	id="content"
	ref="appContentRef"
	class="app-layout container"
	:class="classes"
	>
	<div class="underlay" />
	<div
	id="sidebar"
	class="column -scrollable"
	:class="{ '-show-scrollbar': showScrollbars }"
	>
	- <user-panel />
	+ <UserPanel />
	<template v-if="layoutType !== 'mobile'">
	<NavPanel />
	<InstanceSpecificPanel v-if="showInstanceSpecificPanel" />
	<FeaturesPanel v-if="!currentUser && showFeaturesPanel" />
	<WhoToFollowPanel v-if="currentUser && suggestionsEnabled" />
	<div id="notifs-sidebar" />
	</template>
	</div>
	<main
	id="main-scroller"
	class="column main"
	:class="{ '-full-height': isChats \|\| isListEdit }"
	>
	<div
	v-if="!currentUser"
	class="login-hint panel panel-default"
	>
	<router-link
	:to="{ name: 'login' }"
	class="panel-body"
	>
	{{ $t("login.hint") }}
	</router-link>
	</div>
	<router-view />
	</main>
	<div
	id="notifs-column"
	class="column -scrollable"
	:class="{ '-show-scrollbar': showScrollbars }"
	/>
	</div>
	<MediaModal />
	<ShoutPanel
	v-if="currentUser && !hideShoutbox && shoutJoined"
	:floating="true"
	class="floating-shout mobile-hidden"
	:class="{ '-left': shoutboxPosition }"
	/>
	<MobilePostStatusButton />
	<UserReportingModal />
	<PostStatusModal />
	<EditStatusModal v-if="editingAvailable" />
	<StatusHistoryModal v-if="editingAvailable" />
	<SettingsModal :class="layoutModalClass" />
	<UpdateNotification />
	<GlobalError />
	<GlobalNoticeList />
	</div>
	</template>

	<script src="./App.js"></script>
	<style lang="scss" src="./App.scss"></style>
	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index 986586a80d..bece8e000e 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,620 +1,621 @@
	/* global process */

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

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

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

	config.autoAddCss = false

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

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

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

	let staticInitialResults = null

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

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

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

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

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

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

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

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

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

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

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

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

	useAuthFlowStore().setInitialStrategy(config.loginMethod)
	}

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

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

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

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

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

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

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

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

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

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

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

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

	const federation = metadata.federation

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	FaviconService.initFaviconService()
	initServiceWorker(store)

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

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

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

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

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

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

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

	useI18nStore().setI18n(i18n)

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

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

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

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

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

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

	export default afterStoreSetup
	diff --git a/src/boot/routes.js b/src/boot/routes.js
	index 5897fad921..6956d01408 100644
	--- a/src/boot/routes.js
	+++ b/src/boot/routes.js
	@@ -1,271 +1,272 @@
	import AuthForm from 'src/components/auth_form/auth_form.js'
	import BookmarkTimeline from 'src/components/bookmark_timeline/bookmark_timeline.vue'
	import BubbleTimeline from 'src/components/bubble_timeline/bubble_timeline.vue'
	import ConversationPage from 'src/components/conversation-page/conversation-page.vue'
	import DMs from 'src/components/dm_timeline/dm_timeline.vue'
	import FriendsTimeline from 'src/components/friends_timeline/friends_timeline.vue'
	import NavPanel from 'src/components/nav_panel/nav_panel.vue'
	import PublicAndExternalTimeline from 'src/components/public_and_external_timeline/public_and_external_timeline.vue'
	import PublicTimeline from 'src/components/public_timeline/public_timeline.vue'
	import QuotesTimeline from 'src/components/quotes_timeline/quotes_timeline.vue'
	import RemoteUserResolver from 'src/components/remote_user_resolver/remote_user_resolver.vue'
	import TagTimeline from 'src/components/tag_timeline/tag_timeline.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	+import { useUsersStore } from 'src/stores/users.js'

	export default (store) => {
	const validateAuthenticatedRoute = (to, from, next) => {
	- if (store.state.users.currentUser) {
	+ if (useUsersStore().currentUser) {
	next()
	} else {
	next(
	useInstanceStore().instanceIdentity.redirectRootNoLogin \|\| '/main/all',
	)
	}
	}

	let routes = [
	{
	name: 'root',
	path: '/',
	redirect: () => {
	return (
	- (store.state.users.currentUser
	+ (useUsersStore().currentUser
	? useInstanceStore().instanceIdentity.redirectRootLogin
	: useInstanceStore().instanceIdentity.redirectRootNoLogin) \|\|
	'/main/all'
	)
	},
	},
	{
	name: 'public-external-timeline',
	path: '/main/all',
	component: PublicAndExternalTimeline,
	},
	{
	name: 'public-timeline',
	path: '/main/public',
	component: PublicTimeline,
	},
	{
	name: 'friends',
	path: '/main/friends',
	component: FriendsTimeline,
	beforeEnter: validateAuthenticatedRoute,
	},
	{ name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
	{ name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
	{ name: 'bubble', path: '/bubble', component: BubbleTimeline },
	{
	name: 'conversation',
	path: '/notice/:id',
	component: ConversationPage,
	meta: { dontScroll: true },
	},
	{
	name: 'conversation2',
	path: '/conversation/:statusId',
	component: () => import('src/components/chat_view/chat_view.vue'),
	props: true,
	meta: { dontScroll: true },
	beforeEnter: validateAuthenticatedRoute,
	},
	{ name: 'quotes', path: '/notice/:id/quotes', component: QuotesTimeline },
	{
	name: 'remote-user-profile-acct',
	path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
	component: RemoteUserResolver,
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'remote-user-profile',
	path: '/remote-users/:hostname/:username',
	component: RemoteUserResolver,
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'external-user-profile',
	path: '/users/$:id',
	component: () => import('src/components/user_profile/user_profile.vue'),
	},
	{
	name: 'user-profile-admin-view',
	path: '/users/$:id/admin_view',
	component: () =>
	import('src/components/user_profile/user_profile_admin_view.vue'),
	},
	{
	name: 'interactions',
	path: '/users/:username/interactions',
	component: () => import('src/components/interactions/interactions.vue'),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'dms',
	path: '/users/:username/dms',
	component: DMs,
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'registration',
	path: '/registration',
	component: () => import('src/components/registration/registration.vue'),
	},
	{
	name: 'password-reset',
	path: '/password-reset',
	component: () =>
	import('src/components/password_reset/password_reset.vue'),
	props: true,
	},
	{
	name: 'registration-token',
	path: '/registration/:token',
	component: () => import('src/components/registration/registration.vue'),
	},
	{
	name: 'friend-requests',
	path: '/friend-requests',
	component: () =>
	import('src/components/follow_requests/follow_requests.vue'),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'notifications',
	path: '/:username/notifications',
	component: () => import('src/components/notifications/notifications.vue'),
	props: () => ({ disableTeleport: true }),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'login',
	path: '/login',
	component: AuthForm,
	},
	{
	name: 'shout-panel',
	path: '/shout-panel',
	component: () => import('src/components/shout_panel/shout_panel.vue'),
	props: () => ({ floating: false }),
	},
	{
	name: 'oauth-callback',
	path: '/oauth-callback',
	component: () =>
	import('src/components/oauth_callback/oauth_callback.vue'),
	props: (route) => ({ code: route.query.code }),
	},
	{
	name: 'search',
	path: '/search',
	component: () => import('src/components/search/search.vue'),
	props: (route) => ({ query: route.query.query }),
	},
	{
	name: 'who-to-follow',
	path: '/who-to-follow',
	component: () => import('src/components/who_to_follow/who_to_follow.vue'),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'about',
	path: '/about',
	component: () => import('src/components/about/about.vue'),
	},
	{
	name: 'announcements',
	path: '/announcements',
	component: () =>
	import('src/components/announcements_page/announcements_page.vue'),
	},
	{
	name: 'drafts',
	path: '/drafts',
	component: () => import('src/components/drafts/drafts.vue'),
	},
	{
	name: 'user-profile',
	path: '/users/:name',
	component: () => import('src/components/user_profile/user_profile.vue'),
	},
	{
	name: 'legacy-user-profile',
	path: '/:name',
	component: () => import('src/components/user_profile/user_profile.vue'),
	},
	{
	name: 'lists',
	path: '/lists',
	component: () => import('src/components/lists/lists.vue'),
	},
	{
	name: 'lists-timeline',
	path: '/lists/:id',
	component: () =>
	import('src/components/lists_timeline/lists_timeline.vue'),
	},
	{
	name: 'lists-edit',
	path: '/lists/:id/edit',
	component: () => import('src/components/lists_edit/lists_edit.vue'),
	},
	{
	name: 'lists-new',
	path: '/lists/new',
	component: () => import('src/components/lists_edit/lists_edit.vue'),
	},
	{
	name: 'edit-navigation',
	path: '/nav-edit',
	component: NavPanel,
	props: () => ({ forceExpand: true, forceEditMode: true }),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'bookmark-folders',
	path: '/bookmark_folders',
	component: () =>
	import('src/components/bookmark_folders/bookmark_folders.vue'),
	},
	{
	name: 'bookmark-folder-new',
	path: '/bookmarks/new-folder',
	component: () =>
	import('src/components/bookmark_folder_edit/bookmark_folder_edit.vue'),
	},
	{
	name: 'bookmark-folder',
	path: '/bookmarks/:id',
	component: BookmarkTimeline,
	},
	{
	name: 'bookmark-folder-edit',
	path: '/bookmarks/:id/edit',
	component: () =>
	import('src/components/bookmark_folder_edit/bookmark_folder_edit.vue'),
	},
	]

	if (useInstanceCapabilitiesStore().pleromaChatMessagesAvailable) {
	routes = routes.concat([
	{
	name: 'chat',
	path: '/users/:username/chats/:chatUserId',
	component: () => import('src/components/chat_view/chat_view.vue'),
	meta: { dontScroll: false },
	props: true,
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'chats',
	path: '/users/:username/chats',
	component: () => import('src/components/chat_list/chat_list.vue'),
	meta: { dontScroll: false },
	beforeEnter: validateAuthenticatedRoute,
	},
	])
	}

	return routes
	}
	diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
	index 9b4775b976..ab87d8b8a0 100644
	--- a/src/components/account_actions/account_actions.js
	+++ b/src/components/account_actions/account_actions.js
	@@ -1,111 +1,112 @@
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import Popover from 'src/components/popover/popover.vue'
	import ProgressButton from 'src/components/progress_button/progress_button.vue'
	import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'

	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useReportsStore } from 'src/stores/reports'
	+import { useUsersStore } from 'src/stores/users.js'

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

	library.add(faEllipsisV)

	const AccountActions = {
	props: ['user', 'relationship'],
	data() {
	return {
	showingConfirmBlock: false,
	showingConfirmRemoveFollower: false,
	}
	},
	components: {
	ProgressButton,
	Popover,
	UserListMenu,
	ConfirmModal: defineAsyncComponent(
	() => import('src/components/confirm_modal/confirm_modal.vue'),
	),
	UserTimedFilterModal: defineAsyncComponent(
	() =>
	import(
	'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
	),
	),
	},
	methods: {
	showConfirmRemoveUserFromFollowers() {
	this.showingConfirmRemoveFollower = true
	},
	hideConfirmRemoveUserFromFollowers() {
	this.showingConfirmRemoveFollower = false
	},
	hideConfirmBlock() {
	this.showingConfirmBlock = false
	},
	showRepeats() {
	this.$store.dispatch('showReblogs', this.user.id)
	},
	hideRepeats() {
	this.$store.dispatch('hideReblogs', this.user.id)
	},
	blockUser() {
	if (this.$refs.timedBlockDialog) {
	this.$refs.timedBlockDialog.optionallyPrompt()
	} else {
	if (!this.shouldConfirmBlock) {
	this.doBlockUser()
	} else {
	this.showingConfirmBlock = true
	}
	}
	},
	doBlockUser() {
	this.$store.dispatch('blockUser', { id: this.user.id })
	this.hideConfirmBlock()
	},
	unblockUser() {
	this.$store.dispatch('unblockUser', this.user.id)
	},
	removeUserFromFollowers() {
	if (!this.shouldConfirmRemoveUserFromFollowers) {
	this.doRemoveUserFromFollowers()
	} else {
	this.showConfirmRemoveUserFromFollowers()
	}
	},
	doRemoveUserFromFollowers() {
	this.$store.dispatch('removeUserFromFollowers', this.user.id)
	this.hideConfirmRemoveUserFromFollowers()
	},
	reportUser() {
	useReportsStore().openUserReportingModal({ userId: this.user.id })
	},
	openChat() {
	this.$router.push({
	name: 'chat',
	params: {
	- username: this.$store.state.users.currentUser.screen_name,
	+ username: useUsersStore().currentUser.screen_name,
	recipient_id: this.user.id,
	},
	})
	},
	},
	computed: {
	shouldConfirmBlock() {
	return useMergedConfigStore().mergedConfig.modalOnBlock
	},
	shouldConfirmRemoveUserFromFollowers() {
	return useMergedConfigStore().mergedConfig.modalOnRemoveUserFromFollowers
	},
	...mapState(useInstanceCapabilitiesStore, [
	'blockExpiration',
	'pleromaChatMessagesAvailable',
	]),
	},
	}

	export default AccountActions
	diff --git a/src/components/announcement/announcement.js b/src/components/announcement/announcement.js
	index 6b45b2b909..e7d3d62cfa 100644
	--- a/src/components/announcement/announcement.js
	+++ b/src/components/announcement/announcement.js
	@@ -1,125 +1,124 @@
	-import { mapState } from 'vuex'
	+import { mapState } from 'pinia'

	import AnnouncementEditor from 'src/components/announcement_editor/announcement_editor.vue'
	import localeService from '../../services/locale/locale.service.js'

	import { useAnnouncementsStore } from 'src/stores/announcements.js'
	+import { useUsersStore } from 'src/stores/users.js'

	const Announcement = {
	components: {
	AnnouncementEditor,
	},
	data() {
	return {
	editing: false,
	editedAnnouncement: {
	content: '',
	startsAt: undefined,
	endsAt: undefined,
	allDay: undefined,
	},
	editError: '',
	}
	},
	props: {
	announcement: Object,
	},
	computed: {
	- ...mapState({
	- currentUser: (state) => state.users.currentUser,
	- }),
	+ ...mapState(useUsersStore, ['currentUser']),
	canEditAnnouncement() {
	return this.currentUser?.privileges.has(
	'announcements_manage_announcements',
	)
	},
	content() {
	return this.announcement.content
	},
	isRead() {
	return this.announcement.read
	},
	publishedAt() {
	const time = this.announcement.published_at
	if (!time) {
	return
	}

	return this.formatTimeOrDate(
	time,
	localeService.internalToBrowserLocale(this.$i18n.locale),
	)
	},
	startsAt() {
	const time = this.announcement.starts_at
	if (!time) {
	return
	}

	return this.formatTimeOrDate(
	time,
	localeService.internalToBrowserLocale(this.$i18n.locale),
	)
	},
	endsAt() {
	const time = this.announcement.ends_at
	if (!time) {
	return
	}

	return this.formatTimeOrDate(
	time,
	localeService.internalToBrowserLocale(this.$i18n.locale),
	)
	},
	inactive() {
	return this.announcement.inactive
	},
	},
	methods: {
	markAsRead() {
	if (!this.isRead) {
	return useAnnouncementsStore().markAnnouncementAsRead(
	this.announcement.id,
	)
	}
	},
	deleteAnnouncement() {
	return useAnnouncementsStore().deleteAnnouncement(this.announcement.id)
	},
	formatTimeOrDate(time, locale) {
	const d = new Date(time)
	return this.announcement.all_day
	? d.toLocaleDateString(locale)
	: d.toLocaleString(locale)
	},
	enterEditMode() {
	this.editedAnnouncement.content = this.announcement.pleroma.raw_content
	this.editedAnnouncement.startsAt = this.announcement.starts_at
	this.editedAnnouncement.endsAt = this.announcement.ends_at
	this.editedAnnouncement.allDay = this.announcement.all_day
	this.editing = true
	},
	submitEdit() {
	useAnnouncementsStore()
	.editAnnouncement({
	id: this.announcement.id,
	...this.editedAnnouncement,
	})
	.then(() => {
	this.editing = false
	})
	.catch((error) => {
	this.editError = error.error
	})
	},
	cancelEdit() {
	this.editing = false
	},
	clearError() {
	this.editError = undefined
	},
	},
	}

	export default Announcement
	diff --git a/src/components/announcements_page/announcements_page.js b/src/components/announcements_page/announcements_page.js
	index 802e90cf68..1d4966df3b 100644
	--- a/src/components/announcements_page/announcements_page.js
	+++ b/src/components/announcements_page/announcements_page.js
	@@ -1,64 +1,63 @@
	-import { mapState } from 'vuex'
	+import { mapState } from 'pinia'

	import Announcement from 'src/components/announcement/announcement.vue'
	import AnnouncementEditor from 'src/components/announcement_editor/announcement_editor.vue'

	import { useAnnouncementsStore } from 'src/stores/announcements.js'
	+import { useUsersStore } from 'src/stores/users.js'

	const AnnouncementsPage = {
	components: {
	Announcement,
	AnnouncementEditor,
	},
	data() {
	return {
	newAnnouncement: {
	content: '',
	startsAt: undefined,
	endsAt: undefined,
	allDay: false,
	},
	posting: false,
	error: undefined,
	}
	},
	mounted() {
	useAnnouncementsStore().fetchAnnouncements()
	},
	computed: {
	- ...mapState({
	- currentUser: (state) => state.users.currentUser,
	- }),
	+ ...mapState(useUsersStore, ['currentUser']),
	announcements() {
	return useAnnouncementsStore().announcements
	},
	canPostAnnouncement() {
	return this.currentUser?.privileges.has(
	'announcements_manage_announcements',
	)
	},
	},
	methods: {
	postAnnouncement() {
	this.posting = true
	useAnnouncementsStore()
	.postAnnouncement(this.newAnnouncement)
	.then(() => {
	this.newAnnouncement.content = ''
	this.startsAt = undefined
	this.endsAt = undefined
	})
	.catch((error) => {
	this.error = error.error
	})
	.finally(() => {
	this.posting = false
	})
	},
	clearError() {
	this.error = undefined
	},
	},
	}

	export default AnnouncementsPage
	diff --git a/src/components/block_card/block_card.js b/src/components/block_card/block_card.js
	index 6484accffd..11120574b4 100644
	--- a/src/components/block_card/block_card.js
	+++ b/src/components/block_card/block_card.js
	@@ -1,50 +1,51 @@
	import { mapState } from 'pinia'

	import BasicUserCard from 'src/components/basic_user_card/basic_user_card.vue'
	import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'

	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	+import { useUsersStore } from 'src/stores/users.js'

	const BlockCard = {
	props: ['userId'],
	computed: {
	user() {
	- return this.$store.getters.findUser(this.userId)
	+ return useUsersStore().findUser(this.userId)
	},
	relationship() {
	- return this.$store.getters.relationship(this.userId)
	+ return useUsersStore().relationship(this.userId)
	},
	blocked() {
	return this.relationship.blocking
	},
	blockExpiryAvailable() {
	return Object.hasOwn(this.user, 'block_expires_at')
	},
	blockExpiry() {
	return this.user.block_expires_at === false
	? this.$t('user_card.block_expires_forever')
	: this.$t('user_card.block_expires_at', [
	new Date(this.user.mute_expires_at).toLocaleString(),
	])
	},
	...mapState(useInstanceCapabilitiesStore, ['blockExpiration']),
	},
	components: {
	BasicUserCard,
	UserTimedFilterModal,
	},
	methods: {
	unblockUser() {
	this.$store.dispatch('unblockUser', this.user.id)
	},
	blockUser() {
	if (this.blockExpiration) {
	this.$refs.timedBlockDialog.optionallyPrompt()
	} else {
	this.$store.dispatch('blockUser', { id: this.user.id })
	}
	},
	},
	}

	export default BlockCard
	diff --git a/src/components/chat_list/chat_list.js b/src/components/chat_list/chat_list.js
	index 446ccb70a5..0b0c241e8f 100644
	--- a/src/components/chat_list/chat_list.js
	+++ b/src/components/chat_list/chat_list.js
	@@ -1,41 +1,39 @@
	-import { mapState as mapPiniaState } from 'pinia'
	-import { mapState } from 'vuex'
	+import { mapState } from 'pinia'

	import ChatListItem from 'src/components/chat_list_item/chat_list_item.vue'
	import ChatNew from 'src/components/chat_new/chat_new.vue'
	import List from 'src/components/list/list.vue'

	import { useChatsStore } from 'src/stores/chats.js'
	+import { useUsersStore } from 'src/stores/users.js'

	const ChatList = {
	components: {
	ChatListItem,
	List,
	ChatNew,
	},
	computed: {
	- ...mapState({
	- currentUser: (state) => state.users.currentUser,
	- }),
	- ...mapPiniaState(useChatsStore, ['sortedChatList']),
	+ ...mapState(useUsersStore, ['currentUser']),
	+ ...mapState(useChatsStore, ['sortedChatList']),
	},
	data() {
	return {
	isNew: false,
	}
	},
	created() {
	useChatsStore().fetchChats()
	},
	methods: {
	cancelNewChat() {
	this.isNew = false
	useChatsStore().fetchChats()
	},
	newChat() {
	this.isNew = true
	},
	},
	}

	export default ChatList
	diff --git a/src/components/chat_list_item/chat_list_item.js b/src/components/chat_list_item/chat_list_item.js
	index 8bb2afd93f..09d5290a91 100644
	--- a/src/components/chat_list_item/chat_list_item.js
	+++ b/src/components/chat_list_item/chat_list_item.js
	@@ -1,71 +1,71 @@
	-import { mapState } from 'vuex'
	+import { mapState } from 'pinia'

	import AvatarList from 'src/components/avatar_list/avatar_list.vue'
	import ChatTitle from 'src/components/chat_title/chat_title.vue'
	import StatusBody from 'src/components/status_content/status_content.vue'
	import Timeago from 'src/components/timeago/timeago.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'

	+import { useUsersStore } from 'src/stores/users.js'
	+
	const ChatListItem = {
	name: 'ChatListItem',
	props: ['chat'],
	components: {
	UserAvatar,
	AvatarList,
	Timeago,
	ChatTitle,
	StatusBody,
	},
	computed: {
	- ...mapState({
	- currentUser: (state) => state.users.currentUser,
	- }),
	+ ...mapState(useUsersStore, ['currentUser']),
	attachmentInfo() {
	if (this.chat.lastMessage.attachments.length === 0) {
	return
	}

	const types = this.chat.lastMessage.attachments.map((file) => file.type)
	if (types.includes('video')) {
	return this.$t('file_type.video')
	} else if (types.includes('audio')) {
	return this.$t('file_type.audio')
	} else if (types.includes('image')) {
	return this.$t('file_type.image')
	} else {
	return this.$t('file_type.file')
	}
	},
	messageForStatusContent() {
	const message = this.chat.lastMessage
	const messageEmojis = message ? message.emojis : []
	const isYou = message?.account_id === this.currentUser.id
	const content = message ? this.attachmentInfo \|\| message.content : ''
	const messagePreview = isYou
	? `<i>${this.$t('chats.you')}</i> ${content}`
	: content
	return {
	summary: '',
	emojis: messageEmojis,
	raw_html: messagePreview,
	text: messagePreview,
	attachments: [],
	}
	},
	},
	methods: {
	openChat() {
	if (this.chat.id) {
	this.$router.push({
	name: 'chat',
	params: {
	username: this.currentUser.screen_name,
	chatUserId: this.chat.account.id,
	},
	})
	}
	},
	},
	}

	export default ChatListItem
	diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
	index aabdec31fe..0428b404e5 100644
	--- a/src/components/chat_message/chat_message.js
	+++ b/src/components/chat_message/chat_message.js
	@@ -1,223 +1,217 @@
	-import { mapState as mapPiniaState } from 'pinia'
	+import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'
	-import { mapState } from 'vuex'

	import Attachment from 'src/components/attachment/attachment.vue'
	import ChatMessageDate from 'src/components/chat_message_date/chat_message_date.vue'
	import EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue'
	import Gallery from 'src/components/gallery/gallery.vue'
	import LinkPreview from 'src/components/link-preview/link-preview.vue'
	import MentionLink from 'src/components/mention_link/mention_link.vue'
	import Popover from 'src/components/popover/popover.vue'
	import StatusActionButtons from 'src/components/status_action_buttons/status_action_buttons.vue'
	import StatusBody from 'src/components/status_body/status_body.vue'
	import StatusContent from 'src/components/status_content/status_content.vue'
	import StatusPopover from 'src/components/status_popover/status_popover.vue'
	import Timeago from 'src/components/timeago/timeago.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserPopover from 'src/components/user_popover/user_popover.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInterfaceStore } from 'src/stores/interface'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faCircleNotch,
	faEllipsisH,
	faReply,
	faRetweet,
	faStar,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faTimes, faEllipsisH, faCircleNotch, faReply, faStar, faRetweet)

	const ChatMessage = {
	name: 'ChatMessage',
	props: [
	'edited',
	'noHeading',
	'previousItem',
	'chatItem',
	'previousItem',
	'hoveredMessageChain',
	'focused',
	'repliedTo',
	],
	emits: ['hover', 'replyRequested'],
	components: {
	Popover,
	Attachment,
	StatusContent,
	StatusBody,
	StatusActionButtons,
	UserAvatar,
	Gallery,
	LinkPreview,
	ChatMessageDate,
	EmojiReactions,
	UserPopover,
	StatusPopover,
	MentionLink,
	Quote: defineAsyncComponent(() => import('src/components/quote/quote.vue')),
	Timeago,
	},
	computed: {
	isMessage() {
	return this.chatItem.type === 'message'
	},
	message() {
	if (!this.isMessage) return null
	return this.chatItem.data.retweeted_status ?? this.chatItem.data
	},
	isStatus() {
	// ChatMessage only has account_id while Status has full user data
	return !!this.message.user
	},
	authorId() {
	return this.isStatus ? this.message.user.id : this.message.account_id
	},
	author() {
	- return this.$store.getters.findUser(this.authorId)
	+ return useUsersStore().findUser(this.authorId)
	},
	isCurrentUser() {
	// mini-hack/optimizaiton:
	// - current user would always be in memory so if user is missing it's obviously not us
	// - if anon views page then "us" pretty much doesn't exist
	if (!this.author \|\| !this.currentUser) return false
	return this.author.id === this.currentUser.id
	},

	// Reply stuff
	isCustomReply() {
	if (!this.previousItem) return false
	if (!this.message.in_reply_to_status_id) return false
	return this.previousItem.data.id !== this.message.in_reply_to_status_id
	},
	isBrokenReply() {
	if (!this.previousItem) return false
	return !this.message.in_reply_to_status_id
	},
	customReplyTo() {
	return this.$store.state.statuses.allStatusesObject[
	this.message.in_reply_to_status_id
	]
	},
	replyToName() {
	if (this.message.in_reply_to_screen_name) {
	return this.message.in_reply_to_screen_name
	} else {
	- const user = this.$store.getters.findUser(
	- this.message.in_reply_to_user_id,
	- )
	+ const user = useUsersStore().findUser(this.message.in_reply_to_user_id)
	return user?.screen_name_ui
	}
	},
	replyProfileLink() {
	if (this.isCustomReply) {
	- const user = this.$store.getters.findUser(
	- this.message.in_reply_to_user_id,
	- )
	+ const user = useUsersStore().findUser(this.message.in_reply_to_user_id)
	// FIXME Why user not found sometimes???
	return user ? user.statusnet_profile_url : 'NOT_FOUND'
	}
	},

	// Quote stuff
	quoteId() {
	return this.message.quote_id
	},
	quoteUrl() {
	return this.message.quote_url
	},
	quoteVisible() {
	return this.message.quote_visible
	},

	// Content
	messageForStatusContent() {
	return {
	...this.message,
	summary: '',
	emojis: this.message.emojis,
	raw_html: this.message.content \|\| this.message.raw_html \|\| '',
	text: this.message.content \|\| '',
	}
	},
	hasAttachment() {
	return this.message.attachments.length > 0
	},

	// Stylistic
	classnames() {
	return {
	'-outgoing': this.isCurrentUser,
	'-incoming': !this.isCurrentUser,
	'-pending': this.message.pending,
	'-focused': this.focused,
	}
	},
	popoverMarginStyle() {
	if (this.isCurrentUser) {
	return {}
	} else {
	return { left: 50 }
	}
	},

	// Global stuff
	- ...mapPiniaState(useInterfaceStore, {
	+ ...mapState(useInterfaceStore, {
	betterShadow: (store) => store.browserSupport.cssFilter,
	}),
	- ...mapState({
	- currentUser: (state) => state.users.currentUser,
	- restrictedNicknames: (state) => useInstanceStore().restrictedNicknames,
	- }),
	- ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	+ ...mapState(useUsersStore, ['currentUser']),
	+ ...mapState(useInstanceStore, ['restrictedNicknames']),
	+ ...mapState(useMergedConfigStore, ['mergedConfig']),
	},
	data() {
	return {
	hovered: false,
	menuOpened: false,
	}
	},
	methods: {
	onHover(bool) {
	this.$emit('hover', {
	isHovered: bool,
	messageChainId: this.chatItem.messageChainId,
	})
	},
	visibilityIcon(visibility) {
	switch (visibility) {
	case 'private':
	return 'lock'
	case 'unlisted':
	return 'lock-open'
	case 'direct':
	return 'envelope'
	case 'local':
	return 'igloo'
	default:
	return 'globe'
	}
	},
	visibilityLocalized() {
	return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
	},
	async deleteMessage() {
	const confirmed = window.confirm(this.$t('chats.delete_confirm'))
	if (confirmed) {
	await this.$emit('delete', {
	messageId: this.message.id,
	chatId: this.message.chat_id,
	})
	}
	this.hovered = false
	this.menuOpened = false
	},
	},
	}

	export default ChatMessage
	diff --git a/src/components/chat_new/chat_new.js b/src/components/chat_new/chat_new.js
	index 00826ce660..23193c1691 100644
	--- a/src/components/chat_new/chat_new.js
	+++ b/src/components/chat_new/chat_new.js
	@@ -1,85 +1,83 @@
	-import { mapGetters, mapState } from 'vuex'
	+import { mapState } from 'pinia'

	import BasicUserCard from 'src/components/basic_user_card/basic_user_card.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'

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

	import { chats } from 'src/api/chats.js'

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

	library.add(faSearch, faChevronLeft)

	const chatNew = {
	components: {
	BasicUserCard,
	UserAvatar,
	},
	data() {
	return {
	suggestions: [],
	userIds: [],
	loading: false,
	query: '',
	}
	},
	async created() {
	const { data } = await chats({
	credentials: useOAuthStore().token,
	})
	data.forEach((chat) => this.suggestions.push(chat.account))
	},
	computed: {
	users() {
	return this.userIds.map((userId) => this.findUser(userId))
	},
	availableUsers() {
	if (this.query.length !== 0) {
	return this.users
	} else {
	return this.suggestions
	}
	},
	- ...mapState({
	- currentUser: (state) => state.users.currentUser,
	- }),
	- ...mapGetters(['findUser']),
	+ ...mapState(useUsersStore, ['currentUser', 'findUser']),
	},
	methods: {
	goBack() {
	this.$emit('cancel')
	},
	goToChat(user) {
	this.$router.push({ name: 'chat', params: { recipient_id: user.id } })
	},
	onInput() {
	this.search(this.query)
	},
	addUser(user) {
	this.selectedUserIds.push(user.id)
	this.query = ''
	},
	removeUser(userId) {
	this.selectedUserIds = this.selectedUserIds.filter((id) => id !== userId)
	},
	search(query) {
	if (!query) {
	this.loading = false
	return
	}

	this.loading = true
	this.userIds = []
	this.$store
	.dispatch('search', { q: query, resolve: true, type: 'accounts' })
	.then((data) => {
	this.loading = false
	this.userIds = data.accounts.map((a) => a.id)
	})
	},
	},
	}

	export default chatNew
	diff --git a/src/components/chat_view/chat_view.js b/src/components/chat_view/chat_view.js
	index 16b2ae1d72..9ae5c1d09f 100644
	--- a/src/components/chat_view/chat_view.js
	+++ b/src/components/chat_view/chat_view.js
	@@ -1,647 +1,648 @@
	import { get, maxBy, minBy, sortBy, throttle } from 'lodash'
	import { mapState as mapPiniaState } from 'pinia'
	import { nextTick } from 'vue'
	import { mapState } from 'vuex'

	import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
	import ChatTitle from 'src/components/chat_title/chat_title.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	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 { useChatsStore } from 'src/stores/chats.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import {
	chatMessages,
	deleteChatMessage,
	getOrCreateChat,
	readChat,
	sendChatMessage,
	} from 'src/api/chats.js'
	import { fetchConversation, fetchStatus } from 'src/api/public.js'
	import { WSConnectionStatus } from 'src/api/websocket.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 isConfirmation = (storage, message) => {
	if (!message.idempotency_key) return
	return storage.idempotencyKeyIndex[message.idempotency_key]
	}

	const Chat = {
	components: {
	ChatMessageList,
	ChatTitle,
	PostStatusForm,
	},
	props: {
	statusId: {
	type: String,
	default: null,
	},
	chatUserId: {
	type: String,
	default: null,
	},
	testMode: Boolean,
	},
	data() {
	return {
	// Main info
	chat: null,
	messages: [],
	messagesIndex: {},
	pendingMessages: [],
	pendingMessagesIndex: {},
	minId: undefined,
	maxId: undefined,

	// Conversation stuff
	explicitReplyStatus: null,

	// Unread stuff
	newMessageCount: 0,
	lastReadMessageId: null,
	lastScrollPosition: {},
	jumpToBottomButtonVisible: false,

	// Internal network stuff
	fetcher: null,
	errorLoadingChat: false,
	messageRetriers: {},
	idempotencyKeyIndex: {},
	}
	},
	created() {
	if (this.testMode) return
	this.startFetching()
	},
	mounted() {
	window.addEventListener('resize', this.handleResize)
	window.addEventListener('scroll', this.handleScroll)
	if (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 (document.hidden !== undefined)
	document.removeEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	},
	computed: {
	conversationId() {
	const status = this.$store.state.statuses.allStatusesObject[this.statusId]
	return get(
	status,
	'retweeted_status.statusnet_conversation_id',
	get(status, 'statusnet_conversation_id'),
	)
	},
	isConversation() {
	return this.statusId !== null
	},
	recipient() {
	return this.chat?.account
	},
	formPlaceholder() {
	if (this.recipient) {
	return this.$t('chats.message_user', {
	nickname: this.recipient.screen_name_ui,
	})
	} else {
	return ''
	}
	},

	// Conversation stuff
	lastStatus() {
	return this.messages[this.messages.length - 1]
	},
	replyStatus() {
	return this.explicitReplyStatus ?? this.lastStatus
	},

	// Global Stuff
	streamingEnabled() {
	if (this.isConversation) return false // Unsupported
	return (
	this.mergedConfig.useStreamingApi &&
	this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	)
	},
	...mapPiniaState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	+ ...mapPiniaState(useUsersStore, ['currentUser']),
	...mapState({
	mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
	- currentUser: (state) => state.users.currentUser,
	}),
	},
	watch: {
	messages(old, neu) {
	if (old.length === neu.length) return
	// 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 = isBottomedOut(BOTTOMED_OUT_OFFSET)
	this.$nextTick(() => {
	if (bottomedOutBeforeUpdate) {
	this.scrollDown()
	}
	})
	},
	async replyStatus(newVal) {
	await nextTick() // wait for changes to propagate to postStatusForm
	if (this.testMode) return
	this.$refs.postStatusForm.update()
	},
	$route: async function (newVal) {
	if (this.messagesIndex[newVal.params.statusId]) {
	const focused = document.getElementById(
	`chatmessage-${this.$route.params.statusId}`,
	)
	if (focused?.getBoundingClientRect == null) return
	const bottomBoundary =
	window.innerHeight - this.$refs.footer.clientHeight
	const topBoundary =
	this.$refs.header.clientHeight +
	document.getElementById('nav').clientHeight
	const margin = Number(
	window
	.getComputedStyle(this.$refs.messageList.$el)
	.gap.replace('px', ''),
	)

	const rect = focused.getBoundingClientRect()
	const scrollAmount = (() => {
	if (rect.top < topBoundary) {
	// Post is above screen, match its top to screen top
	return rect.top - topBoundary - margin
	} else if (rect.height >= bottomBoundary) {
	// Post we want to see is taller than screen so match its top to screen top
	return rect.top - topBoundary - margin
	} else if (rect.bottom > bottomBoundary) {
	// Post is below screen, match its bottom to screen bottom
	return rect.bottom - bottomBoundary + margin
	} else {
	return 0
	}
	})()

	if (scrollAmount !== 0) {
	window.scrollBy(0, scrollAmount)
	}

	return
	}

	this.clear()
	this.startFetching()
	},
	mastoUserSocketStatus(newValue) {
	if (newValue === WSConnectionStatus.JOINED) {
	this.fetchChat({ isFirstFetch: true })
	}
	},
	},
	methods: {
	// Actions
	async readChat() {
	if (this.conversationId) return // Unsupported
	if (!this.maxId \|\| document.hidden) {
	return
	}
	const lastReadId = this.maxId
	const isNewMessage = this.lastReadMessageId !== lastReadId

	if (!isNewMessage) return

	if (!this.testMode) {
	await readChat({
	id: this.chat.id,
	lastReadId,
	credentials: useOAuthStore().token,
	})
	}

	useChatsStore().readChat(this.chat.id)
	this.lastReadMessageId = this.maxId
	this.newMessageCount = 0
	},
	scrollDown(options = {}) {
	const { behavior = 'auto', forceRead = false } = options
	this.$nextTick(() => {
	window.scrollTo({
	top: document.documentElement.scrollHeight,
	behavior,
	})
	})
	if (forceRead) {
	this.readChat()
	}
	},
	cullOlder() {
	const maxIndex = this.messages.length
	const minIndex = maxIndex - 50
	if (maxIndex <= 50) return

	this.messages = sortBy(this.messages, ['id'])
	this.minId = this.messages[minIndex].id

	for (const message of this.messages) {
	if (message.id < this.minId) {
	delete this.messagesIndex[message.id]
	delete this.idempotencyKeyIndex[message.idempotency_key]
	}
	}

	this.messages = this.messages.slice(minIndex, maxIndex)
	},
	clear() {
	this.messages = this.messages.filter((m) => m.error)
	this.messagesIndex = this.messages.reduce(
	(acc, m) => ({
	...acc,
	[m.id]: m,
	}),
	{},
	)
	this.newMessageCount = 0
	this.lastReadMessageId = null
	this.minId = undefined
	this.maxId = undefined
	},
	async fetchChat({ isFirstFetch = false, fetchLatest = false, maxId }) {
	if (fetchLatest && this.streamingEnabled) {
	return
	}

	let messages
	if (this.isConversation) {
	const [
	{ data: status },
	{
	data: { ancestors, descendants },
	},
	] = await Promise.all([
	fetchStatus({
	id: this.statusId,
	credentials: useOAuthStore().token,
	}),
	fetchConversation({
	id: this.statusId,
	credentials: useOAuthStore().token,
	}),
	])
	messages = [...ancestors, status, ...descendants]
	} else {
	const { data } = await chatMessages({
	id: this.chat.id,
	maxId,
	sinceId: fetchLatest ? this.maxId : null,
	credentials: useOAuthStore().token,
	})
	messages = data
	}

	// Clear the current chat in case we're recovering from a ws connection loss.
	if (isFirstFetch) {
	this.clear()
	}

	const positionBeforeUpdate = getScrollPosition()
	this.addMessages({ messages })

	await nextTick()
	if (isFirstFetch) {
	this.scrollDown()
	}

	const fetchOlderMessages = !!maxId
	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.
	//
	// Conversation fetching doesn't support pagination and spews out everything at once
	// so we both can't and don't need to fetch previous posts
	if (!this.isConversation && !isScrollable() && messages.length > 0) {
	this.fetchChat({
	maxId: this.minId,
	})
	}
	},
	async startFetching() {
	if (!this.isConversation) {
	try {
	const { data } = await getOrCreateChat({
	accountId: this.chatUserId,
	credentials: useOAuthStore().token,
	})
	this.$store.commit('addNewUsers', [data.account])
	- data.account = this.$store.getters.findUser(data.account.id)
	+ data.account = useUsersStore().findUser(data.account.id)
	this.chat = data
	} catch (e) {
	console.error('Error creating or getting a chat', e)
	this.errorLoadingChat = true
	}
	}

	if (this.isConversation \|\| this.chat) {
	this.$nextTick(() => {
	this.scrollDown({ forceRead: true })
	})
	this.doStartFetching()
	}
	},
	doStartFetching() {
	this.fetcher = promiseInterval(
	() => this.fetchChat({ fetchLatest: true }),
	5000,
	)
	this.fetchChat({ isFirstFetch: true })
	},
	addMessages({ messages: newMessages }) {
	for (let i = 0; i < newMessages.length; i++) {
	const message = newMessages[i]

	// Sanity check
	if (!this.isConversation && message.chat_id !== this.chat.id) {
	console.warn(
	`Chat message doesn't belong to current chat (id: ${this.chat.id})!!`,
	message,
	)
	return
	}

	// Clear any known pending messages
	if (message.idempotency_key) {
	if (this.pendingMessagesIndex[message.idempotencyKeyIndex]) {
	delete this.pendingMessagesIndex[message.idempotencyKeyIndex]
	this.pendingMessages = this.pendingMessages.filter(
	({ idempotency_key }) =>
	idempotency_key !== message.idempotency_key,
	)
	}
	}

	if (!this.minId \|\| (!message.pending && message.id < this.minId)) {
	this.minId = message.id
	}

	if (!this.maxId \|\| message.id > this.maxId) {
	this.maxId = message.id
	}

	if (!this.messagesIndex[message.id] && !isConfirmation(this, message)) {
	if (this.lastReadMessageId < message.id) {
	this.newMessageCount++
	}
	this.messagesIndex[message.id] = message
	this.messages.push(this.messagesIndex[message.id])
	this.idempotencyKeyIndex[message.idempotency_key] = true
	}
	}
	},
	goBack() {
	this.$router.back()
	},

	// Optimistic posting (chats only)
	async sendMessage({ status, media, idempotencyKey }) {
	const params = {
	id: this.chat.id,
	content: status,
	idempotencyKey,
	}

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

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

	this.pendingMessages.push(fakeMessage)
	this.pendingMessagesIndex[idempotencyKey] = fakeMessage

	this.handleAttachmentPosting()

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

	try {
	const { data } = await sendChatMessage({
	...params,
	credentials: useOAuthStore().token,
	})

	this.addMessages({
	messages: [{ ...data }],
	})
	} catch (error) {
	if (
	error.name !== 'StatusCodeError' \|\|
	error.message === 'Failed to fetch'
	)
	throw error
	console.error('Error sending message', error)

	this.handleMessageError({
	chatId: this.chat.id,
	idempotencyKey: params.idempotencyKey,
	isRetry: retriesLeft !== MAX_RETRIES,
	})

	if (
	(error.statusCode >= 500 && error.statusCode < 600) \|\|
	error.message === 'Failed to fetch'
	) {
	this.messageRetriers[params.idempotencyKey] = setTimeout(
	() => {
	this.doSendMessage({
	params,
	retriesLeft: retriesLeft - 1,
	})
	},
	1000 * 2 ** (MAX_RETRIES - retriesLeft),
	)
	}
	}
	},
	handleMessageError(idempotencyKey, isRetry) {
	const fakeMessage = this.pendingMessagesIndex[idempotencyKey]

	if (fakeMessage) {
	fakeMessage.error = true
	fakeMessage.pending = false
	}
	},

	// Checks
	hasReachedTop() {
	return window.scrollY <= 0
	},
	cullOlderCheck() {
	if (this.conversationId) return
	window.setTimeout(() => {
	if (isBottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.cullOlder()
	}
	}, 5000)
	},

	// Event handlers
	onPosted(data) {
	this.explicitReplyStatus = null
	this.$router.push({
	name: 'conversation2',
	params: { statusId: data.id },
	})
	},
	handleVisibilityChange() {
	this.$nextTick(() => {
	if (!document.hidden && isBottomedOut(BOTTOMED_OUT_OFFSET)) {
	this.scrollDown({ forceRead: true })
	}
	})
	},
	onFilesDropped() {
	this.$nextTick(() => {
	this.handleResize()
	})
	},
	handleResize(opts = {}) {
	// "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
	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 && !isBottomedOut()) {
	this.$nextTick(() => {
	window.scrollBy({ top: -Math.trunc(diff) })
	})
	}
	this.lastScrollPosition = getScrollPosition()
	})
	},
	handleScroll: throttle(function () {
	if (!this.chat) {
	return
	}
	this.lastScrollPosition = getScrollPosition()

	if (this.hasReachedTop()) {
	this.fetchChat({ maxId: this.minId })
	} else if (isBottomedOut(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),
	})
	},
	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 })
	})
	},

	// Ugly
	// TODO move to ChatMessage
	async deleteChatMessage({ chatId, messageId }) {
	if (!this.testMode)
	await deleteChatMessage({
	chatId,
	messageId,
	credentials: useOAuthStore().token,
	})

	this.messages = this.messages.filter((m) => m.id !== messageId)
	delete this.messagesIndex[messageId]

	if (this.maxId === messageId) {
	const lastMessage = maxBy(this.messages, 'id')
	this.maxId = lastMessage.id
	}

	if (this.minId === messageId) {
	const firstMessage = minBy(this.messages, 'id')
	this.minId = firstMessage.id
	}
	},
	},
	}

	export default Chat
	diff --git a/src/components/confirm_modal/mute_confirm.js b/src/components/confirm_modal/mute_confirm.js
	index c2f5ff8882..862405a8e6 100644
	--- a/src/components/confirm_modal/mute_confirm.js
	+++ b/src/components/confirm_modal/mute_confirm.js
	@@ -1,92 +1,91 @@
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import Select from 'src/components/select/select.vue'

	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	export default {
	props: ['type', 'user', 'status'],
	emits: ['hide', 'show', 'muted'],
	data: () => ({
	showing: false,
	}),
	components: {
	ConfirmModal: defineAsyncComponent(
	() => import('src/components/confirm_modal/confirm_modal.vue'),
	),

	Select,
	},
	computed: {
	domain() {
	return this.user.fqn.split('@')[1]
	},
	keypath() {
	if (this.type === 'domain') {
	return 'user_card.mute_domain_confirm'
	} else if (this.type === 'conversation') {
	return 'user_card.mute_conversation_confirm'
	}
	},
	conversationIsMuted() {
	return this.status.conversation_muted
	},
	domainIsMuted() {
	- return new Set(this.$store.state.users.currentUser.domainMutes).has(
	- this.domain,
	- )
	+ return new Set(useUsersStore().currentUser.domainMutes).has(this.domain)
	},
	shouldConfirm() {
	switch (this.type) {
	case 'domain': {
	return this.mergedConfig.modalOnMuteDomain
	}
	default: {
	// conversation
	return this.mergedConfig.modalOnMuteConversation
	}
	}
	},
	...mapState(useMergedConfigStore, ['mergedConfig']),
	},
	methods: {
	optionallyPrompt() {
	if (this.shouldConfirm) {
	this.show()
	} else {
	this.doMute()
	}
	},
	show() {
	this.showing = true
	this.$emit('show')
	},
	hide() {
	this.showing = false
	this.$emit('hide')
	},
	doMute() {
	switch (this.type) {
	case 'domain': {
	if (!this.domainIsMuted) {
	this.$store.dispatch('muteDomain', this.domain)
	} else {
	this.$store.dispatch('unmuteDomain', this.domain)
	}
	break
	}
	case 'conversation': {
	if (!this.conversationIsMuted) {
	this.$store.dispatch('muteConversation', { id: this.status.id })
	} else {
	this.$store.dispatch('unmuteConversation', { id: this.status.id })
	}
	break
	}
	}
	this.$emit('muted')
	this.hide()
	},
	},
	}
	diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
	index cc2c5aca91..85625105f5 100644
	--- a/src/components/desktop_nav/desktop_nav.js
	+++ b/src/components/desktop_nav/desktop_nav.js
	@@ -1,128 +1,127 @@
	import SearchBar from 'components/search_bar/search_bar.vue'
	import { mapActions, mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInterfaceStore } from 'src/stores/interface'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faBullhorn,
	faCog,
	faComments,
	faHome,
	faInfoCircle,
	faSearch,
	faSignInAlt,
	faSignOutAlt,
	faTachometerAlt,
	faUserPlus,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSignInAlt,
	faSignOutAlt,
	faHome,
	faComments,
	faBell,
	faUserPlus,
	faBullhorn,
	faSearch,
	faTachometerAlt,
	faCog,
	faInfoCircle,
	)

	export default {
	components: {
	SearchBar,
	ConfirmModal: defineAsyncComponent(
	() => import('src/components/confirm_modal/confirm_modal.vue'),
	),
	},
	data: () => ({
	searchBarHidden: true,
	supportsMask:
	window.CSS?.supports &&
	(window.CSS.supports('mask-size', 'contain') \|\|
	window.CSS.supports('-webkit-mask-size', 'contain') \|\|
	window.CSS.supports('-moz-mask-size', 'contain') \|\|
	window.CSS.supports('-ms-mask-size', 'contain') \|\|
	window.CSS.supports('-o-mask-size', 'contain')),
	showingConfirmLogout: false,
	}),
	computed: {
	enableMask() {
	return this.supportsMask && this.logoMask
	},
	logoStyle() {
	return {
	visibility: this.enableMask ? 'hidden' : 'visible',
	}
	},
	logoMaskStyle() {
	return this.enableMask
	? {
	'mask-image': `url(${this.logo})`,
	}
	: {
	'background-color': this.enableMask ? '' : 'transparent',
	}
	},
	logoBgStyle() {
	const mask = this.enableMask
	? {}
	: { 'background-color': this.enableMask ? '' : 'transparent' }

	return {
	margin: `${this.logoMargin} 0`,
	opacity: this.searchBarHidden ? 1 : 0,
	...mask,
	}
	},
	...mapState(useInstanceStore, ['privateMode']),
	...mapState(useInstanceStore, {
	logoMask: (store) => store.instanceIdentity.logoMask,
	logo: (store) => store.instanceIdentity.logo,
	logoLeft: (store) => store.instanceIdentity.logoLeft,
	logoMargin: (store) => store.instanceIdentity.logoMargin,
	sitename: (store) => store.instanceIdentity.name,
	hideSitename: (store) => store.instanceIdentity.hideSitename,
	}),
	- currentUser() {
	- return this.$store.state.users.currentUser
	- },
	+ ...mapState(useUsersStore, ['currentUser']),
	shouldConfirmLogout() {
	return useMergedConfigStore().mergedConfig.modalOnLogout
	},
	},
	methods: {
	scrollToTop() {
	window.scrollTo(0, 0)
	},
	showConfirmLogout() {
	this.showingConfirmLogout = true
	},
	hideConfirmLogout() {
	this.showingConfirmLogout = false
	},
	logout() {
	if (!this.shouldConfirmLogout) {
	this.doLogout()
	} else {
	this.showConfirmLogout()
	}
	},
	doLogout() {
	this.$router.replace('/main/public')
	this.$store.dispatch('logout')
	this.hideConfirmLogout()
	},
	onSearchBarToggled(hidden) {
	this.searchBarHidden = hidden
	},
	...mapActions(useInterfaceStore, ['openSettingsModal']),
	},
	}
	diff --git a/src/components/domain_mute_card/domain_mute_card.js b/src/components/domain_mute_card/domain_mute_card.js
	index d838966186..a0442a7069 100644
	--- a/src/components/domain_mute_card/domain_mute_card.js
	+++ b/src/components/domain_mute_card/domain_mute_card.js
	@@ -1,26 +1,28 @@
	import ProgressButton from 'src/components/progress_button/progress_button.vue'

	+import { useUsersStore } from 'src/stores/users.js'
	+
	const DomainMuteCard = {
	props: ['domain'],
	components: {
	ProgressButton,
	},
	computed: {
	user() {
	- return this.$store.state.users.currentUser
	+ return useUsersStore().currentUser
	},
	muted() {
	return this.user.domainMutes.includes(this.domain)
	},
	},
	methods: {
	unmuteDomain() {
	return this.$store.dispatch('unmuteDomain', this.domain)
	},
	muteDomain() {
	return this.$store.dispatch('muteDomain', this.domain)
	},
	},
	}

	export default DomainMuteCard
	diff --git a/src/components/edit_status_modal/edit_status_modal.js b/src/components/edit_status_modal/edit_status_modal.js
	index 59c142d081..12072d7a2f 100644
	--- a/src/components/edit_status_modal/edit_status_modal.js
	+++ b/src/components/edit_status_modal/edit_status_modal.js
	@@ -1,59 +1,60 @@
	import { get } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	import Modal from 'src/components/modal/modal.vue'

	import { useEditStatusStore } from 'src/stores/editStatus.js'
	+import { useUsersStore } from 'src/stores/users.js'

	const EditStatusModal = {
	components: {
	EditStatusForm: defineAsyncComponent(
	() => import('src/components/edit_status_form/edit_status_form.vue'),
	),
	Modal,
	},
	data() {
	return {
	resettingForm: false,
	}
	},
	computed: {
	isLoggedIn() {
	- return !!this.$store.state.users.currentUser
	+ return !!useUsersStore().currentUser
	},
	modalActivated() {
	return useEditStatusStore().modalActivated
	},
	isFormVisible() {
	return this.isLoggedIn && !this.resettingForm && this.modalActivated
	},
	params() {
	return useEditStatusStore().params \|\| {}
	},
	},
	watch: {
	params(newVal, oldVal) {
	if (get(newVal, 'statusId') !== get(oldVal, 'statusId')) {
	this.resettingForm = true
	this.$nextTick(() => {
	this.resettingForm = false
	})
	}
	},
	isFormVisible(val) {
	if (val) {
	this.$nextTick(() => this.$el?.querySelector('textarea').focus())
	}
	},
	},
	methods: {
	closeModal() {
	this.$refs.editStatusForm.requestClose()
	},
	doCloseModal() {
	useEditStatusStore().closeEditStatusModal()
	},
	},
	}

	export default EditStatusModal
	diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
	index acb5404c0e..b3b538a9a0 100644
	--- a/src/components/emoji_reactions/emoji_reactions.js
	+++ b/src/components/emoji_reactions/emoji_reactions.js
	@@ -1,105 +1,106 @@
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserListPopover from 'src/components/user_list_popover/user_list_popover.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

	library.add(faPlus, faMinus, faCheck)

	const EMOJI_REACTION_COUNT_CUTOFF = 12

	const EmojiReactions = {
	name: 'EmojiReactions',
	components: {
	UserAvatar,
	UserListPopover,
	},
	props: ['status'],
	data: () => ({
	showAll: false,
	}),
	computed: {
	tooManyReactions() {
	return this.status.emoji_reactions.length > EMOJI_REACTION_COUNT_CUTOFF
	},
	emojiReactions() {
	return this.showAll
	? this.status.emoji_reactions
	: this.status.emoji_reactions.slice(0, EMOJI_REACTION_COUNT_CUTOFF)
	},
	showMoreString() {
	return `+${this.status.emoji_reactions.length - EMOJI_REACTION_COUNT_CUTOFF}`
	},
	accountsForEmoji() {
	return this.status.emoji_reactions.reduce((acc, reaction) => {
	acc[reaction.name] = reaction.accounts \|\| []
	return acc
	}, {})
	},
	loggedIn() {
	- return !!this.$store.state.users.currentUser
	+ return !!useUsersStore().currentUser
	},
	remoteInteractionLink() {
	return useInstanceStore().getRemoteInteractionLink({
	statusId: this.status.id,
	})
	},
	allowNonSquareEmoji() {
	return useMergedConfigStore().mergedConfig.nonSquareEmoji
	},
	},
	methods: {
	toggleShowAll() {
	this.showAll = !this.showAll
	},
	reactedWith(emoji) {
	return this.status.emoji_reactions.find((r) => r.name === emoji).me
	},
	async fetchEmojiReactionsByIfMissing() {
	const hasNoAccounts = this.status.emoji_reactions.find((r) => !r.accounts)
	if (hasNoAccounts) {
	return await this.$store.dispatch(
	'fetchEmojiReactionsBy',
	this.status.id,
	)
	}
	},
	reactWith(emoji) {
	this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
	},
	unreact(emoji) {
	this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
	},
	async emojiOnClick(emoji) {
	if (!this.loggedIn) return

	await this.fetchEmojiReactionsByIfMissing()
	if (this.reactedWith(emoji)) {
	this.unreact(emoji)
	} else {
	this.reactWith(emoji)
	}
	},
	counterTriggerAttrs(reaction) {
	return {
	class: [
	'emoji-reaction-count-button',
	{
	'-picked-reaction': this.reactedWith(reaction.name),
	toggled: this.reactedWith(reaction.name),
	},
	],
	'aria-label': this.$t(
	'status.reaction_count_label',
	{ num: reaction.count },
	reaction.count,
	),
	}
	},
	},
	}

	export default EmojiReactions
	diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
	index 24ed074af9..851656ae52 100644
	--- a/src/components/extra_notifications/extra_notifications.js
	+++ b/src/components/extra_notifications/extra_notifications.js
	@@ -1,77 +1,78 @@
	import { mapState } from 'pinia'
	import { mapGetters } from 'vuex'

	import { useAnnouncementsStore } from 'src/stores/announcements.js'
	import { useChatsStore } from 'src/stores/chats.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBullhorn,
	faComments,
	faUserPlus,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faUserPlus, faComments, faBullhorn)

	const ExtraNotifications = {
	computed: {
	shouldShowChats() {
	return (
	this.mergedConfig.showExtraNotifications &&
	this.mergedConfig.showChatsInExtraNotifications &&
	this.unreadChatsCount
	)
	},
	shouldShowAnnouncements() {
	return (
	this.mergedConfig.showExtraNotifications &&
	this.mergedConfig.showAnnouncementsInExtraNotifications &&
	this.unreadAnnouncementCount
	)
	},
	shouldShowFollowRequests() {
	return (
	this.mergedConfig.showExtraNotifications &&
	this.mergedConfig.showFollowRequestsInExtraNotifications &&
	this.followRequestCount
	)
	},
	hasAnythingToShow() {
	return (
	this.shouldShowChats \|\|
	this.shouldShowAnnouncements \|\|
	this.shouldShowFollowRequests
	)
	},
	shouldShowCustomizationTip() {
	return (
	this.mergedConfig.showExtraNotificationsTip && this.hasAnythingToShow
	)
	},
	currentUser() {
	- return this.$store.state.users.currentUser
	+ return useUsersStore().currentUser
	},
	...mapGetters(['followRequestCount']),
	...mapState(useAnnouncementsStore, {
	unreadAnnouncementCount: 'unreadAnnouncementCount',
	}),
	...mapState(useMergedConfigStore, ['mergedConfig']),
	...mapState(useChatsStore, ['unreadChatsCount']),
	},
	methods: {
	openNotificationSettings() {
	return useInterfaceStore().openSettingsModalTab('notifications')
	},
	dismissConfigurationTip() {
	return useSyncConfigStore().setSimplePrefAndSave({
	path: 'showExtraNotificationsTip',
	value: false,
	})
	},
	},
	}

	export default ExtraNotifications
	diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js
	index 8fffbf7309..228d157768 100644
	--- a/src/components/follow_card/follow_card.js
	+++ b/src/components/follow_card/follow_card.js
	@@ -1,27 +1,29 @@
	import BasicUserCard from 'src/components/basic_user_card/basic_user_card.vue'
	import FollowButton from 'src/components/follow_button/follow_button.vue'
	import RemoteFollow from 'src/components/remote_follow/remote_follow.vue'
	import RemoveFollowerButton from 'src/components/remove_follower_button/remove_follower_button.vue'

	+import { useUsersStore } from 'src/stores/users.js'
	+
	const FollowCard = {
	props: ['user', 'noFollowsYou'],
	components: {
	BasicUserCard,
	RemoteFollow,
	FollowButton,
	RemoveFollowerButton,
	},
	computed: {
	isMe() {
	- return this.$store.state.users.currentUser.id === this.user.id
	+ return useUsersStore().currentUser.id === this.user.id
	},
	loggedIn() {
	- return this.$store.state.users.currentUser
	+ return useUsersStore().currentUser
	},
	relationship() {
	return this.$store.getters.relationship(this.user.id)
	},
	},
	}

	export default FollowCard
	diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js
	index d008c4b307..37873605fe 100644
	--- a/src/components/interactions/interactions.js
	+++ b/src/components/interactions/interactions.js
	@@ -1,36 +1,37 @@
	import Notifications from 'src/components/notifications/notifications.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'

	+import { useUsersStore } from 'src/stores/users.js'
	+
	const tabModeDict = {
	mentions: ['mention'],
	statuses: ['status'],
	'likes+repeats': ['repeat', 'like'],
	follows: ['follow'],
	reactions: ['pleroma:emoji_reaction'],
	reports: ['pleroma:report'],
	moves: ['move'],
	}

	const Interactions = {
	data() {
	return {
	- allowFollowingMove:
	- this.$store.state.users.currentUser.allow_following_move,
	+ allowFollowingMove: useUsersStore().currentUser.allow_following_move,
	filterMode: tabModeDict.mentions,
	- canSeeReports: this.$store.state.users.currentUser.privileges.has(
	+ canSeeReports: useUsersStore().currentUser.privileges.has(
	'reports_manage_reports',
	),
	}
	},
	methods: {
	onModeSwitch(key) {
	this.filterMode = tabModeDict[key]
	},
	},
	components: {
	Notifications,
	TabSwitcher,
	},
	}

	export default Interactions
	diff --git a/src/components/lists_edit/lists_edit.js b/src/components/lists_edit/lists_edit.js
	index 7eb035091c..ec4cd1fa76 100644
	--- a/src/components/lists_edit/lists_edit.js
	+++ b/src/components/lists_edit/lists_edit.js
	@@ -1,151 +1,148 @@
	-import { mapState as mapPiniaState } from 'pinia'
	-import { mapGetters, mapState } from 'vuex'
	+import { mapState } from 'pinia'

	import BasicUserCard from 'src/components/basic_user_card/basic_user_card.vue'
	import ListsUserSearch from 'src/components/lists_user_search/lists_user_search.vue'
	import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'

	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useListsStore } from 'src/stores/lists.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

	library.add(faSearch, faChevronLeft)

	const ListsNew = {
	components: {
	BasicUserCard,
	UserAvatar,
	ListsUserSearch,
	TabSwitcher,
	PanelLoading,
	},
	data() {
	return {
	title: '',
	titleDraft: '',
	membersUserIds: [],
	removedUserIds: new Set([]), // users we added for members, to undo
	searchUserIds: [],
	addedUserIds: new Set([]), // users we added from search, to undo
	searchLoading: false,
	reallyDelete: false,
	}
	},
	created() {
	if (!this.id) return
	useListsStore()
	.fetchList({ listId: this.id })
	.then(() => {
	this.title = this.findListTitle(this.id)
	this.titleDraft = this.title
	})
	useListsStore()
	.fetchListAccounts({ listId: this.id })
	.then(() => {
	this.membersUserIds = this.findListAccounts(this.id)
	this.membersUserIds.forEach((userId) => {
	this.$store.dispatch('fetchUserIfMissing', userId)
	})
	})
	},
	computed: {
	id() {
	return this.$route.params.id
	},
	membersUsers() {
	return [...this.membersUserIds, ...this.addedUserIds]
	.map((userId) => this.findUser(userId))
	.filter(Boolean)
	},
	searchUsers() {
	return this.searchUserIds
	.map((userId) => this.findUser(userId))
	.filter(Boolean)
	},
	- ...mapState({
	- currentUser: (state) => state.users.currentUser,
	- }),
	- ...mapPiniaState(useListsStore, ['findListTitle', 'findListAccounts']),
	- ...mapGetters(['findUser']),
	+ ...mapState(useUsersStore, ['currentUser', 'findUser']),
	+ ...mapState(useListsStore, ['findListTitle', 'findListAccounts']),
	},
	methods: {
	onInput() {
	this.search(this.query)
	},
	toggleRemoveMember(user) {
	if (this.removedUserIds.has(user.id)) {
	this.id && this.addUser(user)
	this.removedUserIds.delete(user.id)
	} else {
	this.id && this.removeUser(user.id)
	this.removedUserIds.add(user.id)
	}
	},
	toggleAddFromSearch(user) {
	if (this.addedUserIds.has(user.id)) {
	this.id && this.removeUser(user.id)
	this.addedUserIds.delete(user.id)
	} else {
	this.id && this.addUser(user)
	this.addedUserIds.add(user.id)
	}
	},
	isRemoved(user) {
	return this.removedUserIds.has(user.id)
	},
	isAdded(user) {
	return this.addedUserIds.has(user.id)
	},
	addUser(user) {
	useListsStore().addListAccount({ accountId: user.id, listId: this.id })
	},
	removeUser(userId) {
	useListsStore().removeListAccount({ accountId: userId, listId: this.id })
	},
	onSearchLoading() {
	this.searchLoading = true
	},
	onSearchLoadingDone() {
	this.searchLoading = false
	},
	onSearchResults(results) {
	this.searchLoading = false
	this.searchUserIds = results
	},
	updateListTitle() {
	useListsStore().setList({ listId: this.id, title: this.titleDraft })
	this.title = this.findListTitle(this.id)
	},
	createList() {
	useListsStore()
	.createList({ title: this.titleDraft })
	.then((list) => {
	useListsStore().setListAccounts({
	listId: list.id,
	accountIds: [...this.addedUserIds],
	})
	return list.id
	})
	.then((listId) => {
	this.$router.push({ name: 'lists-timeline', params: { id: listId } })
	})
	.catch((e) => {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'lists.error',
	messageArgs: [e.message],
	level: 'error',
	})
	})
	},
	deleteList() {
	useListsStore().deleteList({ listId: this.id })
	this.$router.push({ name: 'lists' })
	},
	},
	}

	export default ListsNew
	diff --git a/src/components/lists_menu/lists_menu_content.js b/src/components/lists_menu/lists_menu_content.js
	index 337ee4d4fe..7c422d033f 100644
	--- a/src/components/lists_menu/lists_menu_content.js
	+++ b/src/components/lists_menu/lists_menu_content.js
	@@ -1,24 +1,22 @@
	-import { mapState as mapPiniaState } from 'pinia'
	-import { mapState } from 'vuex'
	+import { mapState } from 'pinia'

	import { getListEntries } from 'src/components/navigation/filter.js'
	import NavigationEntry from 'src/components/navigation/navigation_entry.vue'

	import { useListsStore } from 'src/stores/lists.js'
	+import { useUsersStore } from 'src/stores/users.js'

	export const ListsMenuContent = {
	props: ['showPin'],
	components: {
	NavigationEntry,
	},
	computed: {
	- ...mapPiniaState(useListsStore, {
	+ ...mapState(useListsStore, {
	lists: getListEntries,
	}),
	- ...mapState({
	- currentUser: (state) => state.users.currentUser,
	- }),
	+ ...mapState(useUsersStore, ['currentUser']),
	},
	}

	export default ListsMenuContent
	diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
	index 0309079e84..374e622598 100644
	--- a/src/components/mention_link/mention_link.js
	+++ b/src/components/mention_link/mention_link.js
	@@ -1,167 +1,165 @@
	-import { mapState as mapPiniaState } from 'pinia'
	-import { mapState } from 'vuex'
	+import { mapState } from 'pinia'

	import UnicodeDomainIndicator from 'src/components/unicode_domain_indicator/unicode_domain_indicator.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserPopover from 'src/components/user_popover/user_popover.vue'
	import {
	highlightClass,
	highlightStyle,
	} from '../../services/user_highlighter/user_highlighter.js'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useUserHighlightStore } from 'src/stores/user_highlight.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

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

	library.add(faAt)

	const MentionLink = {
	name: 'MentionLink',
	components: {
	UserAvatar,
	UnicodeDomainIndicator,
	UserPopover,
	},
	props: {
	url: {
	required: true,
	type: String,
	},
	content: {
	required: true,
	type: String,
	},
	userId: {
	required: false,
	type: String,
	},
	userScreenName: {
	required: false,
	type: String,
	},
	},
	data() {
	return {
	hasSelection: false,
	}
	},
	methods: {
	onClick() {
	if (this.shouldShowTooltip) return
	const link = generateProfileLink(
	this.userId \|\| this.user.id,
	this.userScreenName \|\| this.user.screen_name,
	)
	this.$router.push(link)
	},
	handleSelection() {
	if (this.$refs.full) {
	this.hasSelection = document
	.getSelection()
	.containsNode(this.$refs.full, true)
	}
	},
	},
	mounted() {
	document.addEventListener('selectionchange', this.handleSelection)
	},
	unmounted() {
	document.removeEventListener('selectionchange', this.handleSelection)
	},
	computed: {
	user() {
	- return this.url && this.$store?.getters.findUserByUrl(this.url)
	+ return this.url && useUsersStore().findUserByUrl(this.url)
	},
	isYou() {
	// FIXME why user !== currentUser???
	return this.user?.id === this.currentUser.id
	},
	userName() {
	return this.user && this.userNameFullUi.split('@')[0]
	},
	serverName() {
	// XXX assumed that domain does not contain @
	return (
	this.user &&
	(this.userNameFullUi.split('@')[1] \|\| useInstanceStore().instanceDomain)
	)
	},
	userNameFull() {
	return this.user?.screen_name
	},
	userNameFullUi() {
	return this.user?.screen_name_ui
	},
	highlightData() {
	return this.highlight[this.user?.screen_name]
	},
	highlightType() {
	return this.highlightData && '-' + this.highlightData.type
	},
	highlightClass() {
	return this.highlightData && highlightClass(this.user)
	},
	style() {
	if (this.highlightData) {
	const {
	backgroundColor,
	backgroundPosition,
	backgroundImage,
	...rest
	} = highlightStyle(this.highlightData)
	return rest
	}
	},
	classnames() {
	return [
	{
	'-you': this.isYou && this.shouldBoldenYou,
	'-highlighted': !!this.highlightData,
	'-has-selection': this.hasSelection,
	},
	this.highlightType,
	]
	},
	isRemote() {
	return this.userName !== this.userNameFull
	},
	shouldShowFullUserName() {
	const conf = this.mergedConfig.mentionLinkDisplay
	if (conf === 'short') {
	return false
	} else if (conf === 'full') {
	return true
	} else {
	// full_for_remote
	return this.isRemote
	}
	},
	shouldShowTooltip() {
	return this.mergedConfig.mentionLinkShowTooltip
	},
	shouldShowAvatar() {
	return this.mergedConfig.mentionLinkShowAvatar
	},
	shouldShowYous() {
	return this.mergedConfig.mentionLinkShowYous
	},
	shouldBoldenYou() {
	return this.mergedConfig.mentionLinkBoldenYou
	},
	shouldFadeDomain() {
	return this.mergedConfig.mentionLinkFadeDomain
	},
	- ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	- ...mapPiniaState(useUserHighlightStore, ['highlight']),
	- ...mapState({
	- currentUser: (state) => state.users.currentUser,
	- }),
	+ ...mapState(useMergedConfigStore, ['mergedConfig']),
	+ ...mapState(useUserHighlightStore, ['highlight']),
	+ ...mapState(useUsersStore, ['currentUser']),
	},
	}

	export default MentionLink
	diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
	index 4eb956f64c..0c8f987c18 100644
	--- a/src/components/mobile_nav/mobile_nav.js
	+++ b/src/components/mobile_nav/mobile_nav.js
	@@ -1,167 +1,168 @@
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import NavigationPins from 'src/components/navigation/navigation_pins.vue'
	import GestureService from '../../services/gesture_service/gesture_service'
	import {
	countExtraNotifications,
	unseenNotificationsFromStore,
	} from '../../services/notification_utils/notification_utils'

	import { useAnnouncementsStore } from 'src/stores/announcements.js'
	import { useChatsStore } from 'src/stores/chats.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

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

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

	export default MobileNav
	diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
	index 4969352f67..d137331c93 100644
	--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
	+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
	@@ -1,120 +1,121 @@
	import { debounce } from 'lodash'

	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { usePostStatusStore } from 'src/stores/post_status.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

	library.add(faPen)

	const HIDDEN_FOR_PAGES = new Set(['chats', 'chat', 'lists-edit'])

	const MobilePostStatusButton = {
	data() {
	return {
	hidden: false,
	scrollingDown: false,
	inputActive: false,
	oldScrollPos: 0,
	amountScrolled: 0,
	}
	},
	created() {
	if (this.autohideFloatingPostButton) {
	this.activateFloatingPostButtonAutohide()
	}
	window.addEventListener('resize', this.handleOSK)
	},
	unmounted() {
	if (this.autohideFloatingPostButton) {
	this.deactivateFloatingPostButtonAutohide()
	}
	window.removeEventListener('resize', this.handleOSK)
	},
	computed: {
	isLoggedIn() {
	- return !!this.$store.state.users.currentUser
	+ return useUsersStore().loggedIn
	},
	isHidden() {
	if (HIDDEN_FOR_PAGES.has(this.$route.name)) {
	return true
	}

	return (
	this.autohideFloatingPostButton && (this.hidden \|\| this.inputActive)
	)
	},
	isPersistent() {
	return !!useMergedConfigStore().mergedConfig.alwaysShowNewPostButton
	},
	autohideFloatingPostButton() {
	return !!useMergedConfigStore().mergedConfig.autohideFloatingPostButton
	},
	},
	watch: {
	autohideFloatingPostButton: function (isEnabled) {
	if (isEnabled) {
	this.activateFloatingPostButtonAutohide()
	} else {
	this.deactivateFloatingPostButtonAutohide()
	}
	},
	},
	methods: {
	activateFloatingPostButtonAutohide() {
	window.addEventListener('scroll', this.handleScrollStart)
	window.addEventListener('scroll', this.handleScrollEnd)
	},
	deactivateFloatingPostButtonAutohide() {
	window.removeEventListener('scroll', this.handleScrollStart)
	window.removeEventListener('scroll', this.handleScrollEnd)
	},
	openPostForm() {
	usePostStatusStore().openPostStatusModal()
	},
	handleOSK() {
	// This is a big hack: we're guessing from changed window sizes if the
	// on-screen keyboard is active or not. This is only really important
	// for phones in portrait mode and it's more important to show the button
	// in normal scenarios on all phones, than it is to hide it when the
	// keyboard is active.
	// Guesswork based on https://www.mydevice.io/#compare-devices

	// for example, iphone 4 and android phones from the same time period
	const smallPhone = window.innerWidth < 350
	const smallPhoneKbOpen = smallPhone && window.innerHeight < 345

	const biggerPhone = !smallPhone && window.innerWidth < 450
	const biggerPhoneKbOpen = biggerPhone && window.innerHeight < 560
	if (smallPhoneKbOpen \|\| biggerPhoneKbOpen) {
	this.inputActive = true
	} else {
	this.inputActive = false
	}
	},
	handleScrollStart: debounce(
	function () {
	if (window.scrollY > this.oldScrollPos) {
	this.hidden = true
	} else {
	this.hidden = false
	}
	this.oldScrollPos = window.scrollY
	},
	100,
	{ leading: true, trailing: false },
	),

	handleScrollEnd: debounce(
	function () {
	this.hidden = false
	this.oldScrollPos = window.scrollY
	},
	100,
	{ leading: false, trailing: true },
	),
	},
	}

	export default MobilePostStatusButton
	diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
	index ba13afc8bf..de213632c5 100644
	--- a/src/components/moderation_tools/moderation_tools.js
	+++ b/src/components/moderation_tools/moderation_tools.js
	@@ -1,671 +1,672 @@
	import { last } from 'lodash'

	import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
	import Popover from 'src/components/popover/popover.vue'

	import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

	library.add(faChevronDown)

	const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
	const STRIP_MEDIA = 'mrf_tag:media-strip'
	const FORCE_UNLISTED = 'mrf_tag:force-unlisted'
	const DISABLE_REMOTE_SUBSCRIPTION = 'mrf_tag:disable-remote-subscription'
	const DISABLE_ANY_SUBSCRIPTION = 'mrf_tag:disable-any-subscription'
	const SANDBOX = 'mrf_tag:sandbox'
	const QUARANTINE = 'mrf_tag:quarantine'
	const TAGS = new Set([
	FORCE_NSFW,
	STRIP_MEDIA,
	FORCE_UNLISTED,
	DISABLE_REMOTE_SUBSCRIPTION,
	DISABLE_ANY_SUBSCRIPTION,
	SANDBOX,
	QUARANTINE,
	])

	const ENTRIES = [
	{
	check: '!state:activated',
	label: 'user_card.admin_menu.activate_account',
	},
	{
	check: 'state:activated',
	label: 'user_card.admin_menu.deactivate_account',
	},
	{
	separator: true,
	},
	{
	check: '!state:confirmed',
	label: 'user_card.admin_menu.confirm_account',
	},
	{
	check: 'action:resend_confirmation',
	conditions: ['!state:confirmed'],
	label: 'user_card.admin_menu.resend_confirmation',
	},
	// No API for revocation
	// {
	// check: 'state:confirmed',
	// label: 'user_card.admin_menu.unconfirm_account',
	// },
	{
	check: '!state:approved',
	conditions: ['property:local'],
	label: 'user_card.admin_menu.approve_account',
	},
	// No API for revocation
	// {
	// check: 'state:approved',
	// label: 'user_card.admin_menu.unapprove_account',
	// },
	{
	check: '!state:suggested',
	// conditions: ['property:local'], // TODO Should we allow non-local users in suggested?
	label: 'user_card.admin_menu.suggest_account',
	},
	{
	check: 'state:suggested',
	label: 'user_card.admin_menu.remove_suggested_account',
	},
	{
	separator: true,
	},
	{
	check: 'action:statuses',
	label: 'user_card.admin_menu.show_statuses',
	conditions: ['count:1'],
	},
	{
	separator: true,
	},
	{
	check: 'action:disable_mfa',
	label: 'user_card.admin_menu.disable_mfa',
	},
	{
	check: 'action:require_password_change',
	label: 'user_card.admin_menu.require_password_change',
	},
	{
	separator: true,
	},
	{
	check: '!rights:moderator',
	label: 'user_card.admin_menu.grant_moderator',
	conditions: ['property:local', 'state:activated'],
	},
	{
	check: 'rights:moderator',
	label: 'user_card.admin_menu.revoke_moderator',
	conditions: ['property:local', 'state:activated'],
	},
	{
	check: '!rights:admin',
	label: 'user_card.admin_menu.grant_admin',
	conditions: ['property:local', 'state:activated'],
	},
	{
	check: 'rights:admin',
	label: 'user_card.admin_menu.revoke_admin',
	conditions: ['property:local', 'state:activated'],
	},
	{
	separator: true,
	},
	{
	check: FORCE_NSFW,
	label: 'user_card.admin_menu.force_nsfw',
	},
	{
	check: STRIP_MEDIA,
	label: 'user_card.admin_menu.strip_media',
	},
	{
	check: FORCE_UNLISTED,
	label: 'user_card.admin_menu.force_unlisted',
	},
	{
	check: SANDBOX,
	label: 'user_card.admin_menu.sandbox',
	},
	{
	check: DISABLE_ANY_SUBSCRIPTION,
	conditions: ['property:local'],
	label: 'user_card.admin_menu.disable_any_subscription',
	},
	{
	check: DISABLE_REMOTE_SUBSCRIPTION,
	conditions: ['property:local'],
	label: 'user_card.admin_menu.disable_remote_subscription',
	},
	{
	check: QUARANTINE,
	conditions: ['property:local'],
	label: 'user_card.admin_menu.quarantine',
	},
	{
	separator: true,
	},
	{
	check: 'action:delete',
	label: 'user_card.admin_menu.delete_account',
	},
	]

	const ModerationTools = {
	props: {
	users: {
	type: Array,
	required: true,
	},
	},
	created() {
	if (this.users.length !== 1) return
	useAdminSettingsStore().getUserData({ user: this.users[0] })
	},
	data() {
	return {
	open: false,
	confirmDialogShow: false,
	confirmDialogTitle: null,
	confirmDialogContent: null,
	confirmDialogConfirm: null,
	confirmDialogAction: null,
	confirmDialogGroup: null,
	confirmDialogName: null,
	}
	},
	components: {
	ConfirmModal,
	Popover,
	},
	computed: {
	ready() {
	return this.users.every((u) => u.adminData)
	},
	entries() {
	return ENTRIES.map(({ check, label, separator, conditions }) => {
	if (separator) return 'separator'
	const [, negateToken, group, name] =
	/^([!~]?)([a-z-_]+):([a-z-_]+)$/.exec(check)

	const hasTag = this.tagsSet.has(`${group}:${name}`)
	const noTag = this.tagsSet.has(`!${group}:${name}`)
	const maybeTag = this.tagsSet.has(`~${group}:${name}`)

	// We are checking for condition to show element, i.e. only show "activate" if user is "deactivated"
	const checkNegated = negateToken === '!' \|\| negateToken === '~'

	// Naturally, new value should also be the same
	const value = checkNegated

	const action = (() => {
	switch (group) {
	case 'rights':
	return () => this.setRight(name, value)
	case 'state':
	return () => this.setStatus(name, value)
	case 'mrf_tag':
	return () => this.setTag(`${group}:${name}`, noTag)
	case 'action': {
	switch (name) {
	case 'delete':
	return () => this.deleteUsers()
	case 'resend_confirmation':
	return () => this.resendConfirmationEmail()
	case 'disable_mfa':
	return () => this.disableMFA()
	case 'statuses':
	return () =>
	this.$router.push(`/users/\$${this.users[0].id}/admin_view`)
	case 'require_password_change':
	return () => this.requirePasswordChange()
	default:
	throw new Error(`Unknown action group: ${name}`)
	}
	}
	default:
	throw new Error(`Unknown moderation group: ${group}`)
	}
	})()

	let checkboxClass = ''
	if (maybeTag) {
	checkboxClass = 'menu-checkbox-indeterminate'
	} else if (hasTag) {
	checkboxClass = 'menu-checkbox-checked'
	}

	return {
	check,
	negateToken,
	checkbox: group === 'mrf_tag',
	checkboxClass,
	conditions,
	group,
	name,
	action,
	label,
	value,
	}
	})
	.filter((entry) => {
	if (entry === 'separator') return true
	const { group, name, value, conditions } = entry

	if (conditions) {
	// Checking that all items match positive criteria
	const positive = conditions.every((condition) =>
	this.totalSet.has(condition),
	)
	// Checking that there are no items that don't match criteria
	const negative = conditions.some((condition) =>
	this.totalSet.has('!' + condition),
	)
	if (!(positive && !negative)) return false
	}

	switch (group) {
	case 'action':
	if (name === 'statuses') return this.privileged('users_read')
	else return true
	case 'rights':
	return this.canGrantRole(name, value)
	case 'state':
	return this.canChangeState(name, value)
	case 'mrf_tag':
	return this.canUseTagPolicy
	default: {
	throw new Error(`Unknown moderation group: ${group}`)
	}
	}
	})
	.reduce((acc, entry, index) => {
	// Removing any double separators as well
	// as separators at very end and bery beginning
	if (entry === 'separator') {
	if (
	acc.length === 0 \|\|
	last(acc) === 'separator' \|\|
	index === ENTRIES.length - 1
	) {
	return acc
	}
	}
	return [...acc, entry]
	}, [])
	},
	rightsSet() {
	return this.users.reduce((acc, user) => {
	if (user.rights.admin) {
	acc.add('rights:admin')
	} else {
	acc.add('!rights:admin')
	}
	if (user.rights.moderator) {
	acc.add('rights:moderator')
	} else {
	acc.add('!rights:moderator')
	}
	return acc
	}, new Set())
	},
	stateSet() {
	return this.users.reduce((acc, user) => {
	if (!user.deactivated) {
	acc.add('state:activated')
	} else {
	acc.add('!state:activated')
	}
	if (user.adminData?.is_confirmed) {
	acc.add('state:confirmed')
	} else {
	acc.add('!state:confirmed')
	}
	if (user.adminData?.is_approved) {
	acc.add('state:approved')
	} else {
	acc.add('!state:approved')
	}
	if (user.adminData?.is_suggested) {
	acc.add('state:suggested')
	} else {
	acc.add('!state:suggested')
	}
	return acc
	}, new Set())
	},
	tagsSet() {
	const present = new Set()
	const missing = new Set()

	this.users.forEach((user) => {
	TAGS.forEach((tag) => {
	if (user.tags.has(tag)) {
	present.add(tag)
	} else {
	missing.add(tag)
	}
	})
	})

	const result = new Set()

	// Each tag can have three states for given group of users
	TAGS.forEach((tag) => {
	if (present.has(tag) && missing.has(tag)) {
	// Some users have tag, some don't: "~tag"
	result.add(`~${tag}`)
	} else if (missing.has(tag)) {
	// No users have tag: "!tag"
	result.add(`!${tag}`)
	} else {
	// All users have tag: "tag"
	result.add(tag)
	}
	})

	return result
	},
	propertySet() {
	return this.users.reduce((acc, user) => {
	if (user.is_local) {
	acc.add('property:local')
	} else {
	acc.add('!property:local')
	}
	return acc
	}, new Set())
	},
	disabled() {
	return !this.ready \|\| this.users.length === 0
	},
	totalSet() {
	return new Set([
	...this.rightsSet,
	...this.stateSet,
	...this.tagsSet,
	...this.propertySet,
	`count:${this.users.length}`,
	])
	},
	canDeleteAccount() {
	return this.privileged('users_delete')
	},
	canUseTagPolicy() {
	return (
	useInstanceCapabilitiesStore().tagPolicyAvailable &&
	this.privileged('users_manage_tags')
	)
	},
	isAdmin() {
	- return this.$store.state.users.currentUser.role === 'admin'
	+ return useUsersStore().currentUser.role === 'admin'
	},
	},
	methods: {
	canGrantRole(name, value) {
	const setEntry = `${value ? '!' : ''}rights:${name}`

	return this.isAdmin && this.totalSet.has(setEntry)
	},
	canChangeState(name, value) {
	const setEntry = `${value ? '!' : ''}state:${name}`
	const privilege = (() => {
	switch (name) {
	case 'activated':
	return 'users_manage_activation_state'
	case 'approved':
	return 'users_manage_invites'
	case 'confirmed':
	return 'users_manage_credentials'
	default:
	return null
	}
	})()

	return this.privileged(privilege) && this.totalSet.has(setEntry)
	},
	doConfirmDialogAction() {
	if (typeof this.confirmDialogAction !== 'function') {
	console.error('Confirm Dialog action is not a function!!')
	}

	this.confirmDialogAction()
	this.clearConfirmDialog()
	},
	clearConfirmDialog() {
	this.confirmDialogShow = false
	this.confirmDialogTitle = null
	this.confirmDialogContent = null
	this.confirmDialogContent2 = null
	this.confirmDialogDanger = false
	this.confirmDialogConfirm = null
	this.confirmDialogAction = null
	this.confirmDialogGroup = null
	this.confirmDialogName = null
	},
	privileged(privilege) {
	if (this.isAdmin) return true
	- return this.$store.state.users.currentUser.privileges.has(privilege)
	+ return useUsersStore().currentUser.privileges.has(privilege)
	},
	setTag(tag, value) {
	useAdminSettingsStore().setUsersTags({
	users: this.users,
	value,
	tags: [tag],
	})
	},
	setRight(right, value) {
	useAdminSettingsStore().setUsersRight({ users: this.users, value, right })
	},
	setStatus(name, value) {
	const noun = (() => {
	switch (name) {
	case 'activated':
	return 'Activation'
	case 'confirmed':
	return 'Confirmation'
	case 'approved':
	return 'Approval'
	case 'suggested':
	return 'Suggestion'
	}
	})()

	useAdminSettingsStore()[`setUsers${noun}Status`]({
	users: this.users,
	value,
	})
	},
	resendConfirmationEmail() {
	useAdminSettingsStore().resendConfirmationEmail({ users: this.users })
	},
	requirePasswordChange() {
	useAdminSettingsStore().requirePasswordChange({ users: this.users })
	},
	disableMFA() {
	this.users.forEach((user) => {
	useAdminSettingsStore().disableMFA({ user })
	})
	},
	deleteUsers() {
	const { id, name } = this.users[0]

	useAdminSettingsStore()
	.deleteUsers({ users: this.users })
	.then((userIds) => {
	if (userIds.length > 1) return

	const isProfile =
	this.$route.name === 'external-user-profile' \|\|
	this.$route.name === 'user-profile'
	const isTargetUser =
	this.$route.params.name === name \|\| this.$route.params.id === id

	if (isProfile && isTargetUser) {
	window.history.back()
	}
	})
	},
	setOpen(value) {
	this.open = value
	},
	maybeShowConfirm(close, { group, name, action, value }) {
	close()
	this.confirmDialogName = name
	this.confirmDialogGroup = group
	this.confirmDialogAction = () => action()

	switch (group) {
	case 'action': {
	switch (name) {
	case 'delete': {
	this.confirmDialogShow = true
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.delete_title',
	)
	this.confirmDialogDanger = true
	this.confirmDialogContent =
	'user_card.admin_menu.confirm_modal.delete_content'
	this.confirmDialogContent2 =
	'user_card.admin_menu.confirm_modal.delete_content_2'
	this.confirmDialogConfirm = this.$t(
	'user_card.admin_menu.confirm_modal.delete',
	)
	break
	}
	case 'resend_confirmation': {
	this.confirmDialogShow = true
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.resend_confirmation_title',
	)
	this.confirmDialogContent =
	'user_card.admin_menu.confirm_modal.resend_confirmation_content'
	this.confirmDialogConfirm = this.$t(
	'user_card.admin_menu.confirm_modal.send',
	)
	break
	}
	case 'disable_mfa': {
	this.confirmDialogShow = true
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.disable_mfa_title',
	)
	this.confirmDialogContent =
	'user_card.admin_menu.confirm_modal.disable_mfa_content'
	this.confirmDialogConfirm = this.$t('settings.confirm')
	break
	}
	case 'require_password_change': {
	this.confirmDialogShow = true
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.require_password_change_title',
	)
	this.confirmDialogContent =
	'user_card.admin_menu.confirm_modal.require_password_change_content'
	this.confirmDialogConfirm = this.$t('settings.confirm')
	break
	}
	}
	break
	}
	case 'state': {
	switch (name) {
	case 'activated': {
	this.confirmDialogShow = true

	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.activate_title',
	)
	this.confirmDialogContent = value
	? 'user_card.admin_menu.confirm_modal.activate_content'
	: 'user_card.admin_menu.confirm_modal.deactivate_content'
	this.confirmDialogConfirm = value
	? this.$t('user_card.admin_menu.confirm_modal.activate')
	: this.$t('user_card.admin_menu.confirm_modal.deactivate')
	break
	}
	// Confirmation and Approval statuses cannot be revokedn(no API)
	case 'confirmed': {
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.confirm_title',
	)
	this.confirmDialogContent = //value
	/?/ 'user_card.admin_menu.confirm_modal.confirm_content'
	//: 'user_card.admin_menu.confirm_modal.confirm_revoke_content'
	this.confirmDialogConfirm = value
	/?/ this.$t('user_card.admin_menu.confirm_modal.confirm')
	//: this.$t('user_card.admin_menu.confirm_modal.revoke')
	break
	}
	case 'approved': {
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.approval_title',
	)
	this.confirmDialogContent = //value
	/?/ 'user_card.admin_menu.confirm_modal.approval_content'
	//: 'user_card.admin_menu.confirm_modal.approval_revoke_content'
	this.confirmDialogConfirm = value
	/?/ this.$t('user_card.admin_menu.confirm_modal.approve')
	//: this.$t('user_card.admin_menu.confirm_modal.revoke')
	break
	}
	case 'suggested': {
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.suggest_title',
	)
	this.confirmDialogContent = value
	? 'user_card.admin_menu.confirm_modal.add_suggest_content'
	: 'user_card.admin_menu.confirm_modal.remove_suggest_content'
	this.confirmDialogConfirm = value
	? this.$t('user_card.admin_menu.confirm_modal.add')
	: this.$t('user_card.admin_menu.confirm_modal.remove')
	break
	}
	}
	break
	}
	case 'rights': {
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.confirm_modal.user_rights_title',
	)
	this.confirmDialogContent = value
	? 'user_card.admin_menu.confirm_modal.grant_role_content'
	: 'user_card.admin_menu.confirm_modal.revoke_role_content'
	this.confirmDialogConfirm = value
	? this.$t('user_card.admin_menu.confirm_modal.grant')
	: this.$t('user_card.admin_menu.confirm_modal.revoke')
	break
	}
	case 'mrf_tag': {
	this.confirmDialogTitle = this.$t(
	'user_card.admin_menu.user_tag_title',
	)
	this.confirmDialogContent = value
	? 'user_card.admin_menu.confirm_modal.assign_tag_content'
	: 'user_card.admin_menu.confirm_modal.unassign_tag_content'
	this.confirmDialogConfirm = value
	? this.$t('user_card.admin_menu.confirm_modal.assign')
	: this.$t('user_card.admin_menu.confirm_modal.unassign')
	break
	}
	}

	if (this.users.length > 1) {
	this.confirmDialogShow = true
	}

	if (!this.confirmDialogShow) {
	this.doConfirmDialogAction()
	}
	},
	},
	}

	export default ModerationTools
	diff --git a/src/components/mute_card/mute_card.js b/src/components/mute_card/mute_card.js
	index 0d247930af..441c28f1c8 100644
	--- a/src/components/mute_card/mute_card.js
	+++ b/src/components/mute_card/mute_card.js
	@@ -1,41 +1,43 @@
	import BasicUserCard from 'src/components/basic_user_card/basic_user_card.vue'
	import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'

	+import { useUsersStore } from 'src/stores/users.js'
	+
	const MuteCard = {
	props: ['userId'],
	computed: {
	user() {
	- return this.$store.getters.findUser(this.userId)
	+ return useUsersStore().findUser(this.userId)
	},
	relationship() {
	- return this.$store.getters.relationship(this.userId)
	+ return useUsersStore().relationship(this.userId)
	},
	muted() {
	return this.relationship.muting
	},
	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(),
	])
	},
	},
	components: {
	BasicUserCard,
	UserTimedFilterModal,
	},
	methods: {
	unmuteUser() {
	this.$store.dispatch('unmuteUser', this.userId)
	},
	muteUser() {
	this.$refs.timedMuteDialog.optionallyPrompt()
	},
	},
	}

	export default MuteCard
	diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
	index 5a4a78ec48..3e88ea564c 100644
	--- a/src/components/nav_panel/nav_panel.js
	+++ b/src/components/nav_panel/nav_panel.js
	@@ -1,170 +1,171 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

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

	import { useAnnouncementsStore } from 'src/stores/announcements'
	import { useChatsStore } from 'src/stores/chats.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

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

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

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

	import { useAnnouncementsStore } from 'src/stores/announcements.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

	library.add(faThumbtack)

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

	export default NavigationEntry
	diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
	index c3649e4b38..d1be738198 100644
	--- a/src/components/navigation/navigation_pins.js
	+++ b/src/components/navigation/navigation_pins.js
	@@ -1,127 +1,128 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	import {
	filterNavigation,
	getBookmarkFolderEntries,
	getListEntries,
	} from 'src/components/navigation/filter.js'
	import {
	ROOT_ITEMS,
	routeTo,
	TIMELINES,
	} from 'src/components/navigation/navigation.js'

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

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

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

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

	export default NavPanel
	diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
	index 1bfe540a0b..b641600ef0 100644
	--- a/src/components/notification/notification.js
	+++ b/src/components/notification/notification.js
	@@ -1,238 +1,237 @@
	+import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'
	-import { mapState } from 'vuex'

	import Report from 'src/components/report/report.vue'
	import StatusContent from 'src/components/status_content/status_content.vue'
	import Timeago from 'src/components/timeago/timeago.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserLink from 'src/components/user_link/user_link.vue'
	import UserPopover from 'src/components/user_popover/user_popover.vue'
	import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
	import {
	highlightClass,
	highlightStyle,
	} from '../../services/user_highlighter/user_highlighter.js'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useUserHighlightStore } from 'src/stores/user_highlight.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import { approveUser, denyUser } from 'src/api/user.js'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faCheck,
	faCompressAlt,
	faExpandAlt,
	faEyeSlash,
	faRetweet,
	faStar,
	faSuitcaseRolling,
	faTimes,
	faUser,
	faUserPlus,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faCheck,
	faTimes,
	faStar,
	faRetweet,
	faUserPlus,
	faUser,
	faEyeSlash,
	faSuitcaseRolling,
	faExpandAlt,
	faCompressAlt,
	)

	const Notification = {
	data() {
	return {
	selecting: false,
	statusExpanded: false,
	unmuted: false,
	showingApproveConfirmDialog: false,
	showingDenyConfirmDialog: false,
	}
	},
	props: ['notification'],
	emits: ['interacted'],
	components: {
	StatusContent,
	UserAvatar,
	Timeago,

	Report,

	UserPopover,
	UserLink,
	ConfirmModal: defineAsyncComponent(
	() => import('src/components/confirm_modal/confirm_modal.vue'),
	),
	},
	mounted() {
	document.addEventListener('selectionchange', this.onContentSelect)
	},
	unmounted() {
	document.removeEventListener('selectionchange', this.onContentSelect)
	},
	methods: {
	toggleStatusExpanded() {
	if (!this.expandable) return
	this.statusExpanded = !this.statusExpanded
	},
	onContentSelect() {
	const { isCollapsed, anchorNode, offsetNode } = document.getSelection()
	if (isCollapsed) {
	this.selecting = false
	return
	}
	const within =
	this.$refs.root.contains(anchorNode) \|\|
	this.$refs.root.contains(offsetNode)
	if (within) {
	this.selecting = true
	} else {
	this.selecting = false
	}
	},
	onContentClick(e) {
	if (
	!this.selecting &&
	!e.target.closest('a') &&
	!e.target.closest('button')
	) {
	this.toggleStatusExpanded()
	}
	},
	generateUserProfileLink(user) {
	return generateProfileLink(
	user.id,
	user.screen_name,
	useInstanceStore().restrictedNicknames,
	)
	},
	getUser(notification) {
	return this.$store.state.users.usersObject[notification.from_profile.id]
	},
	interacted() {
	this.$emit('interacted')
	},
	toggleMute() {
	this.unmuted = !this.unmuted
	},
	showApproveConfirmDialog() {
	this.showingApproveConfirmDialog = true
	},
	hideApproveConfirmDialog() {
	this.showingApproveConfirmDialog = false
	},
	showDenyConfirmDialog() {
	this.showingDenyConfirmDialog = true
	},
	hideDenyConfirmDialog() {
	this.showingDenyConfirmDialog = false
	},
	approveUser() {
	if (this.shouldConfirmApprove) {
	this.showApproveConfirmDialog()
	} else {
	this.doApprove()
	}
	},
	doApprove() {
	approveUser({
	id: this.user.id,
	credentials: useOAuthStore().token,
	})
	this.$store.dispatch('removeFollowRequest', this.user)
	this.$store.dispatch('markSingleNotificationAsSeen', {
	id: this.notification.id,
	})
	this.$store.dispatch('updateNotification', {
	id: this.notification.id,
	updater: (notification) => {
	notification.type = 'follow'
	},
	})
	this.hideApproveConfirmDialog()
	},
	denyUser() {
	if (this.shouldConfirmDeny) {
	this.showDenyConfirmDialog()
	} else {
	this.doDeny()
	}
	},
	doDeny() {
	denyUser({
	id: this.user.id,
	credentials: useOAuthStore().token,
	}).then(() => {
	this.$store.dispatch('dismissNotificationLocal', {
	id: this.notification.id,
	})
	this.$store.dispatch('removeFollowRequest', this.user)
	})
	this.hideDenyConfirmDialog()
	},
	},
	computed: {
	userClass() {
	return highlightClass(this.notification.from_profile)
	},
	userStyle() {
	const user = this.notification.from_profile.screen_name
	return highlightStyle(useUserHighlightStore().get(user))
	},
	expandable() {
	return new Set(['like', 'pleroma:emoji_reaction', 'repeat', 'poll']).has(
	this.notification.type,
	)
	},
	user() {
	- return this.$store.getters.findUser(this.notification.from_profile.id)
	+ return useUsersStore().findUser(this.notification.from_profile.id)
	},
	userProfileLink() {
	return this.generateUserProfileLink(this.user)
	},
	targetUser() {
	- return this.$store.getters.findUser(this.notification.target.id)
	+ return useUsersStore().findUser(this.notification.target.id)
	},
	targetUserProfileLink() {
	return this.generateUserProfileLink(this.targetUser)
	},
	needMute() {
	- return this.$store.getters.relationship(this.user.id).muting
	+ return useUsersStore().relationship(this.user.id).muting
	},
	isStatusNotification() {
	return isStatusNotification(this.notification.type)
	},
	mergedConfig() {
	return useMergedConfigStore().mergedConfig
	},
	allowNonSquareEmoji() {
	return this.mergedConfig.nonSquareEmoji
	},
	pauseMfm() {
	return this.mergedConfig.pauseMfm
	},
	scaleMfm() {
	return this.mergedConfig.scaleMfm
	},
	shouldConfirmApprove() {
	return this.mergedConfig.modalOnApproveFollow
	},
	shouldConfirmDeny() {
	return this.mergedConfig.modalOnDenyFollow
	},
	- ...mapState({
	- currentUser: (state) => state.users.currentUser,
	- }),
	+ ...mapState(useUsersStore, ['currentUser']),
	},
	}

	export default Notification
	diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
	index feb59857e3..4eadb1657e 100644
	--- a/src/components/notifications/notifications.js
	+++ b/src/components/notifications/notifications.js
	@@ -1,273 +1,274 @@
	import { mapState } from 'pinia'
	import { computed } from 'vue'

	import ExtraNotifications from 'src/components/extra_notifications/extra_notifications.vue'
	import Notification from 'src/components/notification/notification.vue'
	import FaviconService from '../../services/favicon_service/favicon_service.js'
	import {
	ACTIONABLE_NOTIFICATION_TYPES,
	countExtraNotifications,
	filteredNotificationsFromStore,
	notificationsFromStore,
	unseenNotificationsFromStore,
	} from '../../services/notification_utils/notification_utils.js'
	import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
	import NotificationFilters from './notification_filters.vue'

	import { useAnnouncementsStore } from 'src/stores/announcements.js'
	import { useChatsStore } from 'src/stores/chats.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

	library.add(faCircleNotch, faArrowUp, faMinus)

	const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30

	const Notifications = {
	components: {
	Notification,
	NotificationFilters,
	ExtraNotifications,
	},
	props: {
	// Disables panel styles, unread mark, potentially other notification-related actions
	// meant for "Interactions" timeline
	minimalMode: Boolean,
	// Custom filter mode, an array of strings, possible values 'mention', 'status', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
	filterMode: Array,
	// Do not show extra notifications
	noExtra: {
	type: Boolean,
	default: false,
	},
	// Disable teleporting (i.e. for /users/user/notifications)
	disableTeleport: Boolean,
	},
	data() {
	return {
	showScrollTop: false,
	bottomedOut: false,
	// How many seen notifications to display in the list. The more there are,
	// the heavier the page becomes. This count is increased when loading
	// older notifications, and cut back to default whenever hitting "Read!".
	seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT,
	}
	},
	provide() {
	return {
	popoversZLayer: computed(() => this.popoversZLayer),
	}
	},
	computed: {
	mainClass() {
	return this.minimalMode ? '' : 'panel panel-default'
	},
	notifications() {
	return notificationsFromStore(this.$store)
	},
	error() {
	return this.$store.state.notifications.error
	},
	unseenNotifications() {
	return unseenNotificationsFromStore(
	this.$store,
	useMergedConfigStore().mergedConfig.notificationVisibility,
	useMergedConfigStore().mergedConfig.ignoreInactionableSeen,
	)
	},
	filteredNotifications() {
	if (this.unseenAtTop) {
	return [
	...filteredNotificationsFromStore(
	this.$store,
	useMergedConfigStore().mergedConfig.notificationVisibility,
	).filter((n) => this.shouldShowUnseen(n)),
	...filteredNotificationsFromStore(
	this.$store,
	useMergedConfigStore().mergedConfig.notificationVisibility,
	).filter((n) => !this.shouldShowUnseen(n)),
	]
	} else {
	return filteredNotificationsFromStore(
	this.$store,
	useMergedConfigStore().mergedConfig.notificationVisibility,
	this.filterMode,
	)
	}
	},
	unseenCountBadgeText() {
	return `${this.unseenCount ? this.unseenCount : ''}${this.extraNotificationsCount ? '*' : ''}`
	},
	unseenCount() {
	return this.unseenNotifications.length
	},
	ignoreInactionableSeen() {
	return useMergedConfigStore().mergedConfig.ignoreInactionableSeen
	},
	extraNotificationsCount() {
	return countExtraNotifications(
	this.$store,
	useMergedConfigStore().mergedConfig,
	useChatsStore().unreadChatsCount,
	useAnnouncementsStore().unreadAnnouncementCount,
	)
	},
	unseenCountTitle() {
	return (
	this.unseenNotifications.length +
	this.unreadChatsCount +
	this.unreadAnnouncementCount
	)
	},
	loading() {
	return this.$store.state.notifications.loading
	},
	noHeading() {
	const { layoutType } = useInterfaceStore()
	return this.minimalMode \|\| layoutType === 'mobile'
	},
	teleportTarget() {
	const map = {
	wide: '#notifs-column',
	mobile: '#mobile-notifications',
	}
	return map[this.layoutType] \|\| '#notifs-sidebar'
	},
	popoversZLayer() {
	const { layoutType } = useInterfaceStore()
	return layoutType === 'mobile' ? 'navbar' : null
	},
	notificationsToDisplay() {
	return this.filteredNotifications.slice(
	0,
	this.unseenCount + this.seenToDisplayCount,
	)
	},
	noSticky() {
	return useMergedConfigStore().mergedConfig.disableStickyHeaders
	},
	unseenAtTop() {
	return useMergedConfigStore().mergedConfig.unseenAtTop
	},
	showExtraNotifications() {
	return !this.noExtra
	},
	...mapState(useAnnouncementsStore, ['unreadAnnouncementCount']),
	...mapState(useChatsStore, ['unreadChatsCount']),
	...mapState(useInterfaceStore, ['layoutType']),
	},
	mounted() {
	this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
	if (!this.scrollerRef) {
	this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
	}
	if (!this.scrollerRef) {
	this.scrollerRef = this.$refs.root.closest('.column.main')
	}
	this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
	},
	unmounted() {
	if (!this.scrollerRef) return
	this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
	},
	watch: {
	unseenCountTitle(count) {
	if (count > 0) {
	FaviconService.drawFaviconBadge()
	useInterfaceStore().setPageTitle(`(${count})`)
	} else {
	FaviconService.clearFaviconBadge()
	useInterfaceStore().setPageTitle('')
	}
	},
	teleportTarget() {
	// handle scroller change
	this.$nextTick(() => {
	this.scrollerRef.removeEventListener(
	'scroll',
	this.updateScrollPosition,
	)
	this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
	if (!this.scrollerRef) {
	this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
	}
	this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
	this.updateScrollPosition()
	})
	},
	},
	methods: {
	scrollToTop() {
	const scrollable = this.scrollerRef
	scrollable.scrollTo({ top: this.$refs.root.offsetTop })
	},
	updateScrollPosition() {
	this.showScrollTop =
	this.$refs.root.offsetTop < this.scrollerRef.scrollTop
	},
	shouldShowUnseen(notification) {
	if (notification.seen) return false

	const actionable = ACTIONABLE_NOTIFICATION_TYPES.has(notification.type)
	return this.ignoreInactionableSeen ? actionable : true
	},
	/* "Interacted" really refers to "actionable" notifications that require user input,
	* everything else (likes/repeats/reacts) cannot be acted and therefore we just clear
	* the "seen" status upon any clicks on them
	*/
	notificationClicked(notification) {
	const { id } = notification
	this.$store.dispatch('notificationClicked', { id })
	},
	notificationInteracted(notification) {
	const { id } = notification
	this.$store.dispatch('markSingleNotificationAsSeen', { id })
	},
	markAsSeen() {
	this.$store.dispatch('markNotificationsAsSeen')
	this.seenToDisplayCount = DEFAULT_SEEN_TO_DISPLAY_COUNT
	},
	fetchOlderNotifications() {
	if (this.loading) {
	return
	}

	const seenCount = this.filteredNotifications.length - this.unseenCount
	if (this.seenToDisplayCount < seenCount) {
	this.seenToDisplayCount = Math.min(
	this.seenToDisplayCount + 20,
	seenCount,
	)
	return
	} else if (this.seenToDisplayCount > seenCount) {
	this.seenToDisplayCount = seenCount
	}

	const store = this.$store
	- const credentials = store.state.users.currentUser.credentials
	+ const credentials = useUsersStore().currentUser.credentials
	store.commit('setNotificationsLoading', { value: true })
	notificationsFetcher
	.fetchAndUpdate({
	store,
	credentials,
	older: true,
	})
	.then((notifs) => {
	store.commit('setNotificationsLoading', { value: false })
	if (notifs.length === 0) {
	this.bottomedOut = true
	}
	this.seenToDisplayCount += notifs.length
	})
	},
	},
	}

	export default Notifications
	diff --git a/src/components/oauth_callback/oauth_callback.js b/src/components/oauth_callback/oauth_callback.js
	index 04f79425ec..bf6e03c9ea 100644
	--- a/src/components/oauth_callback/oauth_callback.js
	+++ b/src/components/oauth_callback/oauth_callback.js
	@@ -1,27 +1,29 @@
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import { getToken } from 'src/api/oauth.js'

	const oac = {
	props: ['code'],
	mounted() {
	if (this.code) {
	const oauthStore = useOAuthStore()
	const { clientId, clientSecret } = oauthStore

	getToken({
	clientId,
	clientSecret,
	instance: useInstanceStore().server,
	code: this.code,
	}).then(({ data: result }) => {
	oauthStore.setToken(result.access_token)
	- this.$store.dispatch('loginUser', result.access_token)
	+
	+ useUsersStore().loginUser(result.access_token)
	this.$router.push({ name: 'friends' })
	})
	}
	},
	}

	export default oac
	diff --git a/src/components/password_reset/password_reset.js b/src/components/password_reset/password_reset.js
	index b2e6e10933..54ad5c194b 100644
	--- a/src/components/password_reset/password_reset.js
	+++ b/src/components/password_reset/password_reset.js
	@@ -1,70 +1,68 @@
	-import { mapState as mapPiniaState } from 'pinia'
	-import { mapState } from 'vuex'
	+import { mapState } from 'pinia'

	import { useInstanceStore } from 'src/stores/instance.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

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

	library.add(faTimes)

	const passwordReset = {
	data: () => ({
	user: {
	email: '',
	},
	isPending: false,
	success: false,
	throttled: false,
	error: null,
	}),
	computed: {
	- ...mapState({
	- signedIn: (state) => !!state.users.currentUser,
	- }),
	- ...mapPiniaState(useInstanceStore, ['mailerEnabled']),
	+ ...mapState(useUsersStore, ['loggedIn']),
	+ ...mapState(useInstanceStore, ['mailerEnabled']),
	},
	created() {
	- if (this.signedIn) {
	+ if (this.loggedIn) {
	this.$router.push({ name: 'root' })
	}
	},
	props: {
	passwordResetRequested: {
	default: false,
	type: Boolean,
	},
	},
	methods: {
	dismissError() {
	this.error = null
	},
	submit() {
	this.isPending = true
	const email = this.user.email

	resetPassword({ email })
	.then(({ status }) => {
	this.isPending = false
	this.user.email = ''

	if (status === 204) {
	this.success = true
	this.error = null
	} else if (status === 429) {
	this.throttled = true
	this.error = this.$t('password_reset.too_many_requests')
	}
	})
	.catch(() => {
	this.isPending = false
	this.user.email = ''
	this.error = this.$t('general.generic_error')
	})
	},
	},
	}

	export default passwordReset
	diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js
	index 0ce304a0a3..ace31e8b8c 100644
	--- a/src/components/poll/poll.js
	+++ b/src/components/poll/poll.js
	@@ -1,129 +1,130 @@
	import Checkbox from 'components/checkbox/checkbox.vue'
	import Timeago from 'components/timeago/timeago.vue'

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

	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { usePollsStore } from 'src/stores/polls.js'
	+import { useUsersStore } from 'src/stores/users.js'

	export default {
	name: 'Poll',
	props: ['basePoll', 'emoji'],
	components: {
	Timeago,

	Checkbox,
	},
	data() {
	return {
	loading: false,
	choices: [],
	randomSeed: genRandomSeed(),
	}
	},
	created() {
	if (!usePollsStore().pollsObject[this.pollId]) {
	usePollsStore().mergeOrAddPoll(this.basePoll)
	}
	usePollsStore().trackPoll(this.pollId)
	},
	unmounted() {
	usePollsStore().untrackPoll(this.pollId)
	},
	computed: {
	pollId() {
	return this.basePoll.id
	},
	poll() {
	const storePoll = usePollsStore().pollsObject[this.pollId]
	return storePoll \|\| {}
	},
	options() {
	return this.poll?.options \|\| []
	},
	expiresAt() {
	return this.poll?.expires_at \|\| null
	},
	expired() {
	return this.poll?.expired \|\| false
	},
	expirationLabel() {
	if (useMergedConfigStore().mergedConfig.useAbsoluteTimeFormat) {
	return this.expired ? 'polls.expired_at' : 'polls.expires_at'
	} else {
	return this.expired ? 'polls.expired' : 'polls.expires_in'
	}
	},
	allowNonSquareEmoji() {
	return useMergedConfigStore().mergedConfig.nonSquareEmoji
	},
	pauseMfm() {
	return useMergedConfigStore().mergedConfig.pauseMfm
	},
	scaleMfm() {
	return useMergedConfigStore().mergedConfig.scaleMfm
	},
	loggedIn() {
	- return this.$store.state.users.currentUser
	+ return useUsersStore().currentUser
	},
	showResults() {
	return this.poll.voted \|\| this.expired \|\| !this.loggedIn
	},
	totalVotesCount() {
	return this.poll.votes_count
	},
	containerClass() {
	return {
	loading: this.loading,
	}
	},
	choiceIndices() {
	// Convert array of booleans into an array of indices of the
	// items that were 'true', so [true, false, false, true] becomes
	// [0, 3].
	return this.choices
	.map((entry, index) => entry && index)
	.filter((value) => typeof value === 'number')
	},
	isDisabled() {
	const noChoice = this.choiceIndices.length === 0
	return this.loading \|\| noChoice
	},
	},
	methods: {
	percentageForOption(count) {
	return this.totalVotesCount === 0
	? 0
	: Math.round((count / this.totalVotesCount) * 100)
	},
	resultTitle(option) {
	return `${option.votes_count}/${this.totalVotesCount} ${this.$t('polls.votes')}`
	},
	activateOption(index, value) {
	let result
	if (this.poll.multiple) {
	result = this.choices \|\| this.options.map(() => false)
	} else {
	result = this.options.map(() => false)
	}
	result[index] = value
	this.choices = result
	},
	optionId(index) {
	return `poll${this.poll.id}-${index}`
	},
	vote() {
	if (this.choiceIndices.length === 0) return
	this.loading = true
	usePollsStore()
	.votePoll({
	id: this.statusId,
	pollId: this.poll.id,
	choices: this.choiceIndices,
	})
	.then(() => {
	this.loading = false
	})
	},
	},
	}
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index f36987efb2..6dc00a1e2a 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,1098 +1,1099 @@
	import {
	debounce,
	isEqual,
	unescape as ldUnescape,
	reject,
	uniqBy,
	} from 'lodash'
	import { mapActions, mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import Attachment from 'src/components/attachment/attachment.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import DraftCloser from 'src/components/draft_closer/draft_closer.vue'
	import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
	import suggestor from 'src/components/emoji_input/suggestor.js'
	import Gallery from 'src/components/gallery/gallery.vue'
	import MediaUpload from 'src/components/media_upload/media_upload.vue'
	import Popover from 'src/components/popover/popover.vue'
	import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
	import Select from 'src/components/select/select.vue'
	import StatusContent from 'src/components/status_content/status_content.vue'
	import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
	import genRandomSeed from '../../services/random_seed/random_seed.service.js'
	import statusPoster from '../../services/status_poster/status_poster.service.js'

	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMediaViewerStore } from 'src/stores/media_viewer.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import { pollFormToMasto } from 'src/services/poll/poll.service.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBan,
	faChevronDown,
	faChevronLeft,
	faChevronRight,
	faCircleNotch,
	faPollH,
	faQuoteRight,
	faSmileBeam,
	faTimes,
	faUpload,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSmileBeam,
	faPollH,
	faUpload,
	faQuoteRight,
	faBan,
	faTimes,
	faCircleNotch,
	faChevronDown,
	faChevronLeft,
	faChevronRight,
	)

	// Converts a string with px to a number like '2px' -> 2
	const pxStringToNumber = (str) => {
	return Number(str.substring(0, str.length - 2))
	}

	const PostStatusForm = {
	props: {
	// Status editing stuff
	statusId: String,
	statusText: String,
	statusSubject: String,
	statusIsSensitive: {
	type: Boolean,
	required: false,
	default: null, // Avoiding automatic conversion null -> false
	},
	statusPoll: Object,
	statusQuote: Object,
	statusFiles: Array,
	statusMediaDescriptions: Object,
	statusVisibility: String,
	statusContentType: String,

	// Replies/mentions
	repliedStatus: Object, // Object of a status replying to
	profileMention: Object, // Mentioned user (used in profile page -> mention)

	// Draft stuff
	hideDraft: Boolean, // Disable drafts functionality
	closeable: Boolean, // Whether form can be closed (i.e. in replies)
	draftId: String, // ID of the draft to be used

	// Chats stuff
	chatView: Boolean, // Used for the "submit on enter" user setting
	maxHeight: Number,
	placeholder: String,
	postHandler: Function, // Used to override poster to use chats one instead of status one
	preserveFocus: Boolean, // Keep focus on form after posting
	autoFocus: Boolean, // Steal focus when form is opened
	fileLimit: Number, // Chats only support 1 attachment :(
	emojiPickerPlacement: String,
	optimisticPosting: Boolean, // Don't wait for confirmation that post is done

	// Feature toggles for special cases (mostly chats)
	mentionsLine: Boolean, // Use separate field for specifying mentions
	mentionsLineReadOnly: Boolean, // Make the said field read-only (for chat conversation view)
	disableSubject: Boolean,
	disableScopeSelector: Boolean,
	disableVisibilitySelector: Boolean,
	disableNotice: Boolean,
	disableLockWarning: Boolean,
	disablePolls: Boolean,
	disableQuotes: Boolean,
	disableSensitivityCheckbox: Boolean,
	disableSubmit: Boolean,
	disablePreview: Boolean,
	disableDraft: Boolean,
	},
	emits: [
	'posted',
	'draft-done',
	'resize',
	'mediaplay',
	'mediapause',
	'close-accepted',
	'update',
	],
	data() {
	return {
	initialized: false,
	randomSeed: genRandomSeed(),
	// Posting stuff
	idempotencyKey: '',
	/* Data is initialized first, but we have no access to .computed yet
	* which we need for some defaults (i.e. user configration)
	* so we pre-fill with stuff meant for status editing and later
	* back-fill with defaults in .created()
	*/
	newStatus: {
	status: this.statusText ?? null,
	mentions: this.statusMentionLine ?? null,
	spoilerText: this.statusSubject ?? null,
	quote: this.statusQuote ?? null,
	files: this.statusFiles ?? null,
	poll: this.statusPoll ?? null,
	mediaDescriptions: this.statusMediaDescriptions ?? null,
	nsfw: this.statusIsSensitive ?? null,
	visibility: this.statusVisibility ?? null,
	contentType: this.statusContentType ?? null,
	},

	// Attachments
	dropFiles: [],
	uploadingFiles: false,
	showDropIcon: 'hide',
	dropStopTimeout: null,

	// Preview
	preview: null,
	previewLoading: false,

	// Draft
	saveInhibited: true,
	saveable: false,

	// Misc States
	emojiInputShown: false,
	error: null,
	posting: false,
	}
	},
	components: {
	MediaUpload,
	EmojiInput,
	PollForm: defineAsyncComponent(
	() => import('src/components/poll/poll_form.vue'),
	),
	QuoteForm: defineAsyncComponent(
	() => import('src/components/quote/quote_form.vue'),
	),
	ScopeSelector,
	Checkbox,
	Select,
	Attachment,
	StatusContent,
	Gallery,
	DraftCloser,
	Popover,
	},
	created() {
	this.updateIdempotencyKey()

	// If we are starting a new post, do not associate it with old drafts
	const draft =
	!this.disableDraft && (this.draftId \|\| this.statusType !== 'new')
	? this.getDraft(this.statusType, this.refId)
	: null

	if (draft) {
	// Copying and overriding defaults from the draft for each field
	Object.keys(this.newStatus).forEach((key) => {
	this.newStatus[key] = draft[key] ?? this.newStatus[key]
	})
	} else {
	Object.entries(this.defaultNewStatus).forEach(([key, value]) => {
	this.newStatus[key] = this.newStatus[key] ?? value
	})
	}

	this.initialized = true
	},
	mounted() {
	this.resize(this.$refs.textarea)

	if (this.repliedStatus) {
	const textLength = this.$refs.textarea.value.length
	this.$refs.textarea.setSelectionRange(textLength, textLength)
	}

	if (this.repliedStatus \|\| this.autoFocus) {
	this.$refs.textarea.focus()
	}
	},
	computed: {
	// Visibility / expansion state of subcomponents
	pollFormVisible() {
	return this.hasPoll
	},
	quoteFormVisible() {
	return this.hasQuote && !this.newStatus.quote.thread
	},
	showPreview() {
	return !this.disablePreview && (!!this.preview \|\| this.previewLoading)
	},

	// Composing stuff
	statusType() {
	if (this.repliedStatus) {
	return 'reply'
	} else if (this.profileMention) {
	return 'mention'
	} else if (this.statusId) {
	return 'edit'
	} else {
	return 'new'
	}
	},
	refId() {
	if (this.repliedStatus) {
	return this.repliedStatus.id
	} else if (this.profileMention) {
	return this.profileMention.id
	} else if (this.statusId) {
	return this.statusId
	} else {
	return null
	}
	},
	mentionsString() {
	if (this.statusType !== 'reply' && this.statusType !== 'mention')
	return ''
	let allAttentions = [...(this.repliedStatus?.attentions \|\| [])]
	const repliedUser = this.repliedStatus?.user \|\| this.profileMention

	if (repliedUser) allAttentions.unshift(repliedUser)

	allAttentions = uniqBy(allAttentions, 'id')
	allAttentions = reject(allAttentions, { id: this.currentUser.id })

	const mentions = allAttentions.map(
	(attention) => `@${attention.screen_name}`,
	)

	return mentions.length > 0 ? mentions.join(' ') + ' ' : ''
	},
	newStatusContent() {
	return this.mentionsLine
	? this.mentionsString + this.newStatus.status
	: this.newStatus.status
	},
	defaultNewStatus() {
	const defaultNewStatus = {
	files: [],
	poll: null,
	quote: null,
	mediaDescriptions: {},
	}

	const scope = (() => {
	if (this.repliedStatus) {
	if (this.repliedStatus.visibility === 'direct') return 'direct'
	if (this.userDefaultScopeCopy) return this.repliedStatus.visibility
	}
	return this.userDefaultScope
	})()

	const preset = this.$route.query.message
	const statusText = preset ?? ''

	if (this.mentionsLine) {
	defaultNewStatus.status = statusText
	} else {
	defaultNewStatus.status = this.mentionsString + statusText
	}

	defaultNewStatus.mentions = this.mentionsString.trim()
	defaultNewStatus.spoilerText = this.repliedSubjectString ?? ''
	defaultNewStatus.nsfw = this.userDefaultSensitive
	defaultNewStatus.visibility = scope
	defaultNewStatus.contentType = this.userDefaultPostContentType

	return defaultNewStatus
	},
	// -Edit
	isEdit() {
	return this.statusId !== undefined && this.statusId.trim() !== ''
	},
	// -Reply
	isReply() {
	return this.statusType === 'reply'
	},
	inReplyToStatusId() {
	return !this.hasQuote \|\|
	!this.newStatus.quote.thread \|\|
	!this.newStatus.quote.id
	? this.repliedStatus?.id
	: undefined
	},
	repliedSubjectString() {
	if (!this.repliedStatus?.summary) return null
	const decodedSummary = ldUnescape(this.repliedStatus.summary)
	const behavior = this.mergedConfig.subjectLineBehavior
	const startsWithRe = decodedSummary.match(/^re[: ]/i)
	if ((behavior !== 'noop' && startsWithRe) \|\| behavior === 'masto') {
	return decodedSummary
	} else if (behavior === 'email') {
	return 're: '.concat(decodedSummary)
	} else if (behavior === 'noop') {
	return ''
	}
	},
	// -Poll
	hasPoll() {
	return this.newStatus.poll != null
	},
	// -Quotes
	hasQuote() {
	return this.newStatus.quote !== null
	},
	quotable() {
	if (!this.quotingAvailable \|\| !this.isReply) {
	return false
	}

	if (
	this.repliedStatus.visibility === 'public' \|\|
	this.repliedStatus.visibility === 'unlisted' \|\|
	this.repliedStatus.visibility === 'local'
	) {
	return true
	} else if (this.repliedStatus.visibility === 'private') {
	return this.repliedStatus.user.id === this.currentUser.id
	}

	return false
	},
	quoteId() {
	return this.newStatus.quote?.id ?? null
	},
	// This is for "reply/quote" toggle
	quoteThreadToggled: {
	get() {
	return this.newStatus.quote?.thread
	},
	set(value) {
	if (value) {
	this.newStatus.quote = {}
	this.newStatus.quote.thread = true
	this.newStatus.quote.id = this.repliedStatus.id
	} else {
	this.newStatus.quote = null
	}
	},
	},
	postingOptions() {
	const poll = this.hasPoll ? pollFormToMasto(this.newStatus.poll) : null

	return {
	status: this.newStatusContent,
	spoilerText: this.newStatus.spoilerText,
	visibility: this.newStatus.visibility,
	sensitive: this.newStatus.nsfw,
	media: this.newStatus.files,
	inReplyToStatusId: this.inReplyToStatusId,
	quoteId: this.quoteId,
	contentType: this.newStatus.contentType,
	poll,
	idempotencyKey: this.idempotencyKey,

	store: this.$store,
	}
	},

	// Emoji stuff
	emojiUserSuggestor() {
	return suggestor({
	emoji: [
	...useEmojiStore().standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	store: this.$store,
	})
	},
	emojiSuggestor() {
	return suggestor({
	emoji: [
	...useEmojiStore().standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	})
	},
	emoji() {
	return useEmojiStore().standardEmojiList
	},
	customEmoji() {
	return useEmojiStore().customEmoji
	},

	// Length & Limits
	statusLength() {
	return this.newStatusContent.length
	},
	spoilerTextLength() {
	return this.newStatus.spoilerText.length
	},
	statusLengthLimit() {
	return useInstanceStore().limits.textLimit
	},
	hasStatusLengthLimit() {
	return this.statusLengthLimit > 0
	},
	charactersLeft() {
	return (
	this.statusLengthLimit - (this.statusLength + this.spoilerTextLength)
	)
	},
	isOverLengthLimit() {
	return this.hasStatusLengthLimit && this.charactersLeft < 0
	},
	isEmptyStatus() {
	return (
	this.newStatus.status.trim() === '' && this.newStatus.files.length === 0
	)
	},
	uploadFileLimitReached() {
	return this.newStatus.files.length >= this.fileLimit
	},

	// Drafts
	isDirty() {
	return Object.entries(this.defaultNewStatus).some(
	([key, defaultValue]) => {
	const actualValue = this.newStatus[key]
	if (actualValue === null) return false
	return !isEqual(actualValue, defaultValue)
	},
	)
	},
	shouldAutoSaveDraft() {
	return useMergedConfigStore().mergedConfig.autoSaveDraft
	},
	debouncedMaybeAutoSaveDraft() {
	return debounce(this.maybeAutoSaveDraft, 3000)
	},
	autoSaveState() {
	if (this.saveable) {
	return this.$t('post_status.auto_save_saving')
	} else if (this.newStatus.id) {
	return this.$t('post_status.auto_save_saved')
	} else {
	return this.$t('post_status.auto_save_nothing_new')
	}
	},
	safeToSaveDraft() {
	return (
	(this.newStatus.status \|\|
	this.newStatus.spoilerText \|\|
	this.newStatus.files.length \|\|
	this.hasPoll \|\|
	this.hasQuote) &&
	this.saveable
	)
	},
	hasEmptyDraft() {
	return (
	this.newStatus.id &&
	!(
	this.newStatus.status \|\|
	this.newStatus.spoilerText \|\|
	this.newStatus.files.length \|\|
	this.hasPoll \|\|
	this.hasQuote
	)
	)
	},

	// Error handling
	pollContentError() {
	return this.pollFormVisible && this.newStatus.poll?.error
	},

	// Featureset detection
	postFormats() {
	return useInstanceCapabilitiesStore().postFormats \|\| []
	},
	safeDMEnabled() {
	return useInstanceCapabilitiesStore().safeDM
	},
	pollsAvailable() {
	return (
	useInstanceCapabilitiesStore().pollsAvailable &&
	useInstanceStore().limits.pollLimits.max_options >= 2 &&
	this.disablePolls !== true
	)
	},
	hideExtraActions() {
	return this.disableDraft \|\| this.hideDraft
	},
	quotingAvailable() {
	if (!useInstanceCapabilitiesStore().quotingAvailable) {
	return false
	}

	return this.disableQuotes !== true
	},

	// User configuration
	userDefaultScope() {
	return this.currentUser.default_scope
	},
	userDefaultPostContentType() {
	return this.mergedConfig.postContentType
	},
	userDefaultScopeCopy() {
	return this.mergedConfig.scopeCopy
	},
	userDefaultSensitive() {
	return this.mergedConfig.sensitiveByDefault
	},
	showAllScopes() {
	return !this.mergedConfig.minimalScopesMode
	},
	minimalScopesMode() {
	return this.mergedConfig.minimalScopesMode
	},
	alwaysShowSubject() {
	return this.mergedConfig.alwaysShowSubjectInput
	},
	hideScopeNotice() {
	return (
	this.disableNotice \|\|
	useMergedConfigStore().mergedConfig.hideScopeNotice
	)
	},
	submitOnEnter() {
	return this.chatView && this.mergedConfig.chatSubmitOnEnter
	},

	// Global stuff
	currentUser() {
	- return this.$store.state.users.currentUser
	+ return useUsersStore().currentUser
	},
	...mapState(useMergedConfigStore, ['mergedConfig']),
	...mapState(useInterfaceStore, {
	mobileLayout: (store) => store.mobileLayout,
	}),
	},
	watch: {
	isDirty(newVal, oldVal) {
	this.statusChanged()
	},
	saveable(val) {
	// https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#usage_notes
	// MDN says we'd better add the beforeunload event listener only when needed, and remove it when it's no longer needed
	if (val) {
	this.addBeforeUnloadListener()
	} else {
	this.removeBeforeUnloadListener()
	}
	},
	},
	methods: {
	// Composing
	update() {
	Object.entries(this.defaultNewStatus).forEach(([key, value]) => {
	if (key === 'status') return
	this.newStatus[key] = value
	})
	},
	onMentionsLineUpdate(e) {
	if (this.mentionsLineReadOnly) return
	this.newStatus.mentions = e
	},
	changeVis(visibility) {
	this.newStatus.visibility = visibility
	},
	clearStatus() {
	this.saveInhibited = true
	this.newStatus.status = ''
	this.newStatus.mentions = ''
	this.newStatus.spoilerText = ''
	this.newStatus.files = []
	this.newStatus.poll = null
	this.newStatus.quote = null
	this.newStatus.nsfw = this.defaultNewStatus.nsfw
	this.newStatus.mediaDescriptions = {}
	this.$refs.mediaUpload?.clearFile()
	if (this.preserveFocus) {
	this.$nextTick(() => {
	this.$refs.textarea.focus()
	})
	}
	const el = this.$el.querySelector('textarea')
	el.style.height = 'auto'
	el.style.height = undefined
	this.error = null
	if (this.preview) this.previewStatus()
	this.saveable = false
	},
	async postStatus(event) {
	if (this.posting && !this.optimisticPosting) {
	return
	}
	if (this.disableSubmit) {
	return
	}
	if (this.emojiInputShown) {
	return
	}
	if (this.submitOnEnter) {
	event.stopPropagation()
	event.preventDefault()
	}

	if (
	this.optimisticPosting &&
	(this.isEmptyStatus \|\| this.isOverLengthLimit)
	) {
	return
	}

	if (this.isEmptyStatus) {
	this.error = this.$t('post_status.empty_status_error')
	return
	}

	if (this.pollContentError) {
	this.error = this.pollContentError
	return
	}

	this.posting = true

	try {
	await this.setAllMediaDescriptions()
	} catch {
	this.error = this.$t('post_status.media_description_error')
	this.posting = false
	return
	}

	const postHandler = this.postHandler
	? this.postHandler
	: statusPoster.postStatus

	postHandler(this.postingOptions)
	.then((data) => {
	this.abandonDraft()
	this.clearStatus()
	this.updateIdempotencyKey()
	this.$emit('posted', data)
	})
	.catch((error) => {
	this.error = error
	})
	.finally(() => {
	this.posting = false
	})
	},

	// Preview
	previewStatus() {
	if (this.isEmptyStatus && this.newStatus.spoilerText.trim() === '') {
	this.preview = { error: this.$t('post_status.preview_empty') }
	this.previewLoading = false
	return
	}
	this.previewLoading = true

	statusPoster
	.postStatus({
	...this.postingOptions,
	media: [],
	poll: null,
	preview: true,
	})
	.then((data) => {
	// Don't apply preview if not loading, because it means
	// user has closed the preview manually.
	if (!this.previewLoading) return
	this.preview = data
	})
	.catch((error) => {
	this.preview = { error }
	})
	.finally(() => {
	this.previewLoading = false
	})
	},
	debouncePreviewStatus: debounce(function () {
	this.previewStatus()
	}, 500),
	autoPreview() {
	if (!this.preview) return
	this.previewLoading = true
	this.debouncePreviewStatus()
	},
	closePreview() {
	this.preview = null
	this.previewLoading = false
	},
	togglePreview() {
	if (this.showPreview) {
	this.closePreview()
	} else {
	this.previewStatus()
	}
	},

	// Attachments
	setMediaDescription(id) {
	const description = this.newStatus.mediaDescriptions[id]
	if (!description \|\| description.trim() === '') return
	return statusPoster.setMediaDescription({
	store: this.$store,
	id,
	description,
	})
	},
	setAllMediaDescriptions() {
	const ids = this.newStatus.files.map((file) => file.id)
	return Promise.all(ids.map((id) => this.setMediaDescription(id)))
	},
	addMediaFile(fileInfo) {
	this.newStatus.files.push(fileInfo)
	this.$emit('resize', { delayed: true })
	},
	removeMediaFile(fileInfo) {
	const index = this.newStatus.files.indexOf(fileInfo)
	this.newStatus.files.splice(index, 1)
	this.$emit('resize')
	},
	editAttachment(fileInfo, newText) {
	this.newStatus.mediaDescriptions[fileInfo.id] = newText
	},
	shiftUpMediaFile(fileInfo) {
	const { files } = this.newStatus
	const index = this.newStatus.files.indexOf(fileInfo)
	if (index === 0) return
	files.splice(index, 1)
	files.splice(index - 1, 0, fileInfo)
	},
	shiftDnMediaFile(fileInfo) {
	const { files } = this.newStatus
	const index = this.newStatus.files.indexOf(fileInfo)
	if (index === files.length - 1) return
	files.splice(index, 1)
	files.splice(index + 1, 0, fileInfo)
	},
	uploadFailed(errString, templateArgs) {
	templateArgs = templateArgs \|\| {}
	this.error =
	this.$t('upload.error.base') +
	' ' +
	this.$t('upload.error.' + errString, templateArgs)
	},
	startedUploadingFiles() {
	this.uploadingFiles = true
	},
	finishedUploadingFiles() {
	this.$emit('resize')
	this.uploadingFiles = false
	},
	paste(e) {
	this.autoPreview()
	this.resize(e)
	if (e.clipboardData.files.length > 0) {
	// prevent pasting of file as text
	e.preventDefault()
	// Strangely, files property gets emptied after event propagation
	// Trying to wrap it in array doesn't work. Plus I doubt it's possible
	// to hold more than one file in clipboard.
	this.dropFiles = [e.clipboardData.files[0]]
	}
	},
	fileDrop(e) {
	if (e.dataTransfer?.types.includes('Files')) {
	e.preventDefault() // allow dropping text like before
	this.dropFiles = e.dataTransfer.files
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'hide'
	}
	},
	fileDragStop() {
	// The false-setting is done with delay because just using leave-events
	// directly caused unwanted flickering, this is not perfect either but
	// much less noticable.
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'fade'
	this.dropStopTimeout = setTimeout(() => (this.showDropIcon = 'hide'), 500)
	},
	fileDrag(e) {
	e.dataTransfer.dropEffect = this.uploadFileLimitReached ? 'none' : 'copy'
	if (e.dataTransfer?.types.includes('Files')) {
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'show'
	}
	},

	// Auto-sizable input field
	// TODO separate into its own component pls
	onEmojiInputInput() {
	this.$nextTick(() => {
	this.resize(this.$refs.textarea)
	})
	},
	resize(e) {
	const target = e.target \|\| e
	if (!(target instanceof window.Element)) {
	return
	}

	// Reset to default height for empty form, nothing else to do here.
	if (target.value === '') {
	target.style.height = null
	this.$emit('resize')
	return
	}

	const formRef = this.$refs.form
	const bottomRef = this.$refs.bottom
	/* Scroller is either `window` (replies in TL), sidebar (main post form,
	* replies in notifs) or mobile post form. Note that getting and setting
	* scroll is different for `Window` and `Element`s
	*/
	const bottomBottomPaddingStr =
	window.getComputedStyle(bottomRef)['padding-bottom']
	const bottomBottomPadding = pxStringToNumber(bottomBottomPaddingStr)

	const scrollerRef =
	this.$el.closest('.column.-scrollable') \|\|
	this.$el.closest('.post-form-modal-view') \|\|
	window

	// Getting info about padding we have to account for, removing 'px' part
	const topPaddingStr = window.getComputedStyle(target)['padding-top']
	const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom']
	const topPadding = pxStringToNumber(topPaddingStr)
	const bottomPadding = pxStringToNumber(bottomPaddingStr)
	const vertPadding = topPadding + bottomPadding

	const oldHeight = pxStringToNumber(target.style.height)

	/* Explanation:
	*
	* https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
	* scrollHeight returns element's scrollable content height, i.e. visible
	* element + overscrolled parts of it. We use it to determine when text
	* inside the textarea exceeded its height, so we can set height to prevent
	* overscroll, i.e. make textarea grow with the text. HOWEVER, since we
	* explicitly set new height, scrollHeight won't go below that, so we can't
	* SHRINK the textarea when there's extra space. To workaround that we set
	* height to 'auto' which makes textarea tiny again, so that scrollHeight
	* will match text height again. HOWEVER, shrinking textarea can screw with
	* the scroll since there might be not enough padding around form-bottom to even
	* warrant a scroll, so it will jump to 0 and refuse to move anywhere,
	* so we check current scroll position before shrinking and then restore it
	* with needed delta.
	*/

	// this part has to be BEFORE the content size update
	const currentScroll =
	scrollerRef === window ? scrollerRef.scrollY : scrollerRef.scrollTop
	const scrollerHeight =
	scrollerRef === window
	? scrollerRef.innerHeight
	: scrollerRef.offsetHeight
	const scrollerBottomBorder = currentScroll + scrollerHeight

	// BEGIN content size update
	target.style.height = 'auto'
	const heightWithoutPadding = Math.floor(target.scrollHeight - vertPadding)
	let newHeight = this.maxHeight
	? Math.min(heightWithoutPadding, this.maxHeight)
	: heightWithoutPadding
	// This is a bit of a hack to combat target.scrollHeight being different on every other input
	// on some browsers for whatever reason. Don't change the height if difference is 1px or less.
	if (Math.abs(newHeight - oldHeight) <= 1) {
	newHeight = oldHeight
	}
	target.style.height = `${newHeight}px`
	this.$emit('resize', newHeight)
	// END content size update

	// We check where the bottom border of form-bottom element is, this uses findOffset
	// to find offset relative to scrollable container (scroller)
	const bottomBottomBorder =
	bottomRef.offsetHeight +
	findOffset(bottomRef, scrollerRef).top +
	bottomBottomPadding

	const isBottomObstructed = scrollerBottomBorder < bottomBottomBorder
	const isFormBiggerThanScroller = scrollerHeight < formRef.offsetHeight
	const bottomChangeDelta = bottomBottomBorder - scrollerBottomBorder
	// The intention is basically this;
	// Keep form-bottom always visible so that submit button is in view EXCEPT
	// if form element bigger than scroller and caret isn't at the end, so that
	// if you scroll up and edit middle of text you won't get scrolled back to bottom
	const shouldScrollToBottom =
	isBottomObstructed &&
	!(
	isFormBiggerThanScroller &&
	this.$refs.textarea.selectionStart !==
	this.$refs.textarea.value.length
	)
	const totalDelta = shouldScrollToBottom ? bottomChangeDelta : 0
	const targetScroll = Math.round(currentScroll + totalDelta)

	if (scrollerRef === window) {
	scrollerRef.scroll(0, targetScroll)
	} else {
	scrollerRef.scrollTop = targetScroll
	}
	},

	// Poll
	togglePollForm() {
	this.newStatus.poll = this.hasPoll ? null : {}
	},
	setPoll(poll) {
	this.newStatus.poll = poll
	},

	// Quote
	toggleQuoteForm() {
	// This is for the "attach quote" button
	if (this.newStatus.quote?.thread) return
	if (!this.hasQuote) {
	this.newStatus.quote = {}
	this.newStatus.quote.thread = false
	this.newStatus.quote.id = null
	this.newStatus.quote.url = ''
	} else {
	this.newStatus.quote = null
	}
	},

	// Drafts
	statusChanged() {
	this.autoPreview()
	this.updateIdempotencyKey()
	this.debouncedMaybeAutoSaveDraft()
	this.saveable = true
	this.saveInhibited = false
	},
	saveDraft() {
	if (!this.disableDraft && !this.saveInhibited) {
	if (this.safeToSaveDraft) {
	return this.$store
	.dispatch('addOrSaveDraft', {
	draft: {
	type: this.statusType,
	refId: this.refId,
	...this.newStatus,
	},
	})
	.then((id) => {
	if (this.newStatus.id !== id) {
	this.newStatus.id = id
	}
	this.saveable = false
	if (!this.shouldAutoSaveDraft) {
	this.clearStatus()
	this.updateIdempotencyKey()
	this.$emit('draft-done')
	}
	})
	} else if (this.hasEmptyDraft) {
	// There is a draft, but there is nothing in it, clear it
	return this.abandonDraft().then(() => {
	this.saveable = false
	if (!this.shouldAutoSaveDraft) {
	this.clearStatus()
	this.updateIdempotencyKey()
	this.$emit('draft-done')
	}
	})
	}
	}
	return Promise.resolve()
	},
	maybeAutoSaveDraft() {
	if (this.shouldAutoSaveDraft) {
	this.saveDraft(false)
	}
	},
	abandonDraft() {
	return this.$store.dispatch('abandonDraft', { id: this.draftId })
	},
	getDraft() {
	const maybeDraft = this.$store.state.drafts.drafts[this.draftId]
	if (this.draftId && maybeDraft) {
	return maybeDraft
	} else {
	const existingDrafts = this.$store.getters.draftsByTypeAndRefId(
	this.statusType,
	this.refId,
	)

	if (existingDrafts.length) {
	return existingDrafts[0]
	}
	}
	// No draft available, fall back
	},
	requestClose() {
	if (!this.saveable) {
	this.$emit('close-accepted')
	} else {
	this.$refs.draftCloser.requestClose()
	}
	},
	saveAndCloseDraft() {
	this.saveDraft().then(() => {
	this.$emit('close-accepted')
	})
	},
	discardAndCloseDraft() {
	this.abandonDraft().then(() => {
	this.$emit('close-accepted')
	})
	},
	addBeforeUnloadListener() {
	this._beforeUnloadListener \|\|= () => {
	this.saveDraft()
	}
	window.addEventListener('beforeunload', this._beforeUnloadListener)
	},
	removeBeforeUnloadListener() {
	if (this._beforeUnloadListener) {
	window.removeEventListener('beforeunload', this._beforeUnloadListener)
	}
	},

	// Misc
	propsToNative(props) {
	return propsToNative(props)
	},
	handleEmojiInputShow(value) {
	this.emojiInputShown = value
	},
	updateIdempotencyKey() {
	this.idempotencyKey = Date.now().toString()
	},
	openProfileTab() {
	useInterfaceStore().openSettingsModalTab('profile')
	},
	dismissScopeNotice() {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'hideScopeNotice',
	value: true,
	})
	},
	clearError() {
	this.error = null
	},
	...mapActions(useMediaViewerStore, ['increment']),
	},
	beforeUnmount() {
	this.maybeAutoSaveDraft()
	this.removeBeforeUnloadListener()
	},
	}

	export default PostStatusForm
	diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
	index e7001db9a2..9be1df4a4a 100644
	--- a/src/components/post_status_modal/post_status_modal.js
	+++ b/src/components/post_status_modal/post_status_modal.js
	@@ -1,58 +1,59 @@
	import { get } from 'lodash'

	import Modal from 'src/components/modal/modal.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'

	import { usePostStatusStore } from 'src/stores/post_status.js'
	+import { useUsersStore } from 'src/stores/users.js'

	const PostStatusModal = {
	components: {
	PostStatusForm,
	Modal,
	},
	data() {
	return {
	resettingForm: false,
	}
	},
	computed: {
	isLoggedIn() {
	- return !!this.$store.state.users.currentUser
	+ return !!useUsersStore().currentUser
	},
	modalActivated() {
	return usePostStatusStore().modalActivated
	},
	isFormVisible() {
	return this.isLoggedIn && !this.resettingForm && this.modalActivated
	},
	params() {
	return usePostStatusStore().params \|\| {}
	},
	},
	watch: {
	params(newVal, oldVal) {
	if (get(newVal, 'repliedUser.id') !== get(oldVal, 'repliedUser.id')) {
	this.resettingForm = true
	this.$nextTick(() => {
	this.resettingForm = false
	})
	}
	},
	isFormVisible(val) {
	if (val) {
	this.$nextTick(() => this.$el?.querySelector('textarea').focus())
	}
	},
	},
	methods: {
	closeModal() {
	usePostStatusStore().closePostStatusModal()
	},
	resetAndClose() {
	usePostStatusStore().resetPostStatusModal()
	usePostStatusStore().closePostStatusModal()
	},
	},
	}

	export default PostStatusModal
	diff --git a/src/components/quick_filter_settings/quick_filter_settings.js b/src/components/quick_filter_settings/quick_filter_settings.js
	index 6c27f7e0a7..533d193134 100644
	--- a/src/components/quick_filter_settings/quick_filter_settings.js
	+++ b/src/components/quick_filter_settings/quick_filter_settings.js
	@@ -1,137 +1,138 @@
	import { mapState } from 'pinia'

	import Popover from 'src/components/popover/popover.vue'

	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useLocalConfigStore } from 'src/stores/local_config.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'

	library.add(faFilter, faFont, faWrench)

	const QuickFilterSettings = {
	props: {
	conversation: Boolean,
	nested: Boolean,
	},
	components: {
	Popover,
	},
	methods: {
	setReplyVisibility(visibility) {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'replyVisibility',
	value: visibility,
	})
	this.$store.dispatch('queueFlushAll')
	},
	openTab(tab) {
	useInterfaceStore().openSettingsModalTab(tab)
	},
	},
	computed: {
	...mapState(useMergedConfigStore, ['mergedConfig']),
	...mapState(useInterfaceStore, {
	mobileLayout: (state) => state.layoutType === 'mobile',
	}),
	triggerAttrs() {
	if (this.mobileLayout) {
	return {}
	} else {
	return {
	title: this.$t('timeline.quick_filter_settings'),
	}
	}
	},
	mainClass() {
	if (this.mobileLayout) {
	return 'main-button'
	} else {
	return 'dropdown-item'
	}
	},
	loggedIn() {
	- return !!this.$store.state.users.currentUser
	+ return !!useUsersStore().currentUser
	},
	replyVisibilitySelf: {
	get() {
	return this.mergedConfig.replyVisibility === 'self'
	},
	set() {
	this.setReplyVisibility('self')
	},
	},
	replyVisibilityFollowing: {
	get() {
	return this.mergedConfig.replyVisibility === 'following'
	},
	set() {
	this.setReplyVisibility('following')
	},
	},
	replyVisibilityAll: {
	get() {
	return this.mergedConfig.replyVisibility === 'all'
	},
	set() {
	this.setReplyVisibility('all')
	},
	},
	hideMedia: {
	get() {
	return (
	this.mergedConfig.hideAttachments \|\|
	this.mergedConfig.hideAttachmentsInConv
	)
	},
	set(value) {
	useLocalConfigStore().set({
	path: 'hideAttachments',
	value,
	})
	useLocalConfigStore().set({
	path: 'hideAttachmentsInConv',
	value,
	})
	},
	},
	hideMutedPosts: {
	get() {
	return this.mergedConfig.hideFilteredStatuses
	},
	set(value) {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'hideFilteredStatuses',
	value,
	})
	},
	},
	muteBotStatuses: {
	get() {
	return this.mergedConfig.muteBotStatuses
	},
	set(value) {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'muteBotStatuses',
	value,
	})
	},
	},
	muteSensitiveStatuses: {
	get() {
	return this.mergedConfig.muteSensitiveStatuses
	},
	set(value) {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'muteSensitiveStatuses',
	value,
	})
	},
	},
	},
	}

	export default QuickFilterSettings
	diff --git a/src/components/quick_view_settings/quick_view_settings.js b/src/components/quick_view_settings/quick_view_settings.js
	index f809d241c9..b0fc9610b9 100644
	--- a/src/components/quick_view_settings/quick_view_settings.js
	+++ b/src/components/quick_view_settings/quick_view_settings.js
	@@ -1,112 +1,113 @@
	import { mapState } from 'pinia'

	import Popover from 'src/components/popover/popover.vue'
	import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'

	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBars,
	faFolderTree,
	faList,
	faWrench,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faList, faFolderTree, faBars, faWrench)

	const QuickViewSettings = {
	props: {
	conversation: Boolean,
	},
	components: {
	Popover,
	QuickFilterSettings,
	},
	methods: {
	openTab(tab) {
	useInterfaceStore().openSettingsModalTab(tab)
	},
	},
	computed: {
	...mapState(useMergedConfigStore, ['mergedConfig']),
	...mapState(useInterfaceStore, {
	mobileLayout: (state) => state.layoutType === 'mobile',
	}),
	loggedIn() {
	- return !!this.$store.state.users.currentUser
	+ return !!useUsersStore().currentUser
	},
	conversationDisplay: {
	get() {
	return this.mergedConfig.conversationDisplay
	},
	set(value) {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'conversationDisplay',
	value,
	})
	},
	},
	autoUpdate: {
	get() {
	return this.mergedConfig.streaming
	},
	set() {
	const value = !this.autoUpdate
	useSyncConfigStore().setSimplePrefAndSave({ path: 'streaming', value })
	},
	},
	collapseWithSubjects: {
	get() {
	return this.mergedConfig.collapseMessageWithSubject
	},
	set() {
	const value = !this.collapseWithSubjects
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'collapseMessageWithSubject',
	value,
	})
	},
	},
	showUserAvatars: {
	get() {
	return this.mergedConfig.mentionLinkShowAvatar
	},
	set() {
	const value = !this.showUserAvatars
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'mentionLinkShowAvatar',
	value,
	})
	},
	},
	muteBotStatuses: {
	get() {
	return this.mergedConfig.muteBotStatuses
	},
	set() {
	const value = !this.muteBotStatuses
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'muteBotStatuses',
	value,
	})
	},
	},
	muteSensitiveStatuses: {
	get() {
	return this.mergedConfig.muteSensitiveStatuses
	},
	set() {
	const value = !this.muteSensitiveStatuses
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'muteSensitiveStatuses',
	value,
	})
	},
	},
	},
	}

	export default QuickViewSettings
	diff --git a/src/components/search/search.js b/src/components/search/search.js
	index 1a5f8b51d7..2a6ed5c3ea 100644
	--- a/src/components/search/search.js
	+++ b/src/components/search/search.js
	@@ -1,130 +1,132 @@
	import { map, uniqBy } from 'lodash'

	import Conversation from 'src/components/conversation/conversation.vue'
	import FollowCard from 'src/components/follow_card/follow_card.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'

	+import { useUsersStore } from 'src/stores/users.js'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faCircleNotch, faSearch } from '@fortawesome/free-solid-svg-icons'

	library.add(faCircleNotch, faSearch)

	const Search = {
	components: {
	FollowCard,
	Conversation,

	TabSwitcher,
	},
	props: ['query'],
	data() {
	return {
	loaded: false,
	loading: false,
	searchTerm: this.query \|\| '',
	userIds: [],
	statuses: [],
	hashtags: [],
	currenResultTab: 'statuses',

	statusesOffset: 0,
	lastStatusFetchCount: 0,
	lastQuery: '',
	}
	},
	computed: {
	users() {
	- return this.userIds.map((userId) => this.$store.getters.findUser(userId))
	+ return this.userIds.map((userId) => useUsersStore().findUser(userId))
	},
	visibleStatuses() {
	const allStatusesObject = this.$store.state.statuses.allStatusesObject

	return this.statuses.filter(
	(status) =>
	allStatusesObject[status.id] && !allStatusesObject[status.id].deleted,
	)
	},
	},
	mounted() {
	this.search(this.query)
	},
	watch: {
	query(newValue) {
	this.searchTerm = newValue
	this.search(newValue)
	},
	},
	methods: {
	newQuery(query) {
	this.$router.push({ name: 'search', query: { query } })
	this.$refs.searchInput.focus()
	},
	search(query, searchType = null) {
	if (!query) {
	this.loading = false
	return
	}

	this.loading = true
	this.$refs.searchInput.blur()
	if (this.lastQuery !== query) {
	this.userIds = []
	this.hashtags = []
	this.statuses = []

	this.statusesOffset = 0
	this.lastStatusFetchCount = 0
	}

	this.$store
	.dispatch('search', {
	q: query,
	resolve: true,
	offset: this.statusesOffset,
	type: searchType,
	})
	.then((data) => {
	this.loading = false

	const oldLength = this.statuses.length

	// Always append to old results. If new results are empty, this doesn't change anything
	this.userIds = this.userIds.concat(map(data.accounts, 'id'))
	this.statuses = uniqBy(this.statuses.concat(data.statuses), 'id')
	this.hashtags = this.hashtags.concat(data.hashtags)

	this.currenResultTab = this.getActiveTab()
	this.loaded = true

	// Offset from whatever we already have
	this.statusesOffset = this.statuses.length
	// Because the amount of new statuses can actually be zero, compare to old lenght instead
	this.lastStatusFetchCount = this.statuses.length - oldLength
	this.lastQuery = query
	})
	},
	resultCount(tabName) {
	const length = this[tabName].length
	return length === 0 ? '' : ` (${length})`
	},
	onResultTabSwitch(key) {
	this.currenResultTab = key
	},
	getActiveTab() {
	if (this.visibleStatuses.length > 0) {
	return 'statuses'
	} else if (this.users.length > 0) {
	return 'people'
	} else if (this.hashtags.length > 0) {
	return 'hashtags'
	}

	return 'statuses'
	},
	lastHistoryRecord(hashtag) {
	return hashtag.history?.[0]
	},
	},
	}

	export default Search
	diff --git a/src/components/settings_modal/admin_tabs/admin_user_card.js b/src/components/settings_modal/admin_tabs/admin_user_card.js
	index ba0f0e9f7d..ae20d4cfec 100644
	--- a/src/components/settings_modal/admin_tabs/admin_user_card.js
	+++ b/src/components/settings_modal/admin_tabs/admin_user_card.js
	@@ -1,30 +1,32 @@
	import BasicUserCard from 'src/components/basic_user_card/basic_user_card.vue'
	import ModerationTools from 'src/components/moderation_tools/moderation_tools.vue'

	+import { useUsersStore } from 'src/stores/users.js'
	+
	const AdminUserCard = {
	props: {
	userId: {
	type: String,
	},
	},
	components: {
	BasicUserCard,
	ModerationTools,
	},
	computed: {
	user() {
	- return this.$store.getters.findUser(this.userId)
	+ return useUsersStore().findUser(this.userId)
	},
	isAdmin() {
	return this.user.rights.admin
	},
	isModerator() {
	return this.user.rights.moderator
	},
	isActivated() {
	return !this.user.deactivated
	},
	},
	}

	export default AdminUserCard
	diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
	index 4a3b9d4f8c..123e778798 100644
	--- a/src/components/settings_modal/helpers/shared_computed_object.js
	+++ b/src/components/settings_modal/helpers/shared_computed_object.js
	@@ -1,21 +1,21 @@
	-import { mapState as mapPiniaState } from 'pinia'
	-import { mapState } from 'vuex'
	+import { mapState } from 'pinia'

	import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	const SharedComputedObject = () => ({
	- ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	- ...mapPiniaState(useMergedConfigStore, {
	+ ...mapState(useMergedConfigStore, ['mergedConfig']),
	+ ...mapState(useMergedConfigStore, {
	expertLevel: (store) => store.mergedConfig.expertLevel,
	}),
	- ...mapPiniaState(useAdminSettingsStore, {
	+ ...mapState(useAdminSettingsStore, {
	adminConfig: (store) => store.config,
	adminDraft: (store) => store.draft,
	}),
	- ...mapState({
	- user: (state) => state.users.currentUser,
	+ ...mapState(useUsersStore, {
	+ user: (store) => store.currentUser,
	}),
	})

	export default SharedComputedObject
	diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
	index 22ba0e16c7..f6b67c7c6a 100644
	--- a/src/components/settings_modal/settings_modal_admin_content.js
	+++ b/src/components/settings_modal/settings_modal_admin_content.js
	@@ -1,155 +1,156 @@
	import AuthTab from './admin_tabs/auth_tab.vue'
	import EmojiTab from './admin_tabs/emoji_tab.vue'
	import FederationTab from './admin_tabs/federation_tab.vue'
	import FrontendsTab from './admin_tabs/frontends_tab.vue'
	import HTTPTab from './admin_tabs/http_tab.vue'
	import InstanceTab from './admin_tabs/instance_tab.vue'
	import JobQueuesTab from './admin_tabs/job_queues_tab.vue'
	import LimitsTab from './admin_tabs/limits_tab.vue'
	import LinksTab from './admin_tabs/links_tab.vue'
	import MailerTab from './admin_tabs/mailer_tab.vue'
	import MediaProxyTab from './admin_tabs/media_proxy_tab.vue'
	import MonitoringTab from './admin_tabs/monitoring_tab.vue'
	import OtherTab from './admin_tabs/other_tab.vue'
	import PostsTab from './admin_tabs/posts_tab.vue'
	import RatesTab from './admin_tabs/rates_tab.vue'
	import RegistrationsTab from './admin_tabs/registrations_tab.vue'
	import UploadsTab from './admin_tabs/uploads_tab.vue'
	import UsersTab from './admin_tabs/users_tab.vue'
	import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'

	import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faChain,
	faChartLine,
	faCircleNodes,
	faDoorOpen,
	faDownload,
	faEllipsis,
	faEnvelope,
	faEyeSlash,
	faGauge,
	faGears,
	faGlobe,
	faHand,
	faInfo,
	faKey,
	faLaptopCode,
	faMessage,
	faPaintBrush,
	faTowerBroadcast,
	faUpload,
	faUser,
	faWrench,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faWrench,
	faHand,
	faChain,
	faGlobe,
	faLaptopCode,
	faPaintBrush,
	faBell,
	faDownload,
	faEyeSlash,
	faInfo,
	faUser,
	faTowerBroadcast,
	faEnvelope,
	faChartLine,
	faDoorOpen,
	faGears,
	faKey,
	faCircleNodes,
	faUpload,
	faMessage,
	faEllipsis,
	faGauge,
	)

	const SettingsModalAdminContent = {
	components: {
	VerticalTabSwitcher,

	InstanceTab,
	UsersTab,
	LimitsTab,
	RegistrationsTab,
	EmojiTab,
	FrontendsTab,
	FederationTab,
	MailerTab,
	UploadsTab,
	MediaProxyTab,
	LinksTab,
	JobQueuesTab,
	AuthTab,
	HTTPTab,
	MonitoringTab,
	RatesTab,
	OtherTab,
	PostsTab,
	},
	computed: {
	user() {
	- return this.$store.state.users.currentUser
	+ return useUsersStore().currentUser
	},
	isLoggedIn() {
	- return !!this.$store.state.users.currentUser
	+ return !!useUsersStore().currentUser
	},
	open() {
	return useInterfaceStore().settingsModalState !== 'hidden'
	},
	bodyLock() {
	return useInterfaceStore().settingsModalState === 'visible'
	},
	adminDbLoaded() {
	return useAdminSettingsStore().loaded
	},
	adminDescriptionsLoaded() {
	return useAdminSettingsStore().descriptions !== null
	},
	noDb() {
	return useAdminSettingsStore().dbConfigEnabled === false
	},
	},
	created() {
	if (this.user.rights.admin) {
	useAdminSettingsStore().loadAdminStuff()
	}
	},
	methods: {
	onOpen() {
	const targetTab = useInterfaceStore().settingsModalTargetTab
	// We're being told to open in specific tab
	if (targetTab) {
	const tabIndex = this.$refs.tabSwitcher.$slots
	.default()
	.findIndex((elm) => {
	return elm.props && elm.props['data-tab-name'] === targetTab
	})
	if (tabIndex >= 0) {
	this.$refs.tabSwitcher.setTab(tabIndex)
	}
	}
	// Clear the state of target tab, so that next time settings is opened
	// it doesn't force it.
	useInterfaceStore().clearSettingsModalTargetTab()
	},
	},
	mounted() {
	this.onOpen()
	},
	watch: {
	open: function (value) {
	if (value) this.onOpen()
	},
	},
	}

	export default SettingsModalAdminContent
	diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js
	index 6e5d2addc7..0b6f2a385a 100644
	--- a/src/components/settings_modal/settings_modal_user_content.js
	+++ b/src/components/settings_modal/settings_modal_user_content.js
	@@ -1,125 +1,126 @@
	import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'
	import AppearanceTab from './tabs/appearance_tab.vue'
	import ClutterTab from './tabs/clutter_tab.vue'
	import ComposingTab from './tabs/composing_tab.vue'
	import DataImportExportTab from './tabs/data_import_export_tab.vue'
	import DeveloperTab from './tabs/developer_tab.vue'
	import FilteringTab from './tabs/filtering_tab.vue'
	import GeneralTab from './tabs/general_tab.vue'
	import LayoutTab from './tabs/layout_tab.vue'
	import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
	import NotificationsTab from './tabs/notifications_tab.vue'
	import OldThemeTab from './tabs/old_theme_tab/old_theme_tab.vue'
	import PostsTab from './tabs/posts_tab.vue'
	import ProfileTab from './tabs/profile_tab.vue'
	import SecurityTab from './tabs/security_tab/security_tab.vue'
	import StyleTab from './tabs/style_tab/style_tab.vue'

	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faBroom,
	faCode,
	faColumns,
	faDownload,
	faEyeSlash,
	faFilter,
	faLock,
	faMessage,
	faPaintBrush,
	faPalette,
	faUser,
	faWindowRestore,
	faWrench,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faWrench,
	faUser,
	faMessage,
	faWindowRestore,
	faColumns,
	faBell,
	faFilter,
	faEyeSlash,
	faBroom,
	faLock,
	faDownload,
	faPalette,
	faPaintBrush,
	faCode,
	)

	const SettingsModalContent = {
	components: {
	VerticalTabSwitcher,

	DataImportExportTab,
	MutesAndBlocksTab,
	NotificationsTab,
	FilteringTab,
	SecurityTab,
	ProfileTab,
	GeneralTab,
	PostsTab,
	ComposingTab,
	ClutterTab,
	LayoutTab,
	AppearanceTab,
	StyleTab,
	DeveloperTab,
	OldThemeTab,
	},
	computed: {
	isLoggedIn() {
	- return !!this.$store.state.users.currentUser
	+ return !!useUsersStore().currentUser
	},
	open() {
	return useInterfaceStore().settingsModalState !== 'hidden'
	},
	bodyLock() {
	return useInterfaceStore().settingsModalState === 'visible'
	},
	expertLevel() {
	return useMergedConfigStore().mergedConfig.expertLevel
	},
	},
	data() {
	return {
	navCollapsed: false,
	navHideHeader: false,
	}
	},
	methods: {
	onOpen() {
	const targetTab = useInterfaceStore().settingsModalTargetTab
	// We're being told to open in specific tab
	if (targetTab) {
	const tabIndex = this.$refs.tabSwitcher.$slots
	.default()
	.findIndex((elm) => {
	return elm.props && elm.props['data-tab-name'] === targetTab
	})
	if (tabIndex >= 0) {
	this.$refs.tabSwitcher.setTab(tabIndex)
	}
	}
	// Clear the state of target tab, so that next time settings is opened
	// it doesn't force it.
	useInterfaceStore().clearSettingsModalTargetTab()
	},
	},
	mounted() {
	this.onOpen()
	},
	watch: {
	open: function (value) {
	if (value) this.onOpen()
	},
	},
	}

	export default SettingsModalContent
	diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
	index 647c90c47d..68c498624e 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 { useUsersStore } from 'src/stores/users.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
	+ return !useUsersStore().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.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().replaceAll(' ', '_')}`,
	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() {
	return useInstanceStore().instanceIdentity.background
	},
	instanceWallpaperUsed() {
	return (
	useInstanceStore().instanceIdentity.background &&
	- !this.$store.state.users.currentUser.background_image
	+ !useUsersStore().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(Boolean),
	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 }) => {
	- this.$store.commit('addNewUsers', [data])
	- this.$store.commit('setCurrentUser', data)
	+ .then((result) => {
	+ useUsersStore().addNewUsers(result)
	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 1586c87bfb..dadb2498fc 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 { useUsersStore } from 'src/stores/users.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 \|\| [''],
	+ emailLanguage: useUsersStore().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(({ data: user }) => {
	- this.$store.commit('addNewUsers', [user])
	- this.$store.commit('setCurrentUser', user)
	+ }).then((result) => {
	+ useUsersStore().addNewUsers(result)
	})
	},
	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 7fc6adefd4..243ff5888e 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,134 @@
	-import { mapState } from 'vuex'
	+import { mapState } from 'pinia'

	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 { useUsersStore } from 'src/stores/users.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,
	- }),
	+ ...mapState(useUsersStore, ['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(({ data: status }) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	importBlocks(file) {
	return importBlocks({
	file,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	importMutes(file) {
	return importMutes({
	file,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	generateExportableUsersContent({ data: users }) {
	// Get addresses
	return users
	.map((user) => {
	// check is it's a local user
	if (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(({ 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 3ab3846d25..bfc350aad5 100644
	--- a/src/components/settings_modal/tabs/general_tab.js
	+++ b/src/components/settings_modal/tabs/general_tab.js
	@@ -1,76 +1,76 @@
	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 { 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 { useUsersStore } from 'src/stores/users.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 \|\| [''],
	+ emailLanguage: useUsersStore().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(({ data: user }) => {
	- this.$store.commit('addNewUsers', [user])
	- this.$store.commit('setCurrentUser', user)
	+ }).then((result) => {
	+ useUsersStore().addNewUsers(result)
	})
	},
	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 61d3e42f79..9158d8a1d0 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,141 @@
	import { get, 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 { useUsersStore } from 'src/stores/users.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
	+ return useUsersStore().currentUser
	},
	blocks() {
	- return get(this.$store.state.users.currentUser, 'blockIds', [])
	+ return get(useUsersStore().currentUser, 'blockIds', [])
	},
	mutes() {
	- return get(this.$store.state.users.currentUser, 'muteIds', [])
	+ return get(useUsersStore().currentUser, 'muteIds', [])
	},
	domains() {
	- return get(this.$store.state.users.currentUser, 'domainMutes', [])
	+ return get(useUsersStore().currentUser, 'domainMutes', [])
	},
	},
	methods: {
	fetchItems(group) {
	return () => this.$store.dispatch('fetch' + group, this.userId)
	},
	importFollows(file) {
	return importFollows({
	file,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	importBlocks(file) {
	return importBlocks({
	file,
	credentials: useOAuthStore().token,
	}).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?.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)
	+ const relationship = useUsersStore().relationship(this.userId)
	return relationship.blocking \|\| userId === this.user.id
	})
	},
	filterUnMutedUsers(userIds) {
	return reject(userIds, (userId) => {
	- const relationship = this.$store.getters.relationship(this.userId)
	+ const relationship = useUsersStore().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/notifications_tab.js b/src/components/settings_modal/tabs/notifications_tab.js
	index a666d42e34..468ede0ce5 100644
	--- a/src/components/settings_modal/tabs/notifications_tab.js
	+++ b/src/components/settings_modal/tabs/notifications_tab.js
	@@ -1,42 +1,42 @@
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'

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

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

	const NotificationsTab = {
	data() {
	return {
	activeTab: 'profile',
	- notificationSettings:
	- this.$store.state.users.currentUser.notification_settings,
	+ notificationSettings: useUsersStore().currentUser.notification_settings,
	newDomainToMute: '',
	}
	},
	components: {
	BooleanSetting,
	},
	computed: {
	user() {
	- return this.$store.state.users.currentUser
	+ return useUsersStore().currentUser
	},
	canReceiveReports() {
	if (!this.user) {
	return false
	}
	return this.user.privileges.has('reports_manage_reports')
	},
	...SharedComputedObject(),
	},
	methods: {
	updateNotificationSettings() {
	updateNotificationSettings({
	credentials: useOAuthStore().token,
	settings: this.notificationSettings,
	})
	},
	},
	}

	export default NotificationsTab
	diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
	index 844e223c9f..07a77f3083 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 { useUsersStore } from 'src/stores/users.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,
	+ locked: useUsersStore().currentUser.locked,
	}
	},
	components: {
	UserCard,
	Checkbox,
	BooleanSetting,
	},
	computed: {
	user() {
	- return this.$store.state.users.currentUser
	+ return useUsersStore().currentUser
	},
	...SharedComputedObject(),
	},
	methods: {
	updateProfile() {
	const params = {
	locked: this.locked,
	}
	updateProfile({
	params,
	credentials: useOAuthStore().token,
	})
	- .then(({ data: user }) => {
	- this.$store.commit('addNewUsers', [user])
	- this.$store.commit('setCurrentUser', user)
	+ .then((result) => {
	+ useUsersStore().addNewUsers(result)
	})
	.catch((error) => {
	this.displayUploadError(error)
	})
	},
	},
	watch: {
	locked() {
	this.updateProfile()
	},
	},
	}

	export default ProfileTab
	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 a2571bd544..b30cd2f132 100644
	--- a/src/components/settings_modal/tabs/security_tab/security_tab.js
	+++ b/src/components/settings_modal/tabs/security_tab/security_tab.js
	@@ -1,185 +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 { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useOAuthTokensStore } from 'src/stores/oauth_tokens'
	+import { useUsersStore } from 'src/stores/users.js'

	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
	+ return useUsersStore().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(({ 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(({ 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(({ 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(({ 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(({ 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/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
	index a1dca81618..3a4885792b 100644
	--- a/src/components/side_drawer/side_drawer.js
	+++ b/src/components/side_drawer/side_drawer.js
	@@ -1,138 +1,139 @@
	import { mapActions, mapState } from 'pinia'
	import { mapGetters } from 'vuex'

	import { USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
	import UserCard from 'src/components/user_card/user_card.vue'
	import GestureService from '../../services/gesture_service/gesture_service'
	import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'

	import { useAnnouncementsStore } from 'src/stores/announcements'
	import { useChatsStore } from 'src/stores/chats.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useShoutStore } from 'src/stores/shout'
	+import { useUsersStore } from 'src/stores/users.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faBullhorn,
	faCog,
	faComments,
	faCompass,
	faFilePen,
	faHome,
	faInfoCircle,
	faList,
	faSearch,
	faSignInAlt,
	faSignOutAlt,
	faTachometerAlt,
	faUserPlus,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSignInAlt,
	faSignOutAlt,
	faHome,
	faComments,
	faBell,
	faUserPlus,
	faBullhorn,
	faSearch,
	faTachometerAlt,
	faCog,
	faInfoCircle,
	faCompass,
	faList,
	faFilePen,
	)

	const SideDrawer = {
	props: ['logout'],
	data: () => ({
	closed: true,
	closeGesture: undefined,
	}),
	created() {
	this.closeGesture = GestureService.swipeGesture(
	GestureService.DIRECTION_LEFT,
	this.toggleDrawer,
	)

	if (this.currentUser?.locked) {
	this.$store.dispatch('startFetchingFollowRequests')
	}
	},
	components: {
	UserCard,
	},
	computed: {
	currentUser() {
	- return this.$store.state.users.currentUser
	+ return useUsersStore().currentUser
	},
	shout() {
	return useShoutStore().joined
	},
	unseenNotifications() {
	return unseenNotificationsFromStore(
	this.$store,
	useMergedConfigStore().mergedConfig.notificationVisibility,
	useMergedConfigStore().mergedConfig.ignoreInactionableSeen,
	)
	},
	unseenNotificationsCount() {
	return this.unseenNotifications.length
	},
	followRequestCount() {
	return this.$store.state.api.followRequests.length
	},
	timelinesRoute() {
	let name
	if (useInterfaceStore().lastTimeline) {
	name = useInterfaceStore().lastTimeline
	}
	name = this.currentUser ? 'friends' : 'public-timeline'
	if (USERNAME_ROUTES.has(name)) {
	return { name, params: { username: this.currentUser.screen_name } }
	} else {
	return { name }
	}
	},
	...mapState(useAnnouncementsStore, [
	'supportsAnnouncements',
	'unreadAnnouncementCount',
	]),
	...mapState(useInstanceCapabilitiesStore, [
	'pleromaChatMessagesAvailable',
	'suggestionsEnabled',
	]),
	...mapState(useInstanceStore, ['privateMode', 'federating']),
	...mapState(useInstanceStore, {
	logo: (store) => store.instanceIdentity.logo,
	sitename: (store) => store.instanceIdentity.name,
	hideSitename: (store) => store.instanceIdentity.hideSitename,
	}),
	...mapState(useChatsStore, ['unreadChatsCount']),
	...mapGetters(['draftCount']),
	},
	methods: {
	toggleDrawer() {
	this.closed = !this.closed
	},
	doLogout() {
	this.logout()
	this.toggleDrawer()
	},
	touchStart(e) {
	GestureService.beginSwipe(e, this.closeGesture)
	},
	touchMove(e) {
	GestureService.updateSwipe(e, this.closeGesture)
	},
	...mapActions(useInterfaceStore, ['openSettingsModal']),
	},
	}

	export default SideDrawer
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index a33d295257..60411eead3 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,589 +1,590 @@
	import { uniqBy } from 'lodash'
	import { defineAsyncComponent } from 'vue'

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

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	import { useUserHighlightStore } from 'src/stores/user_highlight.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

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

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

	const Status = {
	name: 'Status',
	components: {
	PostStatusForm,
	UserAvatar,
	AvatarList,
	Timeago,
	StatusPopover,
	UserListPopover,
	EmojiReactions,
	StatusContent,
	MentionLink,
	MentionsLine,
	UserPopover,
	UserLink,
	Quote: defineAsyncComponent(() => import('src/components/quote/quote.vue')),
	StatusActionButtons,
	},
	props: {
	statusoid: Object,
	replies: Array,

	expandable: Boolean,
	focused: Boolean,
	compact: Boolean,
	isPreview: Boolean,
	noHeading: Boolean,
	inlineExpanded: Boolean,
	showPinned: Boolean,
	inProfile: Boolean,
	inConversation: Boolean,
	inQuote: Boolean,

	profileUserId: String,
	simpleTree: Boolean,
	showOtherRepliesAsButton: Boolean,
	canDive: Boolean,
	ignoreMute: Boolean,

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

	export default Status
	diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
	index 1a5b853013..dfea736a2b 100644
	--- a/src/components/status_action_buttons/action_button.js
	+++ b/src/components/status_action_buttons/action_button.js
	@@ -1,175 +1,176 @@
	import Popover from 'src/components/popover/popover.vue'
	import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
	import EmojiPicker from '../emoji_picker/emoji_picker.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 { useUsersStore } from 'src/stores/users.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBookmark as faBookmarkRegular,
	faFaceSmileBeam,
	faStar as faStarRegular,
	} from '@fortawesome/free-regular-svg-icons'
	import {
	faBookmark,
	faCheck,
	faChevronDown,
	faChevronRight,
	faComments,
	faExternalLinkAlt,
	faEye,
	faEyeSlash,
	faHistory,
	faList,
	faMinus,
	faPencil,
	faPlus,
	faReply,
	faRetweet,
	faShareAlt,
	faStar,
	faThumbtack,
	faTimes,
	faWrench,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faPlus,
	faMinus,
	faCheck,
	faTimes,
	faWrench,

	faChevronRight,
	faChevronDown,

	faReply,
	faRetweet,
	faStar,
	faStarRegular,
	faFaceSmileBeam,

	faBookmark,
	faBookmarkRegular,
	faEyeSlash,
	faEye,
	faThumbtack,
	faPencil,
	faShareAlt,
	faComments,
	faList,
	faExternalLinkAlt,
	faHistory,
	)

	export default {
	props: [
	'button',
	'status',
	'extra',
	'status',
	'funcArg',
	'getClass',
	'getComponent',
	'doAction',
	'outerClose',
	'defaultButtonStyle',
	'hideLabel',
	],
	components: {
	StatusBookmarkFolderMenu,
	EmojiPicker,
	Popover,
	},
	data: () => ({
	animationState: false,
	}),
	computed: {
	buttonClass() {
	return [
	this.button.name + '-button',
	{
	'-with-extra': this.button.name === 'bookmark',
	'-extra': this.extra,
	'-quick': !this.extra,
	},
	]
	},
	userIsMuted() {
	- return this.$store.getters.relationship(this.status.user.id).muting
	+ return useUsersStore().relationship(this.status.user.id).muting
	},
	threadIsMuted() {
	return this.status.thread_muted
	},
	hideCustomEmoji() {
	return !useInstanceCapabilitiesStore()
	.pleromaCustomEmojiReactionsAvailable
	},
	hidePostStats() {
	return useMergedConfigStore().mergedConfig.hidePostStats
	},
	buttonInnerClass() {
	const buttonStyleClass = this.defaultButtonStyle
	? 'button-default'
	: 'button-unstyled'
	return [
	this.button.name + '-button',
	{
	'main-button': this.extra,
	[buttonStyleClass]: !this.extra,
	'-active': this.button.active?.(this.funcArg),
	disabled: this.button.interactive
	? !this.button.interactive(this.funcArg)
	: false,
	},
	]
	},
	remoteInteractionLink() {
	return useInstanceStore().getRemoteInteractionLink({
	statusId: this.status.id,
	})
	},
	},
	methods: {
	addReaction(event) {
	const emoji = event.insertion
	const existingReaction = this.status.emoji_reactions.find(
	(r) => r.name === emoji,
	)
	if (existingReaction?.me) {
	this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
	} else {
	this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
	}
	},
	onShowEmojiPicker() {
	this.$emit('emojiPickerShown', true)
	},
	onHideEmojiPicker() {
	this.$emit('emojiPickerShown', false)
	},
	doActionWrap(
	button,
	close = () => {
	/* no-op */
	},
	) {
	if (
	this.button.interactive ? !this.button.interactive(this.funcArg) : false
	)
	return
	if (button.name === 'emoji') {
	this.$refs.picker.togglePicker()
	} else {
	this.animationState = true
	this.getComponent(button) === 'button' && this.doAction(button)
	setTimeout(() => {
	this.animationState = false
	}, 500)
	close()
	}
	},
	},
	}
	diff --git a/src/components/status_action_buttons/action_button_container.js b/src/components/status_action_buttons/action_button_container.js
	index d031bd6e94..3c371ac74e 100644
	--- a/src/components/status_action_buttons/action_button_container.js
	+++ b/src/components/status_action_buttons/action_button_container.js
	@@ -1,151 +1,150 @@
	import { defineAsyncComponent } from 'vue'

	import Popover from 'src/components/popover/popover.vue'
	import ActionButton from './action_button.vue'

	import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faEnvelope,
	faEye,
	faEyeSlash,
	faFolderTree,
	faGlobe,
	faLock,
	faLockOpen,
	faUser,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faUser,
	faGlobe,
	faFolderTree,
	faEye,
	faEyeSlash,
	faLock,
	faLockOpen,
	faEnvelope,
	)

	export default {
	components: {
	ActionButton,
	Popover,
	MuteConfirm: defineAsyncComponent(
	() => import('src/components/confirm_modal/mute_confirm.vue'),
	),
	UserTimedFilterModal: defineAsyncComponent(
	() =>
	import(
	'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
	),
	),
	},
	props: ['button', 'status', 'defaultButton', 'hideLabel'],
	emits: ['emojiPickerShown'],
	mounted() {
	if (this.button.name === 'mute') {
	this.$store.dispatch('fetchDomainMutes')
	}
	},
	data() {
	return {
	randomSeed: genRandomSeed(),
	}
	},
	computed: {
	buttonClass() {
	return [
	this.button.name + '-button',
	{
	'-with-extra': this.button.name === 'bookmark',
	'-extra': this.extra,
	'-quick': !this.extra,
	},
	]
	},
	user() {
	return this.status.user
	},
	userIsMuted() {
	- return this.$store.getters.relationship(this.user.id).muting
	+ return useUsersStore().relationship(this.user.id).muting
	},
	conversationIsMuted() {
	return this.status.thread_muted
	},
	domain() {
	return this.user.fqn.split('@')[1]
	},
	domainIsMuted() {
	- return new Set(this.$store.state.users.currentUser.domainMutes).has(
	- this.domain,
	- )
	+ return new Set(useUsersStore().currentUser.domainMutes).has(this.domain)
	},
	availableScopes() {
	return ['private', 'unlisted', 'direct', 'public'].filter((scope) => {
	return scope !== this.status.visibility
	})
	},
	},
	methods: {
	visibilityIcon(visibility) {
	switch (visibility) {
	case 'private':
	return 'lock'
	case 'unlisted':
	return 'lock-open'
	case 'direct':
	return 'envelope'
	case 'local':
	return 'igloo'
	default:
	return 'globe'
	}
	},
	unmuteUser() {
	return this.$store.dispatch('unmuteUser', this.user.id)
	},
	unmuteConversation() {
	return this.$store.dispatch('unmuteConversation', { id: this.status.id })
	},
	unmuteDomain() {
	return this.$store.dispatch('unmuteDomain', this.domain)
	},
	toggleUserMute() {
	if (this.userIsMuted) {
	this.unmuteUser()
	} else {
	this.$refs.confirmUser.optionallyPrompt()
	}
	},
	setScope(visibility) {
	return useAdminSettingsStore().changeStatusScope({
	id: this.status.id,
	visibility,
	})
	},
	setSensitive(sensitive) {
	useAdminSettingsStore().changeStatusScope({
	id: this.status.id,
	sensitive,
	})
	},
	toggleConversationMute() {
	if (this.conversationIsMuted) {
	this.unmuteConversation()
	} else {
	this.$refs.confirmConversation.optionallyPrompt()
	}
	},
	toggleDomainMute() {
	if (this.domainIsMuted) {
	this.unmuteDomain()
	} else {
	this.$refs.confirmDomain.optionallyPrompt()
	}
	},
	},
	}
	diff --git a/src/components/status_action_buttons/status_action_buttons.js b/src/components/status_action_buttons/status_action_buttons.js
	index 73ac6ff7ed..bbbdb79e56 100644
	--- a/src/components/status_action_buttons/status_action_buttons.js
	+++ b/src/components/status_action_buttons/status_action_buttons.js
	@@ -1,193 +1,194 @@
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

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

	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

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

	library.add(faEllipsisH)

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

	export default StatusActionButtons
	diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
	index 209abee99e..60e2f8522e 100644
	--- a/src/components/status_content/status_content.js
	+++ b/src/components/status_content/status_content.js
	@@ -1,110 +1,108 @@
	-import { mapState as mapPiniaState } from 'pinia'
	-import { mapState } from 'vuex'
	+import { mapState } from 'pinia'

	import Attachment from 'src/components/attachment/attachment.vue'
	import Gallery from 'src/components/gallery/gallery.vue'
	import LinkPreview from 'src/components/link-preview/link-preview.vue'
	import Poll from 'src/components/poll/poll.vue'
	import StatusBody from 'src/components/status_body/status_body.vue'

	import { useMediaViewerStore } from 'src/stores/media_viewer.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faCircleNotch,
	faFile,
	faImage,
	faLink,
	faMusic,
	faPollH,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faCircleNotch, faFile, faMusic, faImage, faLink, faPollH)

	const StatusContent = {
	name: 'StatusContent',
	props: {
	status: {
	// Main thing
	type: Object,
	required: true,
	},
	compact: {
	// Resizes emoji and minimizes vertical space used
	// Primarily used for showing status in react notifications
	type: Boolean,
	default: false,
	},
	collapse: {
	// replaces newlines with spaces
	type: Boolean,
	default: false,
	},
	singleLine: {
	// Show entire thing (subject and content) in a single line
	// Primarily used in chats
	type: Boolean,
	default: false,
	},
	inConversation: {
	// Whether status content is being shown in an (open) conversation
	// Used to control whether to display attachments or not
	type: Boolean,
	default: false,
	},
	},
	emits: ['parseReady', 'mediaplay', 'mediapause'],
	computed: {
	statusCard() {
	if (!this.status.card) return null
	return this.status.card.url === this.status.quote_url
	? null
	: this.status.card
	},
	hideAttachments() {
	return (
	!this.fullContent &&
	((this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation))
	)
	},
	attachmentSize() {
	if (this.compact) {
	return 'small'
	} else if (
	(this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation) \|\|
	this.status.attachments.length > this.maxThumbnails
	) {
	return 'hide'
	}
	return 'normal'
	},
	maxThumbnails() {
	return this.mergedConfig.maxThumbnails
	},
	- ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	- ...mapState({
	- currentUser: (state) => state.users.currentUser,
	- }),
	+ ...mapState(useMergedConfigStore, ['mergedConfig']),
	+ ...mapState(useUsersStore, ['currentUser']),
	},
	components: {
	Attachment,
	Poll,
	Gallery,
	LinkPreview,
	StatusBody,
	},
	methods: {
	setMedia() {
	const attachments =
	this.attachmentSize === 'hide'
	? this.status.attachments
	: this.galleryAttachments
	return () => useMediaViewerStore().setMedia(attachments)
	},
	},
	}

	export default StatusContent
	diff --git a/src/components/still-image/still-image-emoji-popover.js b/src/components/still-image/still-image-emoji-popover.js
	index 6db72c49f3..fc3f3bc0af 100644
	--- a/src/components/still-image/still-image-emoji-popover.js
	+++ b/src/components/still-image/still-image-emoji-popover.js
	@@ -1,72 +1,73 @@
	import Popover from 'components/popover/popover.vue'
	import SelectComponent from 'components/select/select.vue'
	import { mapState } from 'pinia'

	import { useAdminSettingsStore } from 'src/stores/admin_settings'
	import { useEmojiStore } from 'src/stores/emoji'
	import { useInterfaceStore } from 'src/stores/interface'
	+import { useUsersStore } from 'src/stores/users.js'

	export default {
	components: { Popover, SelectComponent },
	props: {
	shortcode: {
	type: String,
	required: true,
	},
	isLocal: {
	type: Boolean,
	required: true,
	},
	},
	data() {
	return {
	packName: '',
	}
	},
	computed: {
	isUserAdmin() {
	- return this.$store.state.users.currentUser?.rights.admin
	+ return useUsersStore().currentUser?.rights.admin
	},
	...mapState(useEmojiStore, ['adminPacksLocal', 'adminPacksLocalLoading']),
	},
	methods: {
	displayError(msg) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'admin_dash.emoji.error',
	messageArgs: [msg],
	level: 'error',
	})
	},
	copyToLocalPack() {
	useAdminSettingsStore()
	.addNewEmojiFile({
	packName: this.packName,
	file: this.$attrs.src,
	shortcode: this.shortcode,
	filename: '',
	})
	.then(({ data: resp }) => {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'admin_dash.emoji.copied_successfully',
	messageArgs: [this.shortcode, this.packName],
	level: 'success',
	})

	this.$refs.emojiPopover.hidePopover()
	this.packName = ''
	})
	.catch((e) => {
	this.displayError(e)
	return
	})
	},

	fetchEmojiPacksIfAdmin() {
	useEmojiStore()
	.getAdminPacksLocal()
	.then(() => {
	this.$refs.emojiPopover.updateStyles()
	})
	},
	},
	}
	diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
	index 17065a9ef3..de025a253f 100644
	--- a/src/components/timeline/timeline.js
	+++ b/src/components/timeline/timeline.js
	@@ -1,342 +1,343 @@
	import { debounce, keyBy, throttle } from 'lodash'
	import { mapState } from 'pinia'

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

	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import timelineFetcher from 'src/services/timeline_fetcher/timeline_fetcher.service.js'

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

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

	const Timeline = {
	props: [
	'timeline',
	'timelineName',
	'title',
	'userId',
	'listId',
	'statusId',
	'bookmarkFolderId',
	'tag',
	'embedded',
	'count',
	'pinnedStatusIds',
	'inProfile',
	'footerSlipgate', // reference to an element where we should put our footer
	],
	data() {
	return {
	showScrollTop: false,
	paused: false,
	unfocused: false,
	bottomedOut: false,
	virtualScrollIndex: 0,
	blockingClicks: false,
	}
	},
	components: {
	ScrollTopButton,
	Conversation,
	TimelineMenu,
	QuickFilterSettings,
	QuickViewSettings,
	},
	computed: {
	filteredVisibleStatuses() {
	return this.timeline.visibleStatuses.filter(
	(status) =>
	this.timelineName !== 'user' \|\|
	(status.id >= this.timeline.minId &&
	status.id <= this.timeline.maxId),
	)
	},
	filteredPinnedStatusIds() {
	return (this.pinnedStatusIds \|\| []).filter(
	(statusId) => this.timeline.statusesObject[statusId],
	)
	},
	newStatusCount() {
	return this.timeline.newStatusCount
	},
	showLoadButton() {
	return this.timeline.newStatusCount > 0 \|\| this.timeline.flushMarker !== 0
	},
	loadButtonString() {
	if (this.timeline.flushMarker !== 0) {
	return this.$t('timeline.reload')
	} else {
	return `${this.$t('timeline.show_new')} (${this.newStatusCount})`
	}
	},
	mobileLoadButtonString() {
	if (this.timeline.flushMarker !== 0) {
	return '+'
	} else {
	return this.newStatusCount > 99 ? '∞' : this.newStatusCount
	}
	},
	classes() {
	let rootClasses = !this.embedded
	? ['panel', 'panel-default']
	: ['-embedded']
	if (this.blockingClicks)
	rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
	return {
	root: rootClasses,
	header: ['timeline-heading'].concat(
	!this.embedded ? ['panel-heading', '-sticky'] : ['panel-body'],
	),
	body: ['timeline-body'].concat(
	!this.embedded ? ['panel-body'] : ['panel-body'],
	),
	footer: ['timeline-footer'].concat(
	!this.embedded ? ['panel-footer'] : ['panel-body'],
	),
	}
	},
	// id map of statuses which need to be hidden in the main list due to pinning logic
	pinnedStatusIdsObject() {
	return keyBy(this.pinnedStatusIds)
	},
	statusesToDisplay() {
	const amount = this.timeline.visibleStatuses.length
	const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
	const nonPinnedIndex =
	this.virtualScrollIndex - this.filteredPinnedStatusIds.length
	const min = Math.max(0, nonPinnedIndex - statusesPerSide)
	const max = Math.min(amount, nonPinnedIndex + statusesPerSide)
	return this.timeline.visibleStatuses.slice(min, max).map((_) => _.id)
	},
	virtualScrollingEnabled() {
	return useMergedConfigStore().mergedConfig.virtualScrolling
	},
	...mapState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	},
	created() {
	const store = this.$store
	- const credentials = store.state.users.currentUser.credentials
	+ const credentials = useUsersStore().currentUser.credentials
	const showImmediately = this.timeline.visibleStatuses.length === 0

	window.addEventListener('scroll', this.handleScroll)

	if (store.state.api.fetchers[this.timelineName]) {
	return false
	}

	timelineFetcher.fetchAndUpdate({
	store,
	credentials,
	timeline: this.timelineName,
	showImmediately,
	userId: this.userId,
	listId: this.listId,
	statusId: this.statusId,
	bookmarkFolderId: this.bookmarkFolderId,
	tag: this.tag,
	})
	},
	mounted() {
	if (document.hidden !== undefined) {
	document.addEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	this.unfocused = document.hidden
	}
	window.addEventListener('keydown', this.handleShortKey)
	setTimeout(this.determineVisibleStatuses, 250)
	},
	unmounted() {
	window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('keydown', this.handleShortKey)
	if (document.hidden !== undefined)
	document.removeEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	this.$store.commit('setLoading', {
	timeline: this.timelineName,
	value: false,
	})
	},
	methods: {
	stopBlockingClicks: debounce(function () {
	this.blockingClicks = false
	}, 1000),
	blockClicksTemporarily() {
	if (!this.blockingClicks) {
	this.blockingClicks = true
	}
	this.stopBlockingClicks()
	},
	handleShortKey(e) {
	// Ignore when input fields are focused
	if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
	if (e.key === '.') this.showNewStatuses()
	},
	showNewStatuses() {
	if (this.timeline.flushMarker !== 0) {
	this.$store.commit('clearTimeline', {
	timeline: this.timelineName,
	excludeUserId: true,
	})
	this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
	if (this.timelineName === 'user') {
	this.$store.dispatch('fetchPinnedStatuses', this.userId)
	}
	this.fetchOlderStatuses()
	} else {
	this.blockClicksTemporarily()
	this.$store.commit('showNewStatuses', { timeline: this.timelineName })
	this.paused = false
	}
	window.scrollTo({ top: 0 })
	},
	fetchOlderStatuses: throttle(
	function () {
	const store = this.$store
	- const credentials = store.state.users.currentUser.credentials
	+ const credentials = useUsersStore().currentUser.credentials
	store.commit('setLoading', { timeline: this.timelineName, value: true })
	timelineFetcher
	.fetchAndUpdate({
	store,
	credentials,
	timeline: this.timelineName,
	older: true,
	showImmediately: true,
	userId: this.userId,
	listId: this.listId,
	statusId: this.statusId,
	bookmarkFolderId: this.bookmarkFolderId,
	tag: this.tag,
	})
	.then(({ statuses }) => {
	if (statuses?.length === 0) {
	this.bottomedOut = true
	}
	})
	.finally(() =>
	store.commit('setLoading', {
	timeline: this.timelineName,
	value: false,
	}),
	)
	},
	1000,
	this,
	),
	determineVisibleStatuses() {
	if (!this.$refs.timeline) return
	if (!this.virtualScrollingEnabled) return

	const statuses = this.$refs.timeline.children
	const cappedScrollIndex = Math.max(
	0,
	Math.min(this.virtualScrollIndex, statuses.length - 1),
	)

	if (statuses.length === 0) return

	const height = Math.max(document.body.offsetHeight, window.pageYOffset)

	const centerOfScreen = window.pageYOffset + window.innerHeight * 0.5

	// Start from approximating the index of some visible status by using the
	// the center of the screen on the timeline.
	let approxIndex = Math.floor(statuses.length * (centerOfScreen / height))
	let err = statuses[approxIndex].getBoundingClientRect().y

	// if we have a previous scroll index that can be used, test if it's
	// closer than the previous approximation, use it if so

	const virtualScrollIndexY =
	statuses[cappedScrollIndex].getBoundingClientRect().y
	if (Math.abs(err) > virtualScrollIndexY) {
	approxIndex = cappedScrollIndex
	err = virtualScrollIndexY
	}

	// if the status is too far from viewport, check the next/previous ones if
	// they happen to be better
	while (err < -20 && approxIndex < statuses.length - 1) {
	err += statuses[approxIndex].offsetHeight
	approxIndex++
	}
	while (err > window.innerHeight + 100 && approxIndex > 0) {
	approxIndex--
	err -= statuses[approxIndex].offsetHeight
	}

	// this status is now the center point for virtual scrolling and visible
	// statuses will be nearby statuses before and after it
	this.virtualScrollIndex = approxIndex
	},
	scrollLoad() {
	const bodyBRect = document.body.getBoundingClientRect()
	const height = Math.max(bodyBRect.height, -bodyBRect.y)
	if (
	this.timeline.loading === false &&
	this.$el.offsetHeight > 0 &&
	window.innerHeight + window.pageYOffset >= height - 750
	) {
	this.fetchOlderStatuses()
	}
	},
	handleScroll: throttle(function (e) {
	this.determineVisibleStatuses()
	this.scrollLoad(e)
	}, 200),
	handleVisibilityChange() {
	this.unfocused = document.hidden
	},
	},
	watch: {
	filteredVisibleStatuses() {
	this.determineVisibleStatuses()
	},
	newStatusCount(count) {
	if (!useMergedConfigStore().mergedConfig.streaming) {
	return
	}
	if (count > 0) {
	// only 'stream' them when you're scrolled to the top
	const doc = document.documentElement
	const top = (window.pageYOffset \|\| doc.scrollTop) - (doc.clientTop \|\| 0)
	if (
	top < 15 &&
	!this.paused &&
	!(
	this.unfocused &&
	useMergedConfigStore().mergedConfig.pauseOnUnfocused
	)
	) {
	this.showNewStatuses()
	} else {
	this.paused = true
	}
	}
	},
	},
	}

	export default Timeline
	diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
	index ee6fa8f205..6b93f0af09 100644
	--- a/src/components/timeline_menu/timeline_menu.js
	+++ b/src/components/timeline_menu/timeline_menu.js
	@@ -1,127 +1,125 @@
	-import { mapState as mapPiniaState } from 'pinia'
	-import { mapState } from 'vuex'
	+import { mapState } from 'pinia'

	import BookmarkFoldersMenuContent from 'src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue'
	import ListsMenuContent from 'src/components/lists_menu/lists_menu_content.vue'
	import { filterNavigation } from 'src/components/navigation/filter.js'
	import { TIMELINES } from 'src/components/navigation/navigation.js'
	import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
	import Popover from 'src/components/popover/popover.vue'

	import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface'
	import { useListsStore } from 'src/stores/lists'
	+import { useUsersStore } from 'src/stores/users.js'

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

	library.add(faChevronDown)

	// Route -> i18n key mapping, exported and not in the computed
	// because nav panel benefits from the same information.
	export const timelineNames = (supportsBookmarkFolders) => {
	return {
	friends: 'nav.home_timeline',
	bookmarks: supportsBookmarkFolders ? 'nav.all_bookmarks' : 'nav.bookmarks',
	dms: 'nav.dms',
	'public-timeline': 'nav.public_tl',
	'public-external-timeline': 'nav.twkn',
	quotes: 'nav.quotes',
	bubble: 'nav.bubble',
	}
	}

	const TimelineMenu = {
	components: {
	Popover,
	NavigationEntry,
	ListsMenuContent,
	BookmarkFoldersMenuContent,
	},
	data() {
	return {
	isOpen: false,
	}
	},
	created() {
	if (timelineNames(this.bookmarkFolders)[this.$route.name]) {
	useInterfaceStore().setLastTimeline(this.$route.name)
	}
	},
	computed: {
	useListsMenu() {
	const route = this.$route.name
	return route === 'lists-timeline'
	},
	useBookmarkFoldersMenu() {
	const route = this.$route.name
	return (
	this.bookmarkFolders &&
	(route === 'bookmark-folder' \|\| route === 'bookmarks')
	)
	},
	- ...mapPiniaState(useInstanceCapabilitiesStore, [
	+ ...mapState(useInstanceCapabilitiesStore, [
	'pleromaChatMessagesAvailable',
	'pleromaBookmarkFoldersAvailable',
	'bookmarkFolders',
	'localBubble',
	]),
	- ...mapPiniaState(useInstanceStore, ['privateMode', 'federating']),
	- ...mapState({
	- currentUser: (state) => state.users.currentUser,
	- }),
	+ ...mapState(useInstanceStore, ['privateMode', 'federating']),
	+ ...mapState(useUsersStore, ['currentUser']),
	timelinesList() {
	return filterNavigation(
	Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
	{
	hasChats: this.pleromaChatMessagesAvailable,
	isFederating: this.federating,
	isPrivate: this.privateMode,
	currentUser: this.currentUser,
	supportsBookmarkFolders: this.pleromaBookmarkFoldersAvailable,
	supportsBubbleTimeline: this.localBubble,
	},
	)
	},
	},
	methods: {
	openMenu() {
	// $nextTick is too fast, animation won't play back but
	// instead starts in fully open position. Low values
	// like 1-5 work on fast machines but not on mobile, 25
	// seems like a good compromise that plays without significant
	// added lag.
	setTimeout(() => {
	this.isOpen = true
	}, 25)
	},
	blockOpen(event) {
	// For the blank area inside the button element.
	// Just setting @click.stop="" makes unintuitive behavior when
	// menu is open and clicking on the blank area doesn't close it.
	if (!this.isOpen) {
	event.stopPropagation()
	}
	},
	timelineName() {
	const route = this.$route.name
	if (route === 'tag-timeline') {
	return '#' + this.$route.params.tag
	}
	if (route === 'lists-timeline') {
	return useListsStore().findListTitle(this.$route.params.id)
	}
	if (route === 'bookmark-folder') {
	return useBookmarkFoldersStore().findBookmarkFolderName(
	this.$route.params.id,
	)
	}
	const i18nkey = timelineNames(this.bookmarkFolders)[this.$route.name]
	return i18nkey ? this.$t(i18nkey) : route
	},
	},
	}

	export default TimelineMenu
	diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js
	index 2a9fb7f60b..6e60a64575 100644
	--- a/src/components/update_notification/update_notification.js
	+++ b/src/components/update_notification/update_notification.js
	@@ -1,90 +1,91 @@
	import Modal from 'src/components/modal/modal.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

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

	library.add(faTimes)

	export const CURRENT_UPDATE_COUNTER = 2

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

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

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

	export default UpdateNotification
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index b6e720c6fb..f4b1123e27 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,625 +1,623 @@
	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 FollowButton from 'src/components/follow_button/follow_button.vue'
	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 { usePostStatusStore } from 'src/stores/post_status'
	import { useUserHighlightStore } from 'src/stores/user_highlight.js'
	+import { useUsersStore } from 'src/stores/users.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,
	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)
	+ const user = useUsersStore().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)
	+ useUsersStore().fetchUserRelationship(this.user.id)
	},
	computed: {
	escapedNewBio() {
	return ldEscape(this.newBio).replaceAll('\n', '<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)
	+ return useUsersStore().findUser(this.userId)
	},
	role() {
	return this.user.role
	},
	relationship() {
	- return this.$store.getters.relationship(this.userId)
	+ return useUsersStore().relationship(this.userId)
	},
	isOtherUser() {
	- return this.user.id !== this.$store.state.users.currentUser.id
	+ return this.user.id !== useUsersStore().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
	+ return useUsersStore().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,
	- )
	+ !useUsersStore().currentUser.profile_image_url \|\|
	+ useUsersStore().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)
	+ !useUsersStore().currentUser.cover_photo \|\|
	+ useUsersStore().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
	},
	pauseMfm() {
	return this.mergedConfig.pauseMfm
	},
	scaleMfm() {
	return this.mergedConfig.scaleMfm
	},
	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: 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
	+ const user = useUsersStore().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(({ data: user }) => {
	+ .then(({ data: user, ...rest }) => {
	this.newFields.splice(this.newFields.length)
	merge(this.newFields, user.fields)
	- this.$store.commit('addNewUsers', [user])
	- this.$store.commit('setCurrentUser', user)
	+ useUsersStore().addNewUsers({ data: user, ...rest })
	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/user_panel/user_panel.js b/src/components/user_panel/user_panel.js
	index 08270a1c67..ed74c86c73 100644
	--- a/src/components/user_panel/user_panel.js
	+++ b/src/components/user_panel/user_panel.js
	@@ -1,21 +1,20 @@
	-import { mapState } from 'vuex'
	+import { mapState } from 'pinia'

	import AuthForm from 'src/components/auth_form/auth_form.js'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import UserCard from 'src/components/user_card/user_card.vue'

	+import { useUsersStore } from 'src/stores/users.js'
	+
	const UserPanel = {
	computed: {
	- signedIn() {
	- return this.user
	- },
	- ...mapState({ user: (state) => state.users.currentUser }),
	+ ...mapState(useUsersStore, ['currentUser', 'loggedIn']),
	},
	components: {
	PostStatusForm,
	UserCard,
	AuthForm,
	},
	}

	export default UserPanel
	diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
	index 0f9260c4a9..3dc1ef9332 100644
	--- a/src/components/user_panel/user_panel.vue
	+++ b/src/components/user_panel/user_panel.vue
	@@ -1,49 +1,49 @@
	<template>
	<aside class="user-panel">
	<div
	- v-if="signedIn"
	+ v-if="loggedIn"
	key="user-panel-signed"
	class="panel panel-default signed-in"
	>
	<UserCard
	- :user-id="user.id"
	+ :user-id="currentUser.id"
	:hide-bio="true"
	/>
	<PostStatusForm />
	</div>
	<AuthForm
	v-else
	key="user-panel"
	/>
	</aside>
	</template>

	<script src="./user_panel.js"></script>

	<style lang="scss">
	.user-panel {
	.panel {
	background: var(--background);
	backdrop-filter: var(--backdrop-filter);
	}

	.user-info {
	margin: 0.6em 0.6em 0;

	.Avatar {
	width: 5em;
	width: calc(min(5em, 20cqw));
	height: 5em;
	height: calc(min(5em, 20cqw));
	}
	}

	.post-status-form {
	margin: 0.5em;
	}

	.signed-in {
	z-index: 10;
	}
	}
	</style>
	diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
	index eb1d8e0683..310d66d1df 100644
	--- a/src/components/user_profile/user_profile.js
	+++ b/src/components/user_profile/user_profile.js
	@@ -1,208 +1,205 @@
	import { get } from 'lodash'

	import FollowCard from 'src/components/follow_card/follow_card.vue'
	import List from 'src/components/list/list.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	import Timeline from 'src/components/timeline/timeline.vue'
	import UserCard from 'src/components/user_card/user_card.vue'

	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

	library.add(faCircleNotch)

	const defaultTabKey = 'statuses'

	const UserProfile = {
	data() {
	return {
	error: false,
	userId: null,
	tab: defaultTabKey,
	footerRef: null,
	}
	},
	created() {
	const routeParams = this.$route.params
	this.load({ name: routeParams.name, id: routeParams.id })
	this.tab = get(this.$route, 'query.tab', defaultTabKey)
	useInterfaceStore().setForeignProfileBackground(this.user?.background_image)
	},
	updated() {
	useInterfaceStore().setForeignProfileBackground(this.user?.background_image)
	},
	unmounted() {
	this.stopFetching()
	useInterfaceStore().setForeignProfileBackground(null)
	this.$store.dispatch('clearFollowers', this.userId)
	this.$store.dispatch('clearFriends', this.userId)
	},
	computed: {
	timeline() {
	return this.$store.state.statuses.timelines.user
	},
	favorites() {
	return this.$store.state.statuses.timelines.favorites
	},
	media() {
	return this.$store.state.statuses.timelines.media
	},
	isUs() {
	return (
	this.userId &&
	- this.$store.state.users.currentUser.id &&
	- this.userId === this.$store.state.users.currentUser.id
	+ useUsersStore().currentUser.id &&
	+ this.userId === useUsersStore().currentUser.id
	)
	},
	user() {
	- return this.$store.getters.findUser(this.userId)
	+ return useUsersStore().findUser(this.userId)
	},
	isExternal() {
	return this.$route.name === 'external-user-profile'
	},
	followsTabVisible() {
	return this.isUs \|\| !this.user.hide_follows
	},
	followersTabVisible() {
	return this.isUs \|\| !this.user.hide_followers
	},
	favoritesTabVisible() {
	return (
	this.isUs \|\|
	(useInstanceCapabilitiesStore().pleromaPublicFavouritesAvailable &&
	!this.user.hide_favorites)
	)
	},
	compactProfiles() {
	return useMergedConfigStore().mergedConfig.compactProfiles
	},
	friends() {
	- return get(
	- this.$store.getters.findUser(this.userId),
	- 'friendIds',
	- [],
	- ).map((id) => this.$store.getters.findUser(id))
	+ return get(useUsersStore().findUser(this.userId), 'friendIds', []).map(
	+ (id) => useUsersStore().findUser(id),
	+ )
	},
	followers() {
	- return get(
	- this.$store.getters.findUser(this.userId),
	- 'followerIds',
	- [],
	- ).map((id) => this.$store.getters.findUser(id))
	+ return get(useUsersStore().findUser(this.userId), 'followerIds', []).map(
	+ (id) => useUsersStore().findUser(id),
	+ )
	},
	},
	methods: {
	setFooterRef(el) {
	this.footerRef = el
	},
	fetchUsers(group) {
	return () =>
	this.$store
	.dispatch('fetch' + group, this.userId)
	.then((result) => ({ items: result }))
	},
	load(userNameOrId) {
	const startFetchingTimeline = (timeline, userId) => {
	// Clear timeline only if load another user's profile
	if (userId !== this.$store.state.statuses.timelines[timeline].userId) {
	this.$store.commit('clearTimeline', { timeline })
	}
	this.$store.dispatch('startFetchingTimeline', { timeline, userId })
	}

	const loadById = (userId) => {
	this.userId = userId
	startFetchingTimeline('user', userId)
	startFetchingTimeline('media', userId)
	if (this.isUs) {
	startFetchingTimeline('favorites')
	} else if (!this.user.hide_favorites) {
	startFetchingTimeline('favorites', userId)
	}
	// Fetch all pinned statuses immediately
	this.$store.dispatch('fetchPinnedStatuses', userId)
	}

	// Reset view
	this.userId = null
	this.error = false

	const maybeId = userNameOrId.id
	const maybeName = userNameOrId.name

	// Check if user data is already loaded in store
	const user = maybeId
	- ? this.$store.getters.findUser(maybeId)
	- : this.$store.getters.findUserByName(maybeName)
	+ ? useUsersStore().findUser(maybeId)
	+ : useUsersStore().findUserByName(maybeName)
	if (user) {
	loadById(user.id)
	} else {
	;(maybeId
	? this.$store.dispatch('fetchUser', maybeId)
	: this.$store.dispatch('fetchUserByName', maybeName)
	)
	.then(({ id }) => loadById(id))
	.catch((reason) => {
	const errorMessage = get(reason, 'error.error')
	if (errorMessage === 'No user with such user_id') {
	// Known error
	this.error = this.$t('user_profile.profile_does_not_exist')
	} else if (errorMessage) {
	this.error = errorMessage
	} else {
	this.error = this.$t('user_profile.profile_loading_error')
	}
	})
	}
	},
	stopFetching() {
	this.$store.dispatch('stopFetchingTimeline', 'user')
	this.$store.dispatch('stopFetchingTimeline', 'favorites')
	this.$store.dispatch('stopFetchingTimeline', 'media')
	},
	switchUser(userNameOrId) {
	this.stopFetching()
	this.load(userNameOrId)
	},
	onTabSwitch(tab) {
	this.tab = tab
	this.$router.replace({ query: { tab } })
	},
	linkClicked({ target }) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	},
	watch: {
	'$route.params.id': function (newVal) {
	if (newVal) {
	this.switchUser({ id: newVal })
	}
	},
	'$route.params.name': function (newVal) {
	if (newVal) {
	this.switchUser({ name: newVal })
	}
	},
	'$route.query': function (newVal) {
	this.tab = newVal.tab \|\| defaultTabKey
	},
	},
	components: {
	UserCard,
	Timeline,
	List,
	FollowCard,
	TabSwitcher,
	},
	}

	export default UserProfile
	diff --git a/src/components/user_profile/user_profile_admin_view.js b/src/components/user_profile/user_profile_admin_view.js
	index da2c6c322f..342ca11097 100644
	--- a/src/components/user_profile/user_profile_admin_view.js
	+++ b/src/components/user_profile/user_profile_admin_view.js
	@@ -1,68 +1,69 @@
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import List from 'src/components/list/list.vue'
	import Status from 'src/components/status/status.vue'
	import UserCard from 'src/components/user_card/user_card.vue'

	import { useAdminSettingsStore } from 'src/stores/admin_settings.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

	library.add(faCircleNotch)

	const UserProfileAdminView = {
	data() {
	return {
	godmode: false,
	showReblogs: false,
	}
	},
	created() {
	this.$store.dispatch('fetchUserIfMissing', this.userId)
	useInterfaceStore().setForeignProfileBackground(this.user?.background_image)
	},
	updated() {
	useInterfaceStore().setForeignProfileBackground(this.user?.background_image)
	},
	unmounted() {
	useInterfaceStore().setForeignProfileBackground(null)
	},
	computed: {
	fetchOptions() {
	return {
	pageSize: 20,
	godmode: this.godmode,
	id: this.userId,
	withReblogs: this.showReblogs,
	}
	},
	user() {
	- return this.$store.getters.findUser(this.userId)
	+ return useUsersStore().findUser(this.userId)
	},
	userId() {
	return this.$route.params.id
	},
	},
	methods: {
	fetchStatuses(page) {
	return useAdminSettingsStore().fetchStatuses({
	...this.fetchOptions,
	page,
	})
	},
	},
	components: {
	UserCard,
	List,
	Status,
	Checkbox,
	},
	watch: {
	fetchOptions() {
	this.$refs.list.reset()
	},
	},
	}

	export default UserProfileAdminView
	diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
	index 017a17efac..2323054150 100644
	--- a/src/components/user_reporting_modal/user_reporting_modal.js
	+++ b/src/components/user_reporting_modal/user_reporting_modal.js
	@@ -1,107 +1,108 @@
	import { mapState } from 'pinia'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import List from 'src/components/list/list.vue'
	import Modal from 'src/components/modal/modal.vue'
	import UserLink from 'src/components/user_link/user_link.vue'

	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useReportsStore } from 'src/stores/reports.js'
	+import { useUsersStore } from 'src/stores/users.js'

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

	const UserReportingModal = {
	components: {
	List,
	Checkbox,
	Modal,
	UserLink,
	},
	data() {
	return {
	comment: '',
	forward: false,
	statusIdsToReport: new Set(),
	processing: false,
	error: false,
	}
	},
	computed: {
	isLoggedIn() {
	- return !!this.$store.state.users.currentUser
	+ return !!useUsersStore().currentUser
	},
	isOpen() {
	return this.isLoggedIn && this.reportModal.activated
	},
	userId() {
	return this.reportModal.userId
	},
	user() {
	- return this.$store.getters.findUser(this.userId)
	+ return useUsersStore().findUser(this.userId)
	},
	remoteInstance() {
	return (
	!this.user.is_local &&
	this.user.screen_name.substr(this.user.screen_name.indexOf('@') + 1)
	)
	},
	...mapState(useReportsStore, ['reportModal']),
	},
	watch: {
	userId: 'resetState',
	},
	methods: {
	resetState() {
	// Reset state
	this.comment = ''
	this.forward = false
	this.statusIdsToReport = new Set(this.reportModal.preTickedIds)
	this.processing = false
	this.error = false
	},
	closeModal() {
	useReportsStore().closeUserReportingModal()
	},
	onListSelect(selected) {
	this.statusIdsToReport = selected
	},
	reportUser() {
	this.processing = true
	this.error = false
	const params = {
	userId: this.userId,
	comment: this.comment,
	forward: this.forward,
	statusIds: [...this.statusIdsToReport],
	credentials: useOAuthStore().token,
	}
	reportUser({ ...params })
	.then(() => {
	this.processing = false
	this.resetState()
	this.closeModal()
	})
	.catch(() => {
	this.processing = false
	this.error = true
	})
	},
	clearError() {
	this.error = false
	},
	resize(e) {
	const target = e.target \|\| e
	if (!(target instanceof window.Element)) {
	return
	}
	// Auto is needed to make textbox shrink when removing lines
	target.style.height = 'auto'
	target.style.height = `${target.scrollHeight}px`
	if (target.value === '') {
	target.style.height = null
	}
	},
	},
	}

	export default UserReportingModal
	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 7a65ba39d2..7e241d6eb8 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,86 @@
	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 { useUsersStore } from 'src/stores/users.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(({ 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
	+ const credentials = panel.$useUsersStore().currentUser.credentials
	if (credentials) {
	panel.usersToFollow.forEach((toFollow) => {
	toFollow.name = 'Loading...'
	})
	suggestions({ credentials }).then(({ data: reply }) => {
	showWhoToFollow(panel, reply)
	})
	}
	}

	const WhoToFollowPanel = {
	data: () => ({
	usersToFollow: [],
	}),
	computed: {
	user: function () {
	- return this.$store.state.users.currentUser.screen_name
	+ return useUsersStore().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/lib/persisted_state.js b/src/lib/persisted_state.js
	index 5fcf259aa5..a4dfe7d00e 100644
	--- a/src/lib/persisted_state.js
	+++ b/src/lib/persisted_state.js
	@@ -1,264 +1,256 @@
	import { cloneDeep, each, get, merge, set } from 'lodash'

	import { storage } from './storage.js'

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

	let loaded = false

	const defaultReducer = (state, paths) =>
	paths.length === 0
	? state
	: paths.reduce((substate, path) => {
	set(substate, path, get(state, path))
	return substate
	}, {})

	const saveImmedeatelyActions = [
	'markNotificationsAsSeen',
	- 'clearCurrentUser',
	- 'setCurrentUser',
	'setHighlight',
	'setOption',
	'setClientData',
	'setToken',
	'clearToken',
	]

	const defaultStorage = (() => {
	return storage
	})()

	export default function createPersistedState({
	key = 'vuex-lz',
	paths = [],
	getState = (key, storage) => {
	const value = storage.getItem(key)
	return value
	},
	setState = (key, state, storage) => {
	if (!loaded) {
	console.info('waiting for old state to be loaded...')
	return Promise.resolve()
	} else {
	return storage.setItem(key, state)
	}
	},
	reducer = defaultReducer,
	storage = defaultStorage,
	subscriber = (store) => (handler) => store.subscribe(handler),
	} = {}) {
	return getState(key, storage).then((savedState) => {
	return (store) => {
	try {
	if (savedState !== null && typeof savedState === 'object') {
	// build user cache
	const usersState = savedState.users \|\| {}
	usersState.usersObject = {}
	const users = usersState.users \|\| []
	each(users, (user) => {
	usersState.usersObject[user.id] = user
	})
	savedState.users = usersState

	store.replaceState(merge({}, store.state, savedState))
	}
	loaded = true
	} catch (e) {
	console.error("Couldn't load state")
	console.error(e)
	loaded = true
	}
	subscriber(store)((mutation, state) => {
	try {
	if (saveImmedeatelyActions.includes(mutation.type)) {
	setState(key, reducer(cloneDeep(state), paths), storage).then(
	(success) => {
	if (success !== undefined) {
	- if (
	- mutation.type === 'setOption' \|\|
	- mutation.type === 'setCurrentUser'
	- ) {
	+ if (mutation.type === 'setOption') {
	useInterfaceStore().settingsSaved({ success })
	}
	}
	},
	(error) => {
	- if (
	- mutation.type === 'setOption' \|\|
	- mutation.type === 'setCurrentUser'
	- ) {
	+ if (mutation.type === 'setOption') {
	useInterfaceStore().settingsSaved({ error })
	}
	},
	)
	}
	} catch (e) {
	console.error("Couldn't persist state:")
	console.error(e)
	}
	})
	}
	})
	}

	/**
	* This persists state for pinia, which falls back to read from the vuex state
	* if pinia persisted state does not exist.
	*
	* When you migrate a module from vuex to pinia, you have to keep the original name.
	* If the module was called `xxx`, the name of the store has to be `xxx` too.
	*
	* This adds one property to the store, $persistLoaded, which is a promise
	* that resolves when the initial state is loaded. If the plugin is not enabled,
	* $persistLoaded is a promise that resolves immediately.
	* If we are not able to get the stored state because storage.getItem() throws or
	* rejects, $persistLoaded will be a rejected promise with the thrown error.
	*
	* Call signature:
	*
	* defineStore(name, {
	* ...,
	* // setting the `persist` property enables this plugin
	* // IMPORTANT: by default it is disabled, you have to set `persist` to at least an empty object
	* persist: {
	* // set to list of individual paths, or undefined/unset to persist everything
	* paths: [],
	* // function to call after loading initial state
	* // if afterLoad is a function, it must return a state object that will be sent to `store.$patch`, or a promise to the state object
	* // by default afterLoad is undefined
	* afterLoad: (originalState) => {
	* // ...
	* return modifiedState
	* },
	* // if it exists, only persist state after these actions
	* // if it doesn't exist or is undefined, persist state after every mutation of the state
	* saveImmediatelyActions: [],
	* // what to do after successfully saving the state
	* onSaveSuccess: () => {},
	* // what to do after there is an error saving the state
	* onSaveError: () => {}
	* }
	* })
	*
	*/
	export const piniaPersistPlugin =
	({
	vuexKey = 'vuex-lz',
	keyFunction = (id) => `pinia-local-${id}`,
	storage = defaultStorage,
	reducer = defaultReducer,
	} = {}) =>
	({ store, options }) => {
	if (!options.persist) {
	return {
	$persistLoaded: Promise.resolve(),
	}
	}

	let resolveLoaded
	let rejectLoaded
	const loadedPromise = new Promise((resolve, reject) => {
	resolveLoaded = resolve
	rejectLoaded = reject
	})

	const {
	afterLoad,
	paths = [],
	saveImmediatelyActions,
	onSaveSuccess = () => {
	/* no-op */
	},
	onSaveError = () => {
	/* no-op */
	},
	} = options.persist \|\| {}

	const loadedGuard = { loaded: false }
	const key = keyFunction(store.$id)
	const getState = async () => {
	const id = store.$id
	const value = await storage.getItem(key)
	if (value) {
	return value
	}

	const fallbackValue = await storage.getItem(vuexKey)
	if (fallbackValue?.[id]) {
	console.info(`Migrating ${id} store data from vuex to pinia`)
	const res = fallbackValue[id]
	await storage.setItem(key, res)
	return res
	}

	return {}
	}

	const setState = (state) => {
	if (!loadedGuard.loaded) {
	console.info('waiting for old state to be loaded...')
	throw new Error('Waiting')
	} else {
	return storage.setItem(key, state)
	}
	}

	const getMaybeAugmentedState = async () => {
	const savedRawState = await getState()
	if (typeof afterLoad === 'function') {
	try {
	return await afterLoad(savedRawState)
	} catch (e) {
	console.error('Error running afterLoad:', e)
	return savedRawState
	}
	} else {
	return savedRawState
	}
	}

	const persistCurrentState = async (state) => {
	const stateClone = cloneDeep(state)
	const stateToPersist = reducer(stateClone, paths)
	try {
	const res = await setState(stateToPersist)
	onSaveSuccess(res)
	} catch (e) {
	console.error('Cannot persist state:', e)
	onSaveError(e)
	}
	}

	getMaybeAugmentedState().then(
	(savedState) => {
	if (savedState) {
	store.$patch(savedState)
	}

	loadedGuard.loaded = true
	resolveLoaded()

	// only subscribe after we have done setting the initial state
	if (!saveImmediatelyActions) {
	store.$subscribe(async (_mutation, state) => {
	await persistCurrentState(state)
	})
	} else {
	store.$onAction(({ name, store, after }) => {
	if (saveImmediatelyActions.includes(name)) {
	after(() => persistCurrentState(store.$state))
	}
	})
	}
	},
	(error) => {
	console.error('Cannot load storage:', error)
	rejectLoaded(error)
	},
	)

	return {
	$persistLoaded: loadedPromise,
	}
	}
	diff --git a/src/lib/push_notifications_plugin.js b/src/lib/push_notifications_plugin.js
	index f4dcb1dbcb..5f8d65abac 100644
	--- a/src/lib/push_notifications_plugin.js
	+++ b/src/lib/push_notifications_plugin.js
	@@ -1,93 +1,95 @@
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	export const piniaPushNotificationsPlugin = ({ store }) => {
	if (
	store.$id !== 'sync_config' &&
	store.$id !== 'instance' &&
	store.$id !== 'interface'
	)
	return

	store.$onAction(({ name: actionName, args }) => {
	if (
	store.$id === 'interface' &&
	actionName !== 'setNotificationPermission' &&
	actionName !== 'setLoginStatus'
	)
	return

	// Initial state
	let vapidPublicKey = useInstanceStore().vapidPublicKey
	let enabled = useMergedConfigStore().mergedConfig.webPushNotifications
	let permissionGranted =
	useInterfaceStore().notificationPermission === 'granted'
	let permissionPresent =
	useInterfaceStore().notificationPermission !== undefined
	- let user = !!window.vuex.state.users.currentUser
	+ let user = !!useUsersStore().currentUser

	if (store.$id === 'instance') {
	if (actionName === 'set' && args[0].path === 'vapidPublicKey') {
	const { value } = args[0]
	vapidPublicKey = value
	}
	}

	if (!vapidPublicKey \|\| !permissionPresent) {
	return
	}

	if (store.$id === 'interface') {
	if (actionName === 'setNotificationPermission') {
	permissionGranted = args[0] === 'granted'
	} else if (actionName === 'setLoginStatus') {
	user = args[0]
	} else {
	return
	}
	} else if (store.$id === 'sync_config') {
	if (
	actionName === 'setPreference' &&
	args[0].path === 'simple.webPushNotifications'
	) {
	const { value } = args[0]
	enabled = value
	} else {
	return
	}
	}

	if (permissionGranted && enabled && user) {
	return window.vuex.dispatch('registerPushNotifications')
	} else {
	return window.vuex.dispatch('unregisterPushNotifications')
	}
	})
	}

	+// TODO make it work with pinia
	export const vuexPushNotificationsPlugin = (store) => {
	store.subscribe((mutation, state) => {
	// Initial state
	const vapidPublicKey = useInstanceStore().vapidPublicKey
	const enabled = useMergedConfigStore().mergedConfig.webPushNotifications
	const permissionGranted =
	useInterfaceStore().notificationPermission === 'granted'
	const permissionPresent =
	useInterfaceStore().notificationPermission !== undefined
	const user = state.users.currentUser

	if (!permissionPresent \|\| !vapidPublicKey) return

	if (
	mutation.type === 'setCurrentUser' \|\|
	mutation.type === 'clearCurrentUser'
	) {
	if (user && permissionGranted && enabled) {
	return store.dispatch('registerPushNotifications')
	} else {
	return store.dispatch('unregisterPushNotifications')
	}
	}
	})
	}
	diff --git a/src/modules/index.js b/src/modules/index.js
	index c8f3dce39c..9b469c6dfa 100644
	--- a/src/modules/index.js
	+++ b/src/modules/index.js
	@@ -1,15 +1,13 @@
	import api from './api.js'
	import drafts from './drafts.js'
	import notifications from './notifications.js'
	import profileConfig from './profileConfig.js'
	import statuses from './statuses.js'
	-import users from './users.js'

	export default {
	statuses,
	notifications,
	- users,
	api,
	profileConfig,
	drafts,
	}
	diff --git a/src/modules/notifications.js b/src/modules/notifications.js
	index b77683811e..100de3974f 100644
	--- a/src/modules/notifications.js
	+++ b/src/modules/notifications.js
	@@ -1,192 +1,193 @@
	import {
	closeAllDesktopNotifications,
	closeDesktopNotification,
	} from '../services/desktop_notification_utils/desktop_notification_utils.js'
	import {
	isStatusNotification,
	isValidNotification,
	maybeShowNotification,
	} from '../services/notification_utils/notification_utils.js'

	import { useI18nStore } from 'src/stores/i18n.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useReportsStore } from 'src/stores/reports.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import { dismissNotification, markNotificationsAsSeen } from 'src/api/user.js'

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

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

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

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

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

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

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

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

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

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

	maybeShowNotification(
	store,
	useMergedConfigStore().mergedConfig.notificationVisibility,
	Object.values(useSyncConfigStore().prefsStorage.simple.muteFilters),
	notification,
	useI18nStore().i18n,
	)
	} else if (notification.seen) {
	state.idStore[notification.id].seen = true
	}
	})
	},
	notificationClicked({ state, dispatch }, { id }) {
	const notification = state.idStore[id]
	const { type, seen } = notification

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

	export default notifications
	diff --git a/src/modules/profileConfig.js b/src/modules/profileConfig.js
	index 3fca7d6a85..8b9c77425e 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 { useUsersStore } from 'src/stores/users.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(({ data: result }) => {
	- commit('addNewUsers', [result])
	- commit('setCurrentUser', result)
	+ }).then((result) => {
	+ useUsersStore().addNewUsers(result)
	})
	}

	const notificationsApi = ({ rootState, commit }, { path, value, oldValue }) => {
	const settings = {}
	set(settings, path, value)
	return updateNotificationSettings({
	settings,
	credentials: useOAuthStore().token,
	}).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/modules/statuses.js b/src/modules/statuses.js
	index f39da5b3f6..bcef660a03 100644
	--- a/src/modules/statuses.js
	+++ b/src/modules/statuses.js
	@@ -1,901 +1,902 @@
	import {
	each,
	find,
	findIndex,
	first,
	last,
	maxBy,
	merge,
	minBy,
	omitBy,
	remove,
	} from 'lodash'

	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import {
	fetchEmojiReactions,
	fetchFavoritedByUsers,
	fetchPinnedStatuses,
	fetchRebloggedByUsers,
	fetchScrobbles,
	fetchStatus,
	fetchStatusHistory,
	fetchStatusSource,
	search2,
	} from 'src/api/public.js'
	import {
	bookmarkStatus,
	deleteStatus,
	favorite,
	muteConversation,
	pinOwnStatus,
	reactWithEmoji,
	retweet,
	unbookmarkStatus,
	unfavorite,
	unmuteConversation,
	unpinOwnStatus,
	unreactWithEmoji,
	unretweet,
	} from 'src/api/user.js'

	const emptyTl = (userId = 0) => ({
	statuses: [],
	statusesObject: {},
	faves: [],
	visibleStatuses: [],
	visibleStatusesObject: {},
	newStatusCount: 0,
	maxId: '',
	minId: '',
	minVisibleId: 0,
	loading: false,
	followers: [],
	friends: [],
	userId,
	flushMarker: 0,
	})

	export const defaultState = () => ({
	allStatuses: [],
	scrobblesNextFetch: {},
	allStatusesObject: {},
	conversationsObject: {},
	maxId: '',
	favorites: new Set(),
	timelines: {
	mentions: emptyTl(),
	public: emptyTl(),
	user: emptyTl(),
	favorites: emptyTl(),
	media: emptyTl(),
	publicAndExternal: emptyTl(),
	friends: emptyTl(),
	tag: emptyTl(),
	dms: emptyTl(),
	bookmarks: emptyTl(),
	list: emptyTl(),
	bubble: emptyTl(),
	},
	})

	export const prepareStatus = (status) => {
	// Set deleted flag
	status.deleted = false

	// To make the array reactive
	status.attachments = status.attachments \|\| []

	return status
	}

	const mergeOrAdd = (arr, obj, item) => {
	const oldItem = obj[item.id]

	if (oldItem) {
	// We already have this, so only merge the new info.
	// We ignore null values to avoid overwriting existing properties with missing data
	// we also skip 'user' because that is handled by users module
	merge(
	oldItem,
	omitBy(item, (v, k) => v === null \|\| k === 'user'),
	)
	// Reactivity fix.
	oldItem.attachments.splice(oldItem.attachments.length)
	return { item: oldItem, new: false }
	} else {
	// This is a new item, prepare it
	prepareStatus(item)
	arr.push(item)
	obj[item.id] = item
	return { item, new: true }
	}
	}

	const sortById = (a, b) => {
	const seqA = Number(a.id)
	const seqB = Number(b.id)
	const isSeqA = !Number.isNaN(seqA)
	const isSeqB = !Number.isNaN(seqB)
	if (isSeqA && isSeqB) {
	return seqA > seqB ? -1 : 1
	} else if (isSeqA && !isSeqB) {
	return 1
	} else if (!isSeqA && isSeqB) {
	return -1
	} else {
	return a.id > b.id ? -1 : 1
	}
	}

	const sortTimeline = (timeline) => {
	timeline.visibleStatuses = timeline.visibleStatuses.sort(sortById)
	timeline.statuses = timeline.statuses.sort(sortById)
	timeline.minVisibleId = last(timeline.visibleStatuses)?.id
	return timeline
	}

	const getLatestScrobble = (state, user) => {
	const scrobblesSupport =
	useInstanceCapabilitiesStore().pleromaScrobblesAvailable

	if (!scrobblesSupport \|\| !user.name \|\| user.id === 'undefined') {
	return
	}

	if (
	state.scrobblesNextFetch[user.id] &&
	state.scrobblesNextFetch[user.id] > Date.now()
	) {
	return
	}

	state.scrobblesNextFetch[user.id] = Date.now() + 24 * 60 * 60 * 1000
	if (!scrobblesSupport) return
	fetchScrobbles({ accountId: user.id })
	.then(({ data: scrobbles }) => {
	if (scrobbles?.error) {
	useInstanceCapabilitiesStore().set('pleromaScrobblesAvailable', false)
	return
	}

	if (scrobbles.length > 0) {
	user.latestScrobble = scrobbles[0]

	state.scrobblesNextFetch[user.id] = Date.now() + 60 * 1000
	}
	})
	.catch((e) => {
	console.warn('cannot fetch scrobbles', e)
	})
	}

	// Add status to the global storages (arrays and objects maintaining statuses) except timelines
	const addStatusToGlobalStorage = (state, data) => {
	getLatestScrobble(state, data.user)
	const result = mergeOrAdd(state.allStatuses, state.allStatusesObject, data)
	if (result.new) {
	// Add to conversation
	const status = result.item
	const conversationsObject = state.conversationsObject
	const conversationId = status.statusnet_conversation_id
	if (conversationsObject[conversationId]) {
	conversationsObject[conversationId].push(status)
	} else {
	conversationsObject[conversationId] = [status]
	}
	}
	return result
	}

	const addNewStatuses = (
	state,
	{
	statuses,
	showImmediately = false,
	timeline,
	user = {},
	noIdUpdate = false,
	userId,
	pagination = {},
	},
	) => {
	// Sanity check
	if (!Array.isArray(statuses)) {
	return false
	}

	const allStatuses = state.allStatuses
	const timelineObject = state.timelines[timeline]

	// Mismatch between API pagination and our internal minId/maxId tracking systems:
	// pagination.maxId is the oldest of the returned statuses when fetching older,
	// and pagination.minId is the newest when fetching newer. The names come directly
	// from the arguments they're supposed to be passed as for the next fetch.
	const minNew =
	pagination.maxId \|\| (statuses.length > 0 ? minBy(statuses, 'id').id : 0)
	const maxNew =
	pagination.minId \|\| (statuses.length > 0 ? maxBy(statuses, 'id').id : 0)

	const newer =
	timeline &&
	(maxNew > timelineObject.maxId \|\| timelineObject.maxId === '') &&
	statuses.length > 0
	const older =
	timeline &&
	(minNew < timelineObject.minId \|\| timelineObject.minId === '') &&
	statuses.length > 0

	if (!noIdUpdate && newer) {
	timelineObject.maxId = maxNew
	}
	if (!noIdUpdate && older) {
	timelineObject.minId = minNew
	}

	// This makes sure that user timeline won't get data meant for other
	// user. I.e. opening different user profiles makes request which could
	// return data late after user already viewing different user profile
	if (
	(timeline === 'user' \|\| timeline === 'media') &&
	timelineObject.userId !== userId
	) {
	return
	}

	const addStatus = (data, showImmediately, addToTimeline = true) => {
	const result = addStatusToGlobalStorage(state, data)
	const status = result.item

	if (result.new) {
	// We are mentioned in a post
	if (
	status.type === 'status' &&
	find(status.attentions, { id: user.id })
	) {
	const mentions = state.timelines.mentions

	// Add the mention to the mentions timeline
	if (timelineObject !== mentions) {
	mergeOrAdd(mentions.statuses, mentions.statusesObject, status)
	mentions.newStatusCount += 1

	sortTimeline(mentions)
	}
	}
	if (status.visibility === 'direct') {
	const dms = state.timelines.dms

	mergeOrAdd(dms.statuses, dms.statusesObject, status)
	dms.newStatusCount += 1

	sortTimeline(dms)
	}
	}

	// Decide if we should treat the status as new for this timeline.
	let resultForCurrentTimeline
	// Some statuses should only be added to the global status repository.
	if (timeline && addToTimeline) {
	resultForCurrentTimeline = mergeOrAdd(
	timelineObject.statuses,
	timelineObject.statusesObject,
	status,
	)
	}

	if (timeline && showImmediately) {
	// Add it directly to the visibleStatuses, don't change
	// newStatusCount
	mergeOrAdd(
	timelineObject.visibleStatuses,
	timelineObject.visibleStatusesObject,
	status,
	)
	} else if (timeline && addToTimeline && resultForCurrentTimeline.new) {
	// Just change newStatuscount
	timelineObject.newStatusCount += 1
	}

	if (status.quote) {
	addStatus(
	status.quote,
	/* showImmediately = */ false,
	/* addToTimeline = */ false,
	)
	}

	return status
	}

	const favoriteStatus = (favorite) => {
	const status = find(allStatuses, { id: favorite.in_reply_to_status_id })
	if (status) {
	// This is our favorite, so the relevant bit.
	if (favorite.user.id === user.id) {
	status.favorited = true
	} else {
	status.fave_num += 1
	}
	}
	return status
	}

	const processors = {
	status: (status) => {
	addStatus(status, showImmediately)
	},
	edit: (status) => {
	addStatus(status, showImmediately)
	},
	retweet: (status) => {
	// RetweetedStatuses are never shown immediately
	const retweetedStatus = addStatus(status.retweeted_status, false, false)

	let retweet
	// If the retweeted status is already there, don't add the retweet
	// to the timeline.
	if (
	timeline &&
	find(timelineObject.statuses, (s) => {
	if (s.retweeted_status) {
	return (
	s.id === retweetedStatus.id \|\|
	s.retweeted_status.id === retweetedStatus.id
	)
	} else {
	return s.id === retweetedStatus.id
	}
	})
	) {
	// Already have it visible (either as the original or another RT), don't add to timeline, don't show.
	retweet = addStatus(status, false, false)
	} else {
	retweet = addStatus(status, showImmediately)
	}

	retweet.retweeted_status = retweetedStatus
	},
	favorite: (favorite) => {
	// Only update if this is a new favorite.
	// Ignore our own favorites because we get info about likes as response to like request
	if (!state.favorites.has(favorite.id)) {
	state.favorites.add(favorite.id)
	favoriteStatus(favorite)
	}
	},
	follow: () => {
	// NOOP, it is known status but we don't do anything about it for now
	},
	default: (unknown) => {
	console.warn('unknown status type', unknown)
	},
	}

	each(statuses, (status) => {
	const type = status.type
	const processor = processors[type] \|\| processors.default
	processor(status)
	})

	// Keep the visible statuses sorted
	if (timeline && !(timeline === 'bookmarks')) {
	sortTimeline(timelineObject)
	}
	}

	const removeStatus = (state, { timeline, userId }) => {
	const timelineObject = state.timelines[timeline]
	if (userId) {
	remove(timelineObject.statuses, { user: { id: userId } })
	remove(timelineObject.visibleStatuses, { user: { id: userId } })
	timelineObject.minVisibleId =
	timelineObject.visibleStatuses.length > 0
	? last(timelineObject.visibleStatuses).id
	: 0
	timelineObject.maxId =
	timelineObject.statuses.length > 0 ? first(timelineObject.statuses).id : 0
	}
	}

	export const mutations = {
	addNewStatuses,
	removeStatus,
	showNewStatuses(state, { timeline }) {
	const oldTimeline = state.timelines[timeline]

	oldTimeline.newStatusCount = 0
	oldTimeline.visibleStatuses = oldTimeline.statuses.slice(0, 50)
	oldTimeline.minVisibleId = last(oldTimeline.visibleStatuses).id
	oldTimeline.minId = oldTimeline.minVisibleId
	oldTimeline.visibleStatusesObject = {}
	each(oldTimeline.visibleStatuses, (status) => {
	oldTimeline.visibleStatusesObject[status.id] = status
	})
	},
	resetStatuses(state) {
	const emptyState = defaultState()
	Object.entries(emptyState).forEach(([key, value]) => {
	state[key] = value
	})
	},
	clearTimeline(state, { timeline, excludeUserId = false }) {
	const userId = excludeUserId ? state.timelines[timeline].userId : undefined
	state.timelines[timeline] = emptyTl(userId)
	},
	setFavorited(state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]

	if (newStatus.favorited !== value) {
	if (value) {
	newStatus.fave_num++
	} else {
	newStatus.fave_num--
	}
	}

	newStatus.favorited = value
	},
	setFavoritedConfirm(state, { status, user }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.favorited = status.favorited
	newStatus.fave_num = status.fave_num
	const index = findIndex(newStatus.favoritedBy, { id: user.id })
	if (index !== -1 && !newStatus.favorited) {
	newStatus.favoritedBy.splice(index, 1)
	} else if (index === -1 && newStatus.favorited) {
	newStatus.favoritedBy.push(user)
	}
	},
	setMutedStatus(state, status) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.thread_muted = status.thread_muted

	if (newStatus.thread_muted !== undefined) {
	state.conversationsObject[newStatus.statusnet_conversation_id].forEach(
	(status) => {
	status.thread_muted = newStatus.thread_muted
	},
	)
	}
	},
	setRetweeted(state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]

	if (newStatus.repeated !== value) {
	if (value) {
	newStatus.repeat_num++
	} else {
	newStatus.repeat_num--
	}
	}

	newStatus.repeated = value
	},
	setRetweetedConfirm(state, { status, user }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.repeated = status.repeated
	newStatus.repeat_num = status.repeat_num
	const index = findIndex(newStatus.rebloggedBy, { id: user.id })
	if (index !== -1 && !newStatus.repeated) {
	newStatus.rebloggedBy.splice(index, 1)
	} else if (index === -1 && newStatus.repeated) {
	newStatus.rebloggedBy.push(user)
	}
	},
	setBookmarked(state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.bookmarked = value
	newStatus.bookmark_folder_id = status.bookmark_folder_id
	},
	setBookmarkedConfirm(state, { status }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.bookmarked = status.bookmarked
	if (status.pleroma)
	newStatus.bookmark_folder_id = status.pleroma.bookmark_folder
	},
	setDeleted(state, { status }) {
	const newStatus = state.allStatusesObject[status.id]
	if (newStatus) newStatus.deleted = true
	},
	setManyDeleted(state, condition) {
	Object.values(state.allStatusesObject).forEach((status) => {
	if (condition(status)) {
	status.deleted = true
	}
	})
	},
	setLoading(state, { timeline, value }) {
	state.timelines[timeline].loading = value
	},
	setNsfw(state, { id, nsfw }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.nsfw = nsfw
	},
	queueFlush(state, { timeline, id }) {
	state.timelines[timeline].flushMarker = id
	},
	queueFlushAll(state) {
	Object.keys(state.timelines).forEach((timeline) => {
	state.timelines[timeline].flushMarker = state.timelines[timeline].maxId
	})
	},
	addRepeats(state, { id, rebloggedByUsers, currentUser }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.rebloggedBy = rebloggedByUsers.filter(Boolean)
	// repeats stats can be incorrect based on polling condition, let's update them using the most recent data
	newStatus.repeat_num = newStatus.rebloggedBy.length
	newStatus.repeated = !!newStatus.rebloggedBy.find(
	({ id }) => currentUser.id === id,
	)
	},
	addFavs(state, { id, favoritedByUsers, currentUser }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.favoritedBy = favoritedByUsers.filter(Boolean)
	// favorites stats can be incorrect based on polling condition, let's update them using the most recent data
	newStatus.fave_num = newStatus.favoritedBy.length
	newStatus.favorited = !!newStatus.favoritedBy.find(
	({ id }) => currentUser.id === id,
	)
	},
	addEmojiReactionsBy(state, { id, emojiReactions }) {
	const status = state.allStatusesObject[id]
	status.emoji_reactions = emojiReactions
	},
	addOwnReaction(state, { id, emoji, currentUser }) {
	const status = state.allStatusesObject[id]
	const reactionIndex = findIndex(status.emoji_reactions, { name: emoji })
	const reaction = status.emoji_reactions[reactionIndex] \|\| {
	name: emoji,
	count: 0,
	accounts: [],
	}

	const newReaction = {
	...reaction,
	count: reaction.count + 1,
	me: true,
	accounts: [...reaction.accounts, currentUser],
	}

	// Update count of existing reaction if it exists, otherwise append at the end
	if (reactionIndex >= 0) {
	status.emoji_reactions[reactionIndex] = newReaction
	} else {
	status.emoji_reactions = [...status.emoji_reactions, newReaction]
	}
	},
	removeOwnReaction(state, { id, emoji, currentUser }) {
	const status = state.allStatusesObject[id]
	const reactionIndex = findIndex(status.emoji_reactions, { name: emoji })
	if (reactionIndex < 0) return

	const reaction = status.emoji_reactions[reactionIndex]
	const accounts = reaction.accounts \|\| []

	const newReaction = {
	...reaction,
	count: reaction.count - 1,
	me: false,
	accounts: accounts.filter((acc) => acc.id !== currentUser.id),
	}

	if (newReaction.count > 0) {
	status.emoji_reactions[reactionIndex] = newReaction
	} else {
	status.emoji_reactions = status.emoji_reactions.filter(
	(r) => r.name !== emoji,
	)
	}
	},
	updateStatusWithPoll(state, { id, poll }) {
	const status = state.allStatusesObject[id]
	status.poll = poll
	},
	setVirtualHeight(state, { statusId, height }) {
	state.allStatusesObject[statusId].virtualHeight = height
	},
	}

	const statuses = {
	state: defaultState(),
	actions: {
	addNewStatuses(
	{ rootState, commit },
	{
	statuses,
	showImmediately = false,
	timeline = false,
	noIdUpdate = false,
	userId,
	pagination,
	},
	) {
	return commit('addNewStatuses', {
	statuses,
	showImmediately,
	timeline,
	noIdUpdate,
	- user: rootState.users.currentUser,
	+ user: useUsersStore().currentUser,
	userId,
	pagination,
	})
	},
	fetchStatus({ rootState, dispatch }, id) {
	return fetchStatus({ id }).then(({ data: status }) =>
	dispatch('addNewStatuses', { statuses: [status] }),
	)
	},
	fetchStatusSource({ rootState }, status) {
	return fetchStatusSource({
	id: status.id,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data)
	},
	fetchStatusHistory(_, status) {
	return fetchStatusHistory({ status }).then(({ data }) => data)
	},
	deleteStatus({ rootState, commit }, status) {
	deleteStatus({
	id: status.id,
	credentials: useOAuthStore().token,
	})
	.then(() => {
	commit('setDeleted', { status })
	})
	.catch((e) => {
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'status.delete_error',
	messageArgs: [e.message],
	timeout: 5000,
	})
	})
	},
	deleteStatusById({ rootState, commit }, id) {
	const status = rootState.statuses.allStatusesObject[id]
	commit('setDeleted', { status })
	},
	markStatusesAsDeleted({ commit }, condition) {
	commit('setManyDeleted', condition)
	},
	favorite({ rootState, commit }, status) {
	// Optimistic favoriting...
	commit('setFavorited', { status, value: true })
	favorite({
	id: status.id,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) =>
	commit('setFavoritedConfirm', {
	status,
	- user: rootState.users.currentUser,
	+ user: useUsersStore().currentUser,
	}),
	)
	},
	unfavorite({ rootState, commit }, status) {
	// Optimistic unfavoriting...
	commit('setFavorited', { status, value: false })
	unfavorite({
	id: status.id,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) =>
	commit('setFavoritedConfirm', {
	status,
	- user: rootState.users.currentUser,
	+ user: useUsersStore().currentUser,
	}),
	)
	},
	fetchPinnedStatuses({ rootState, dispatch }, userId) {
	fetchPinnedStatuses({
	id: userId,
	credentials: useOAuthStore().token,
	}).then(({ data: statuses }) =>
	dispatch('addNewStatuses', {
	statuses,
	timeline: 'user',
	userId,
	showImmediately: true,
	noIdUpdate: true,
	}),
	)
	},
	pinStatus({ rootState, dispatch }, statusId) {
	return pinOwnStatus({
	id: statusId,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) =>
	dispatch('addNewStatuses', { statuses: [status] }),
	)
	},
	unpinStatus({ rootState, dispatch }, statusId) {
	return unpinOwnStatus({
	id: statusId,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) =>
	dispatch('addNewStatuses', { statuses: [status] }),
	)
	},
	muteConversation({ rootState, commit }, { id: statusId }) {
	return muteConversation({
	id: statusId,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) => commit('setMutedStatus', status))
	},
	unmuteConversation({ rootState, commit }, { id: statusId }) {
	return unmuteConversation({
	id: statusId,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) => commit('setMutedStatus', status))
	},
	retweet({ rootState, commit }, status) {
	// Optimistic retweeting...
	commit('setRetweeted', { status, value: true })
	retweet({
	id: status.id,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) =>
	commit('setRetweetedConfirm', {
	status: status.retweeted_status,
	- user: rootState.users.currentUser,
	+ user: useUsersStore().currentUser,
	}),
	)
	},
	unretweet({ rootState, commit }, status) {
	// Optimistic unretweeting...
	commit('setRetweeted', { status, value: false })
	unretweet({
	id: status.id,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) =>
	commit('setRetweetedConfirm', {
	status,
	- user: rootState.users.currentUser,
	+ user: useUsersStore().currentUser,
	}),
	)
	},
	bookmark({ rootState, commit }, status) {
	commit('setBookmarked', { status, value: true })
	bookmarkStatus({
	id: status.id,
	folder_id: status.bookmark_folder_id,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) => {
	commit('setBookmarkedConfirm', { status })
	})
	},
	unbookmark({ rootState, commit }, status) {
	commit('setBookmarked', { status, value: false })
	unbookmarkStatus({
	id: status.id,
	credentials: useOAuthStore().token,
	}).then(({ data: status }) => {
	commit('setBookmarkedConfirm', { status })
	})
	},
	queueFlush({ commit }, { timeline, id }) {
	commit('queueFlush', { timeline, id })
	},
	queueFlushAll({ commit }) {
	commit('queueFlushAll')
	},
	fetchFavsAndRepeats({ rootState, commit }, id) {
	Promise.all([
	fetchFavoritedByUsers({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data),
	fetchRebloggedByUsers({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data }) => data),
	]).then(([favoritedByUsers, rebloggedByUsers]) => {
	commit('addFavs', {
	id,
	favoritedByUsers,
	- currentUser: rootState.users.currentUser,
	+ currentUser: useUsersStore().currentUser,
	})
	commit('addRepeats', {
	id,
	rebloggedByUsers,
	- currentUser: rootState.users.currentUser,
	+ currentUser: useUsersStore().currentUser,
	})
	})
	},
	reactWithEmoji({ rootState, dispatch, commit }, { id, emoji }) {
	- const currentUser = rootState.users.currentUser
	+ const currentUser = useUsersStore().currentUser
	if (!currentUser) return

	commit('addOwnReaction', { id, emoji, currentUser })
	reactWithEmoji({
	id,
	emoji,
	credentials: useOAuthStore().token,
	}).then(() => {
	dispatch('fetchEmojiReactionsBy', id)
	})
	},
	unreactWithEmoji({ rootState, dispatch, commit }, { id, emoji }) {
	- const currentUser = rootState.users.currentUser
	+ const currentUser = useUsersStore().currentUser
	if (!currentUser) return

	commit('removeOwnReaction', { id, emoji, currentUser })
	unreactWithEmoji({
	id,
	emoji,
	- currentUser: rootState.users.currentUser,
	+ currentUser: useUsersStore().currentUser,
	}).then(() => {
	dispatch('fetchEmojiReactionsBy', id)
	})
	},
	fetchEmojiReactionsBy({ rootState, commit }, id) {
	return fetchEmojiReactions({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data: emojiReactions }) => {
	commit('addEmojiReactionsBy', {
	id,
	emojiReactions,
	- currentUser: rootState.users.currentUser,
	+ currentUser: useUsersStore().currentUser,
	})
	})
	},
	fetchFavs({ rootState, commit }, id) {
	fetchFavoritedByUsers({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data: favoritedByUsers }) =>
	commit('addFavs', {
	id,
	favoritedByUsers,
	- currentUser: rootState.users.currentUser,
	+ currentUser: useUsersStore().currentUser,
	}),
	)
	},
	fetchRepeats({ rootState, commit }, id) {
	fetchRebloggedByUsers({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data: rebloggedByUsers }) =>
	commit('addRepeats', {
	id,
	rebloggedByUsers,
	- currentUser: rootState.users.currentUser,
	+ currentUser: useUsersStore().currentUser,
	}),
	)
	},
	search(store, { q, resolve, limit, offset, following, type }) {
	return search2({
	q,
	resolve,
	limit,
	offset,
	following,
	type,
	credentials: useOAuthStore().token,
	}).then(({ data }) => {
	store.commit('addNewUsers', data.accounts)
	store.commit(
	'addNewUsers',
	data.statuses.map((s) => s.user).filter(Boolean),
	)
	store.commit('addNewStatuses', {
	statuses: data.statuses,
	})

	data.statuses = data.statuses.map(
	(s) => store.state.allStatusesObject[s.id],
	)
	return data
	})
	},
	setVirtualHeight({ commit }, { statusId, height }) {
	commit('setVirtualHeight', { statusId, height })
	},
	},
	mutations,
	}

	export default statuses
	diff --git a/src/modules/users.js b/src/modules/users.js
	deleted file mode 100644
	index 9e24c1bddd..0000000000
	--- a/src/modules/users.js
	+++ /dev/null
	@@ -1,870 +0,0 @@
	-import Cookies from 'js-cookie'
	-import { compact, each, last, map, mergeWith } from 'lodash'
	-
	-import {
	- registerPushNotifications,
	- unregisterPushNotifications,
	-} from '../services/sw/sw.js'
	-import {
	- windowHeight,
	- windowWidth,
	-} from '../services/window_utils/window_utils'
	-
	-import { useAnnouncementsStore } from 'src/stores/announcements.js'
	-import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
	-import { useChatsStore } from 'src/stores/chats.js'
	-import { useEmojiStore } from 'src/stores/emoji.js'
	-import { useInstanceStore } from 'src/stores/instance.js'
	-import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	-import { useInterfaceStore } from 'src/stores/interface.js'
	-import { useListsStore } from 'src/stores/lists.js'
	-import { useMergedConfigStore } from 'src/stores/merged_config.js'
	-import { useOAuthStore } from 'src/stores/oauth.js'
	-import { useSyncConfigStore } from 'src/stores/sync_config.js'
	-import { useUserHighlightStore } from 'src/stores/user_highlight.js'
	-
	-import { revokeToken } from 'src/api/oauth.js'
	-import {
	- fetchFollowers,
	- fetchFriends,
	- fetchUser,
	- fetchUserByName,
	- getCaptcha,
	- register,
	- searchUsers,
	- verifyCredentials,
	-} from 'src/api/public.js'
	-import {
	- blockUser as apiBlockUser,
	- editUserNote as apiEditUserNote,
	- muteUser as apiMuteUser,
	- unblockUser as apiUnblockUser,
	- unmuteUser as apiUnmuteUser,
	- fetchBlocks,
	- fetchDomainMutes,
	- fetchMutes,
	- fetchUserInLists,
	- fetchUserRelationship,
	- followUser,
	-} from 'src/api/user.js'
	-
	-// TODO: Unify with mergeOrAdd in statuses.js
	-export const mergeOrAdd = (arr, obj, item) => {
	- if (!item) {
	- return false
	- }
	- const oldItem = obj[item.id]
	- if (oldItem) {
	- // We already have this, so only merge the new info.
	- mergeWith(oldItem, item, mergeArrayLength)
	- return { item: oldItem, new: false }
	- } else {
	- // This is a new item, prepare it
	- arr.push(item)
	- obj[item.id] = item
	- return { item, new: true }
	- }
	-}
	-
	-const mergeArrayLength = (oldValue, newValue) => {
	- if (Array.isArray(oldValue) && Array.isArray(newValue)) {
	- oldValue.length = newValue.length
	- return mergeWith(oldValue, newValue, mergeArrayLength)
	- }
	-}
	-
	-const getNotificationPermission = async () => {
	- const Notification = window.Notification
	-
	- if (!Notification) return null
	- if (Notification.permission === 'default')
	- return Notification.requestPermission()
	- return Notification.permission
	-}
	-
	-const blockUser = (store, args) => {
	- const id = args.id
	- const expiresIn = typeof args === 'object' ? args.expiresIn : 0
	-
	- const predictedRelationship = store.state.relationships[id] \|\| { id }
	- store.commit('updateUserRelationship', [predictedRelationship])
	- store.commit('addBlockId', id)
	-
	- return apiBlockUser({ id, expiresIn }).then(({ data: relationship }) => {
	- store.commit('updateUserRelationship', [relationship])
	- store.commit('addBlockId', id)
	-
	- store.commit('removeStatus', { timeline: 'friends', userId: id })
	- store.commit('removeStatus', { timeline: 'public', userId: id })
	- store.commit('removeStatus', {
	- timeline: 'publicAndExternal',
	- userId: id,
	- })
	- })
	-}
	-
	-const unblockUser = (store, id) => {
	- return apiUnblockUser({ id }).then(({ data: relationship }) =>
	- store.commit('updateUserRelationship', [relationship]),
	- )
	-}
	-
	-const removeUserFromFollowers = (store, id) => {
	- return removeUserFromFollowers({ id }).then((relationship) =>
	- store.commit('updateUserRelationship', [relationship]),
	- )
	-}
	-
	-const editUserNote = (store, { id, comment }) => {
	- return apiEditUserNote({ id, comment }).then((relationship) =>
	- store.commit('updateUserRelationship', [relationship]),
	- )
	-}
	-
	-const muteUser = (store, args) => {
	- const id = typeof args === 'object' ? args.id : args
	- const expiresIn = typeof args === 'object' ? args.expiresIn : 0
	-
	- const predictedRelationship = store.state.relationships[id] \|\| { id }
	- store.commit('updateUserRelationship', [predictedRelationship])
	- store.commit('addMuteId', id)
	-
	- return apiMuteUser({
	- id,
	- expiresIn,
	- credentials: useOAuthStore().token,
	- }).then(({ data: relationship }) => {
	- store.commit('updateUserRelationship', [relationship])
	- store.commit('addMuteId', id)
	- })
	-}
	-
	-const unmuteUser = (store, id) => {
	- const predictedRelationship = store.state.relationships[id] \|\| { id }
	- predictedRelationship.muting = false
	- store.commit('updateUserRelationship', [predictedRelationship])
	-
	- return apiUnmuteUser({ id }).then(({ data: relationship }) =>
	- store.commit('updateUserRelationship', [relationship]),
	- )
	-}
	-
	-const hideReblogs = (store, userId) => {
	- return followUser({
	- id: userId,
	- reblogs: false,
	- credentials: useOAuthStore().token,
	- }).then(({ data: relationship }) =>
	- store.commit('updateUserRelationship', [relationship]),
	- )
	-}
	-
	-const showReblogs = (store, userId) => {
	- return followUser({
	- id: userId,
	- reblogs: true,
	- credentials: useOAuthStore().token,
	- }).then(({ data: relationship }) =>
	- store.commit('updateUserRelationship', [relationship]),
	- )
	-}
	-
	-const muteDomain = (store, domain) => {
	- return muteDomain({
	- domain,
	- credentials: useOAuthStore().token,
	- }).then(() => store.commit('addDomainMute', domain))
	-}
	-
	-const unmuteDomain = (store, domain) => {
	- return unmuteDomain({
	- domain,
	- credentials: useOAuthStore().token,
	- }).then(() => store.commit('removeDomainMute', domain))
	-}
	-
	-export const mutations = {
	- tagUser(state, { user: { id }, tag }) {
	- const user = state.usersObject[id]
	- user.tags.add(tag)
	- },
	- untagUser(state, { user: { id }, tag }) {
	- const user = state.usersObject[id]
	- user.tags.delete(tag)
	- },
	- updateRight(state, { user: { id }, right, value }) {
	- const user = state.usersObject[id]
	- const newRights = user.rights
	- newRights[right] = value
	- user.rights = newRights
	- },
	- updateUserAdminData(state, { user }) {
	- const { id } = user
	- const localUser = state.usersObject[id]
	- localUser.adminData = user
	- localUser.deactivated = !user.is_active
	- localUser.tags = new Set(user.tags)
	- },
	- setCurrentUser(state, user) {
	- state.lastLoginName = user.screen_name
	- state.currentUser = mergeWith(
	- state.currentUser \|\| {},
	- user,
	- mergeArrayLength,
	- )
	- },
	- clearCurrentUser(state) {
	- state.currentUser = false
	- state.lastLoginName = false
	- },
	- beginLogin(state) {
	- state.loggingIn = true
	- },
	- endLogin(state) {
	- state.loggingIn = false
	- },
	- saveFriendIds(state, { id, friendIds }) {
	- const user = state.usersObject[id]
	- user.friendIds = [...new Set([...(user.friendIds \|\| []), ...friendIds])]
	- },
	- saveFollowerIds(state, { id, followerIds }) {
	- const user = state.usersObject[id]
	- user.followerIds = [...new Set([user.followerIds \|\| [], ...followerIds])]
	- },
	- // Because frontend doesn't have a reason to keep these stuff in memory
	- // outside of viewing someones user profile.
	- clearFriends(state, userId) {
	- const user = state.usersObject[userId]
	- if (user) {
	- user.friendIds = []
	- }
	- },
	- clearFollowers(state, userId) {
	- const user = state.usersObject[userId]
	- if (user) {
	- user.followerIds = []
	- }
	- },
	- addNewUsers(state, users) {
	- each(users, (user) => {
	- if (user.relationship) {
	- state.relationships[user.relationship.id] = user.relationship
	- }
	- const res = mergeOrAdd(state.users, state.usersObject, user)
	- const item = res.item
	- if (res.new && item.screen_name && !item.screen_name.includes('@')) {
	- state.usersByNameObject[item.screen_name.toLowerCase()] = item
	- }
	- })
	- },
	- updateUserRelationship(state, relationships) {
	- relationships.forEach((relationship) => {
	- state.relationships[relationship.id] = relationship
	- })
	- },
	- updateUserInLists(state, { id, inLists }) {
	- state.usersObject[id].inLists = inLists
	- },
	- saveBlockIds(state, blockIds) {
	- state.currentUser.blockIds = blockIds
	- },
	- addBlockId(state, blockId) {
	- if (state.currentUser.blockIds.includes(blockId)) {
	- state.currentUser.blockIds.push(blockId)
	- }
	- },
	- setBlockIdsMaxId(state, blockIdsMaxId) {
	- state.currentUser.blockIdsMaxId = blockIdsMaxId
	- },
	- saveMuteIds(state, muteIds) {
	- state.currentUser.muteIds = muteIds
	- },
	- setMuteIdsMaxId(state, muteIdsMaxId) {
	- state.currentUser.muteIdsMaxId = muteIdsMaxId
	- },
	- addMuteId(state, muteId) {
	- if (state.currentUser.muteIds.includes(muteId)) {
	- state.currentUser.muteIds.push(muteId)
	- }
	- },
	- saveDomainMutes(state, domainMutes) {
	- state.currentUser.domainMutes = domainMutes
	- },
	- addDomainMute(state, domain) {
	- if (state.currentUser.domainMutes.includes(domain)) {
	- state.currentUser.domainMutes.push(domain)
	- }
	- },
	- removeDomainMute(state, domain) {
	- const index = state.currentUser.domainMutes.indexOf(domain)
	- if (index !== -1) {
	- state.currentUser.domainMutes.splice(index, 1)
	- }
	- },
	- setPinnedToUser(state, status) {
	- const user = state.usersObject[status.user.id]
	- user.pinnedStatusIds = user.pinnedStatusIds \|\| []
	- const index = user.pinnedStatusIds.indexOf(status.id)
	-
	- if (status.pinned && index === -1) {
	- user.pinnedStatusIds.push(status.id)
	- } else if (!status.pinned && index !== -1) {
	- user.pinnedStatusIds.splice(index, 1)
	- }
	- },
	- setUserForStatus(state, status) {
	- status.user = state.usersObject[status.user.id]
	- },
	- setUserForNotification(state, notification) {
	- if (notification.type !== 'follow') {
	- notification.action.user = state.usersObject[notification.action.user.id]
	- }
	- notification.from_profile = state.usersObject[notification.from_profile.id]
	- },
	- setColor(state, { user: { id }, highlighted }) {
	- const user = state.usersObject[id]
	- user.highlight = highlighted
	- },
	- signUpPending(state) {
	- state.signUpPending = true
	- state.signUpErrors = []
	- state.signUpNotice = {}
	- },
	- signUpSuccess(state) {
	- state.signUpPending = false
	- },
	- signUpFailure(state, errors) {
	- state.signUpPending = false
	- state.signUpErrors = errors
	- state.signUpNotice = {}
	- },
	- signUpNotice(state, notice) {
	- state.signUpPending = false
	- state.signUpErrors = []
	- state.signUpNotice = notice
	- },
	-}
	-
	-export const getters = {
	- findUser: (state) => (query) => {
	- return state.usersObject[query]
	- },
	- findUserByName: (state) => (query) => {
	- return state.usersByNameObject[query.toLowerCase()]
	- },
	- findUserByUrl: (state) => (query) => {
	- return state.users.find(
	- (u) =>
	- u.statusnet_profile_url &&
	- u.statusnet_profile_url.toLowerCase() === query.toLowerCase(),
	- )
	- },
	- relationship: (state) => (id) => {
	- const rel = id && state.relationships[id]
	- return rel \|\| { id, loading: true }
	- },
	-}
	-
	-export const defaultState = {
	- loggingIn: false,
	- lastLoginName: false,
	- currentUser: false,
	- users: [],
	- usersObject: {},
	- usersByNameObject: {},
	- signUpPending: false,
	- signUpErrors: [],
	- signUpNotice: {},
	- relationships: {},
	-}
	-
	-const users = {
	- state: defaultState,
	- mutations,
	- getters,
	- actions: {
	- async fetchUserIfMissing(store, id) {
	- const user = store.getters.findUser(id)
	- if (!user) {
	- return store.dispatch('fetchUser', id)
	- } else {
	- return user
	- }
	- },
	- updateUserAdminData(store, { userAdminData }) {
	- return store
	- .dispatch('fetchUserIfMissing', userAdminData.id)
	- .then((user) => {
	- user.adminData = userAdminData
	- store.commit('addNewUsers', [user])
	- return user
	- })
	- },
	- fetchUser(store, id) {
	- return fetchUser({
	- id,
	- credentials: useOAuthStore().token,
	- })
	- .then(({ data: user }) => {
	- store.commit('addNewUsers', [user])
	- return user
	- })
	- .catch((error) => {
	- if (error.statusCode === 404) {
	- console.warn(`User ${id} not found`)
	- } else {
	- throw error
	- }
	- })
	- },
	- fetchUserByName(store, name) {
	- return fetchUserByName({
	- name,
	- credentials: useOAuthStore().token,
	- }).then(({ data: user }) => {
	- store.commit('addNewUsers', [user])
	- return user
	- })
	- },
	- fetchUserRelationship(store, id) {
	- if (store.state.currentUser) {
	- fetchUserRelationship({
	- id,
	- credentials: useOAuthStore().token,
	- }).then(({ data: relationships }) =>
	- store.commit('updateUserRelationship', relationships),
	- )
	- }
	- },
	- fetchUserInLists(store, id) {
	- if (store.state.currentUser) {
	- fetchUserInLists({
	- id,
	- credentials: useOAuthStore().token,
	- }).then(({ data: inLists }) =>
	- store.commit('updateUserInLists', { id, inLists }),
	- )
	- }
	- },
	- fetchBlocks(store, args) {
	- const { reset } = args \|\| {}
	-
	- const maxId = store.state.currentUser.blockIdsMaxId
	- return fetchBlocks({
	- maxId,
	- credentials: useOAuthStore().token,
	- }).then(({ data: blocks }) => {
	- if (reset) {
	- store.commit('saveBlockIds', map(blocks, 'id'))
	- } else {
	- map(blocks, 'id').map((id) => store.commit('addBlockId', id))
	- }
	- if (blocks.length) {
	- store.commit('setBlockIdsMaxId', last(blocks).id)
	- }
	- store.commit('addNewUsers', blocks)
	- return blocks
	- })
	- },
	- blockUser(store, data) {
	- return blockUser(store, data)
	- },
	- unblockUser(store, data) {
	- return unblockUser(store, data)
	- },
	- removeUserFromFollowers(store, id) {
	- return removeUserFromFollowers(store, id)
	- },
	- blockUsers(store, data = []) {
	- return Promise.all(data.map((d) => blockUser(store, d)))
	- },
	- unblockUsers(store, data = []) {
	- return Promise.all(data.map((d) => unblockUser(store, d)))
	- },
	- editUserNote(store, args) {
	- return editUserNote(store, args)
	- },
	- fetchMutes(store, args) {
	- const { reset } = args \|\| {}
	-
	- const maxId = store.state.currentUser.muteIdsMaxId
	- return fetchMutes({
	- maxId,
	- credentials: useOAuthStore().token,
	- }).then(({ data: mutes }) => {
	- if (reset) {
	- store.commit('saveMuteIds', map(mutes, 'id'))
	- } else {
	- map(mutes, 'id').map((id) => store.commit('addMuteId', id))
	- }
	- if (mutes.length) {
	- store.commit('setMuteIdsMaxId', last(mutes).id)
	- }
	- store.commit('addNewUsers', mutes)
	- return mutes
	- })
	- },
	- muteUser(store, data) {
	- return muteUser(store, data)
	- },
	- unmuteUser(store, id) {
	- return unmuteUser(store, id)
	- },
	- hideReblogs(store, id) {
	- return hideReblogs(store, id)
	- },
	- showReblogs(store, id) {
	- return showReblogs(store, id)
	- },
	- muteUsers(store, data = []) {
	- return Promise.all(data.map((d) => muteUser(store, d)))
	- },
	- unmuteUsers(store, ids = []) {
	- return Promise.all(ids.map((d) => unmuteUser(store, d)))
	- },
	- fetchDomainMutes(store) {
	- return fetchDomainMutes({
	- credentials: useOAuthStore().token,
	- }).then(({ data: domainMutes }) => {
	- store.commit('saveDomainMutes', domainMutes)
	- return domainMutes
	- })
	- },
	- muteDomain(store, domain) {
	- return muteDomain(store, domain)
	- },
	- unmuteDomain(store, domain) {
	- return unmuteDomain(store, domain)
	- },
	- muteDomains(store, domains = []) {
	- return Promise.all(domains.map((domain) => muteDomain(store, domain)))
	- },
	- unmuteDomains(store, domain = []) {
	- return Promise.all(domain.map((domain) => unmuteDomain(store, domain)))
	- },
	- fetchFriends({ rootState, commit }, id) {
	- const user = rootState.users.usersObject[id]
	- const maxId = last(user.friendIds)
	- return fetchFriends({
	- id,
	- maxId,
	- credentials: useOAuthStore().token,
	- }).then(({ data: friends }) => {
	- commit('addNewUsers', friends)
	- commit('saveFriendIds', { id, friendIds: map(friends, 'id') })
	- return friends
	- })
	- },
	- fetchFollowers({ rootState, commit }, id) {
	- const user = rootState.users.usersObject[id]
	- const maxId = last(user.followerIds)
	- return fetchFollowers({
	- id,
	- maxId,
	- credentials: useOAuthStore().token,
	- }).then(({ data: followers }) => {
	- commit('addNewUsers', followers)
	- commit('saveFollowerIds', { id, followerIds: map(followers, 'id') })
	- return followers
	- })
	- },
	- clearFriends({ commit }, userId) {
	- commit('clearFriends', userId)
	- },
	- clearFollowers({ commit }, userId) {
	- commit('clearFollowers', userId)
	- },
	- subscribeUser({ rootState, commit }, id) {
	- return followUser({
	- id,
	- notify: true,
	- credentials: useOAuthStore().token,
	- }).then(({ data: relationship }) =>
	- commit('updateUserRelationship', [relationship]),
	- )
	- },
	- unsubscribeUser({ rootState, commit }, id) {
	- return followUser({
	- id,
	- notify: false,
	- credentials: useOAuthStore().token,
	- }).then(({ data: relationship }) =>
	- commit('updateUserRelationship', [relationship]),
	- )
	- },
	- registerPushNotifications(store) {
	- const token = store.state.currentUser.credentials
	- const vapidPublicKey = useInstanceStore().vapidPublicKey
	- const isEnabled = useMergedConfigStore().mergedConfig.webPushNotifications
	- const notificationVisibility =
	- useMergedConfigStore().mergedConfig.notificationVisibility
	-
	- registerPushNotifications(
	- isEnabled,
	- vapidPublicKey,
	- token,
	- notificationVisibility,
	- )
	- },
	- unregisterPushNotifications(store) {
	- const token = store.state.currentUser.credentials
	-
	- unregisterPushNotifications(token)
	- },
	- addNewUsers({ commit }, users) {
	- commit('addNewUsers', users)
	- },
	- addNewStatuses(store, { statuses }) {
	- const users = map(statuses, 'user')
	- const retweetedUsers = compact(map(statuses, 'retweeted_status.user'))
	- store.commit('addNewUsers', users)
	- store.commit('addNewUsers', retweetedUsers)
	-
	- each(statuses, (status) => {
	- // Reconnect users to statuses
	- store.commit('setUserForStatus', status)
	- // Set pinned statuses to user
	- store.commit('setPinnedToUser', status)
	- })
	- each(compact(map(statuses, 'retweeted_status')), (status) => {
	- // Reconnect users to retweets
	- store.commit('setUserForStatus', status)
	- // Set pinned retweets to user
	- store.commit('setPinnedToUser', status)
	- })
	- },
	- addNewNotifications(store, { notifications }) {
	- const users = map(notifications, 'from_profile')
	- const targetUsers = map(notifications, 'target').filter(Boolean)
	- const notificationIds = notifications.map((_) => _.id)
	- store.commit('addNewUsers', users)
	- store.commit('addNewUsers', targetUsers)
	-
	- const notificationsObject = store.rootState.notifications.idStore
	- const relevantNotifications = Object.entries(notificationsObject)
	- .filter(([k]) => notificationIds.includes(k))
	- .map(([, val]) => val)
	-
	- // Reconnect users to notifications
	- each(relevantNotifications, (notification) => {
	- store.commit('setUserForNotification', notification)
	- })
	- },
	- searchUsers({ rootState, commit }, { query }) {
	- return searchUsers({
	- query,
	- credentials: useOAuthStore().token,
	- }).then(({ data: users }) => {
	- commit('addNewUsers', users)
	- return users
	- })
	- },
	- async signUp(store, userInfo) {
	- const oauthStore = useOAuthStore()
	- store.commit('signUpPending')
	-
	- try {
	- const token = await oauthStore.ensureAppToken()
	- const { data } = await register({
	- credentials: token,
	- params: { ...userInfo },
	- })
	-
	- if (data.access_token) {
	- store.commit('signUpSuccess')
	- oauthStore.setToken(data.access_token)
	- await store.dispatch('loginUser', data.access_token)
	- return 'ok'
	- } else {
	- // Request succeeded, but user cannot login yet.
	- store.commit('signUpNotice', data)
	- return 'request_sent'
	- }
	- } catch (e) {
	- const errors = e.message
	- store.commit('signUpFailure', errors)
	- throw e
	- }
	- },
	- getCaptcha(store) {
	- return getCaptcha({
	- credentials: useOAuthStore().token,
	- }).then(({ data }) => data)
	- },
	-
	- logout(store) {
	- const oauth = useOAuthStore()
	-
	- // NOTE: No need to verify the app still exists, because if it doesn't,
	- // the token will be invalid too
	- return oauth
	- .ensureApp()
	- .then((app) => {
	- const params = {
	- app,
	- instance: useInstanceStore().server,
	- token: oauth.userToken,
	- }
	-
	- return revokeToken(params)
	- })
	- .then(() => {
	- store.commit('clearCurrentUser')
	- store.dispatch('disconnectFromSocket')
	- store.dispatch('stopFetchingTimeline', 'friends')
	- store.dispatch('stopFetchingNotifications')
	- useListsStore().stopFetching()
	- useBookmarkFoldersStore().stopFetching()
	- store.dispatch('stopFetchingFollowRequests')
	- store.commit('clearNotifications')
	- store.commit('resetStatuses')
	- useChatsStore().resetChats()
	- oauth.clearToken()
	- Cookies.remove('__Host-pleroma_key', { path: '/' })
	- useInterfaceStore().setLastTimeline('public-timeline')
	- useInterfaceStore().setLayoutWidth(windowWidth())
	- useInterfaceStore().setLayoutHeight(windowHeight())
	- })
	- },
	- loginUser(store, accessToken) {
	- return new Promise((resolve, reject) => {
	- const commit = store.commit
	- const dispatch = store.dispatch
	-
	- commit('beginLogin')
	-
	- verifyCredentials({
	- credentials: useOAuthStore().token,
	- })
	- .then(({ data: user }) => {
	- // user.credentials = userCredentials
	- user.credentials = accessToken
	- user.blockIds = []
	- user.muteIds = []
	- user.domainMutes = []
	- commit('setCurrentUser', user)
	-
	- useSyncConfigStore()
	- .initSyncConfig(user)
	- .then(() => {
	- useInterfaceStore()
	- .applyTheme()
	- .catch((e) => {
	- console.error('Error setting theme', e)
	- })
	- })
	- useUserHighlightStore().initUserHighlight(user)
	- commit('addNewUsers', [user])
	-
	- useEmojiStore().fetchEmoji()
	-
	- getNotificationPermission().then((permission) =>
	- useInterfaceStore().setNotificationPermission(permission),
	- )
	-
	- // Do server-side storage migrations
	-
	- // Debug snippet to clean up storage and reset migrations
	- /*
	- // Reset wordfilter
	- Object.keys(
	- useSyncConfigStore().prefsStorage.simple.muteFilters
	- ).forEach(key => {
	- useSyncConfigStore().unsetSimplePrefAndSave({ path: 'muteFilters.' + key, value: null })
	- })
	-
	- // Reset flag to 0 to re-run migrations
	- useSyncConfigStore().setFlag({ flag: 'configMigration', value: 0 })
	- /**/
	-
	- if (user.token) {
	- dispatch('setWsToken', user.token)
	-
	- // Initialize the shout socket.
	- dispatch('initializeSocket')
	- }
	-
	- const startPolling = () => {
	- // Start getting fresh posts.
	- dispatch('startFetchingTimeline', { timeline: 'friends' })
	-
	- // Start fetching notifications
	- dispatch('startFetchingNotifications')
	-
	- if (useInstanceCapabilitiesStore().pleromaChatMessagesAvailable) {
	- // Start fetching chats
	- dispatch('startFetchingChats')
	- }
	- }
	-
	- useListsStore().startFetching()
	- useBookmarkFoldersStore().startFetching()
	-
	- if (user.locked) {
	- dispatch('startFetchingFollowRequests')
	- }
	-
	- if (useMergedConfigStore().mergedConfig.useStreamingApi) {
	- dispatch('fetchTimeline', {
	- timeline: 'friends',
	- sinceId: null,
	- })
	- dispatch('fetchNotifications', { sinceId: null })
	- dispatch('enableMastoSockets', true)
	- .catch((error) => {
	- console.error(
	- 'Failed initializing MastoAPI Streaming socket',
	- error,
	- )
	- })
	- .then(() => {
	- dispatch('fetchChats', { latest: true })
	- setTimeout(
	- () => dispatch('setNotificationsSilence', false),
	- 10000,
	- )
	- })
	- } else {
	- startPolling()
	- }
	-
	- // Start fetching things that don't need to block the UI
	- useAnnouncementsStore().startFetchingAnnouncements()
	-
	- dispatch('fetchMutes')
	- dispatch('loadDrafts')
	-
	- useInterfaceStore().setLayoutWidth(windowWidth())
	- useInterfaceStore().setLayoutHeight(windowHeight())
	-
	- // Fetch our friends
	- fetchFriends({ id: user.id }).then(({ data: friends }) =>
	- commit('addNewUsers', friends),
	- )
	- commit('endLogin')
	- resolve()
	- })
	- .catch((error) => {
	- console.error(error)
	-
	- // Authentication failed
	- commit('endLogin')
	-
	- // remove authentication token on client/authentication errors
	- if ([400, 401, 403, 422].includes(error.statusCode)) {
	- useOAuthStore().clearToken()
	- }
	-
	- commit('endLogin')
	- if (error.tatusCode === 401) {
	- throw new Error('Wrong username or password', error)
	- } else {
	- throw new Error('An error occurred, please try again', error)
	- }
	- })
	- })
	- },
	- },
	-}
	-
	-export default users
	diff --git a/src/services/chat_utils/chat_utils.js b/src/services/chat_utils/chat_utils.js
	index bc02981cd8..d99c17ed81 100644
	--- a/src/services/chat_utils/chat_utils.js
	+++ b/src/services/chat_utils/chat_utils.js
	@@ -1,47 +1,48 @@
	import { showDesktopNotification } from '../desktop_notification_utils/desktop_notification_utils.js'

	+import { useUsersStore } from 'src/stores/users.js'
	+
	export const maybeShowChatNotification = (chat) => {
	if (!chat.lastMessage) return
	- if (window.vuex.state.users.currentUser.id === chat.lastMessage.account_id)
	- return
	+ if (useUsersStore().currentUser.id === chat.lastMessage.account_id) return

	const opts = {
	tag: chat.lastMessage.id,
	title: chat.account.name,
	icon: chat.account.profile_image_url,
	body: chat.lastMessage.content,
	}

	if (chat.lastMessage.attachment?.type === 'image') {
	opts.image = chat.lastMessage.attachment.preview_url
	}

	showDesktopNotification(window.vuex.state, opts)
	}

	export const buildFakeMessage = ({
	content,
	chatId,
	attachments,
	userId,
	idempotencyKey,
	}) => {
	const fakeMessage = {
	content,
	chat_id: chatId,
	created_at: new Date(),
	id: `${new Date().getTime()}`,
	attachments,
	account_id: userId,
	idempotency_key: idempotencyKey,
	emojis: [],
	pending: true,
	isNormalized: true,
	}

	if (attachments[0]) {
	fakeMessage.attachment = attachments[0]
	}

	return fakeMessage
	}
	diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
	index 5b8fa5b57a..5d35b96990 100644
	--- a/src/services/entity_normalizer/entity_normalizer.service.js
	+++ b/src/services/entity_normalizer/entity_normalizer.service.js
	@@ -1,426 +1,427 @@
	import { parseLinkHeader } from '@web3-storage/parse-link-header'
	import escapeHtml from 'escape-html'
	import { unescape as lodashUnescape } from 'lodash'
	import punycode from 'punycode.js'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	output.friends_count = data.following_count

	output.bot = data.bot

	output.privileges = []

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

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

	if (relationship) {
	output.relationship = relationship
	}

	output.allow_following_move = data.pleroma.allow_following_move

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

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

	output.birthday = data.pleroma.birthday

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

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

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

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

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

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

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

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

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

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

	return output
	}

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

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

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

	return output
	}

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

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

	return output
	}

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

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

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

	output.bookmarked = data.bookmarked

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

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

	output.tags = data.tags

	output.edited_at = data.edited_at

	const { pleroma } = data

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

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

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

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

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

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

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

	output.user = parseUser(data.account)

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

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

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

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

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

	return output
	}

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

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

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

	return output
	}

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

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

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

	export const parseChatMessage = (message) => {
	if (!message) {
	return
	}
	if (message.isNormalized) {
	return message
	}
	const output = message
	output.id = message.id
	output.created_at = new Date(message.created_at)
	output.chat_id = message.chat_id
	output.emojis = message.emojis
	output.content = message.content
	if (message.attachment) {
	output.attachments = [parseAttachment(message.attachment)]
	} else {
	output.attachments = []
	}
	output.pending = !!message.pending
	output.error = false
	output.idempotency_key = message.idempotency_key
	output.isNormalized = true
	return output
	}
	diff --git a/src/services/status_poster/status_poster.service.js b/src/services/status_poster/status_poster.service.js
	index 9a26bd12ff..af000a40e5 100644
	--- a/src/services/status_poster/status_poster.service.js
	+++ b/src/services/status_poster/status_poster.service.js
	@@ -1,111 +1,113 @@
	import { map } from 'lodash'

	+import { useUsersStore } from 'src/stores/users.js'
	+
	import {
	editStatus as apiEditStatus,
	postStatus as apiPostStatus,
	setMediaDescription as apiSetMediaDescription,
	uploadMedia as apiUploadMedia,
	} from 'src/api/user.js'

	const postStatus = ({
	store,
	status,
	spoilerText,
	visibility,
	sensitive,
	poll,
	media = [],
	inReplyToStatusId = undefined,
	quoteId = undefined,
	contentType = 'text/plain',
	preview = false,
	idempotencyKey = '',
	}) => {
	const mediaIds = map(media, 'id')

	return apiPostStatus({
	- credentials: store.state.users.currentUser.credentials,
	+ credentials: useUsersStore().currentUser.credentials,
	status,
	spoilerText,
	visibility,
	sensitive,
	mediaIds,
	inReplyToStatusId,
	quoteId,
	contentType,
	poll,
	preview,
	idempotencyKey,
	}).then(({ data }) => {
	if (!preview)
	store.dispatch('addNewStatuses', {
	statuses: [data],
	timeline: 'friends',
	showImmediately: true,
	noIdUpdate: true, // To prevent missing notices on next pull.
	})

	return data
	})
	}

	const editStatus = ({
	store,
	statusId,
	status,
	spoilerText,
	sensitive,
	poll,
	media = [],
	contentType = 'text/plain',
	}) => {
	const mediaIds = map(media, 'id')

	return apiEditStatus({
	id: statusId,
	- credentials: store.state.users.currentUser.credentials,
	+ credentials: useUsersStore().currentUser.credentials,
	status,
	spoilerText,
	sensitive,
	poll,
	mediaIds,
	contentType,
	})
	.then(({ data }) => {
	store.dispatch('addNewStatuses', {
	statuses: [data],
	timeline: 'friends',
	showImmediately: true,
	noIdUpdate: true, // To prevent missing notices on next pull.
	})

	return data
	})
	.catch((err) => {
	console.error('Error editing status', err)
	return {
	error: err.message,
	}
	})
	}

	const uploadMedia = ({ store, formData }) => {
	- const credentials = store.state.users.currentUser.credentials
	+ const credentials = useUsersStore().currentUser.credentials
	return apiUploadMedia({ credentials, formData }).then(({ data }) => data)
	}

	const setMediaDescription = ({ store, id, description }) => {
	- const credentials = store.state.users.currentUser.credentials
	+ const credentials = useUsersStore().currentUser.credentials
	return apiSetMediaDescription({ credentials, id, description }).then(
	({ data }) => data,
	)
	}

	const statusPosterService = {
	postStatus,
	editStatus,
	uploadMedia,
	setMediaDescription,
	}

	export default statusPosterService
	diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
	index 80dbc75d0d..647ed90ef5 100644
	--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
	+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
	@@ -1,160 +1,161 @@
	import { camelCase } from 'lodash'

	import { promiseInterval } from '../promise_interval/promise_interval.js'

	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import { fetchTimeline } from 'src/api/timelines.js'

	const update = ({
	store,
	statuses,
	timeline,
	showImmediately,
	userId,
	listId,
	pagination,
	}) => {
	const ccTimeline = camelCase(timeline)

	store.dispatch('addNewStatuses', {
	timeline: ccTimeline,
	userId,
	listId,
	statuses,
	showImmediately,
	pagination,
	})
	}

	const fetchAndUpdate = ({
	store,
	credentials,
	timeline = 'friends',
	older = false,
	showImmediately = false,
	userId,
	listId,
	statusId,
	bookmarkFolderId,
	tag,
	maxId,
	sinceId,
	}) => {
	const args = { timeline, credentials }
	const rootState = store.rootState \|\| store.state
	const timelineData = rootState.statuses.timelines[camelCase(timeline)]
	const { hideMutedPosts, replyVisibility } =
	useMergedConfigStore().mergedConfig
	- const loggedIn = !!rootState.users.currentUser
	+ const loggedIn = !!useUsersStore().currentUser

	if (older) {
	// When minId = 0 we need to fetch without maxId param
	args.maxId = maxId \|\| timelineData.minId \|\| null
	} else {
	if (sinceId === undefined) {
	args.sinceId = timelineData.maxId
	} else if (sinceId !== null) {
	args.sinceId = sinceId
	}
	}

	args.userId = userId
	args.listId = listId
	args.statusId = statusId
	args.bookmarkFolderId = bookmarkFolderId
	args.tag = tag
	args.withMuted = !hideMutedPosts
	if (
	loggedIn &&
	['friends', 'public', 'publicAndExternal', 'bubble'].includes(timeline)
	) {
	args.replyVisibility = replyVisibility
	}

	const numStatusesBeforeFetch = timelineData.statuses.length

	return fetchTimeline(args)
	.then((response) => {
	const { data: statuses, pagination } = response
	if (
	!older &&
	statuses.length >= 20 &&
	!timelineData.loading &&
	numStatusesBeforeFetch > 0
	) {
	store.dispatch('queueFlush', { timeline, id: timelineData.maxId })
	}
	update({
	store,
	statuses,
	timeline,
	showImmediately,
	userId,
	listId,
	pagination,
	})
	return { statuses, pagination }
	})
	.catch((error) => {
	if (error.statusCode === 403 && timeline === 'favorites') {
	useInstanceCapabilitiesStore().pleromaPublicFavouritesAvailable = false
	return
	}
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'timeline.error',
	messageArgs: [error.message],
	timeout: 5000,
	})
	})
	}

	const startFetching = ({
	timeline = 'friends',
	credentials,
	store,
	userId,
	listId,
	statusId,
	bookmarkFolderId,
	tag,
	}) => {
	const rootState = store.rootState \|\| store.state
	const timelineData = rootState.statuses.timelines[camelCase(timeline)]
	const showImmediately = timelineData.visibleStatuses.length === 0
	timelineData.userId = userId
	timelineData.listId = listId
	timelineData.bookmarkFolderId = bookmarkFolderId
	fetchAndUpdate({
	timeline,
	credentials,
	store,
	showImmediately,
	userId,
	listId,
	statusId,
	bookmarkFolderId,
	tag,
	})
	const boundFetchAndUpdate = () =>
	fetchAndUpdate({
	timeline,
	credentials,
	store,
	userId,
	listId,
	statusId,
	bookmarkFolderId,
	tag,
	})
	return promiseInterval(boundFetchAndUpdate, 10000)
	}
	const timelineFetcher = {
	fetchAndUpdate,
	startFetching,
	}

	export default timelineFetcher
	diff --git a/src/stores/announcements.js b/src/stores/announcements.js
	index b096557556..5110bd5659 100644
	--- a/src/stores/announcements.js
	+++ b/src/stores/announcements.js
	@@ -1,154 +1,155 @@
	import { defineStore } from 'pinia'

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

	import { dismissAnnouncement, getAnnouncements } from 'src/api/user.js'

	const FETCH_ANNOUNCEMENT_INTERVAL_MS = 1000 * 60 * 5

	export const useAnnouncementsStore = defineStore('announcements', {
	state: () => ({
	announcements: [],
	supportsAnnouncements: true,
	fetchAnnouncementsTimer: undefined,
	adminActions: {},
	userActions: {},
	}),
	getters: {
	unreadAnnouncementCount() {
	- if (!window.vuex.state.users.currentUser) {
	+ if (!useUsersStore().currentUser) {
	return 0
	}

	const unread = this.announcements.filter(
	(announcement) => !(announcement.inactive \|\| announcement.read),
	)
	return unread.length
	},
	},
	actions: {
	async fetchAnnouncements() {
	if (!this.supportsAnnouncements) return

	- const currentUser = window.vuex.state.users.currentUser
	+ const currentUser = useUsersStore().currentUser
	const isAdmin =
	currentUser &&
	currentUser.privileges.has('announcements_manage_announcements')

	try {
	if (isAdmin) {
	this.adminActions = await import('src/api/admin.js')
	} else {
	const all = await getAnnouncements({
	credentials: useOAuthStore().token,
	})
	return all.data
	}

	const { data: all } = await this.adminActions.getAnnouncements({
	credentials: useOAuthStore().token,
	})

	const { data: visible } = await getAnnouncements({
	credentials: useOAuthStore().token,
	})

	const visibleObject = visible.reduce((a, c) => {
	a[c.id] = c
	return a
	}, {})

	const getWithinVisible = (announcement) =>
	visibleObject[announcement.id]

	all.forEach((announcement) => {
	const visibleAnnouncement = getWithinVisible(announcement)
	if (!visibleAnnouncement) {
	announcement.inactive = true
	} else {
	announcement.read = visibleAnnouncement.read
	}
	})

	this.announcements = all
	} catch (error) {
	// If and only if backend does not support announcements, it would return 404.
	// In this case, silently ignores it.
	if (error?.statusCode === 404) {
	this.supportsAnnouncements = false
	} else {
	throw error
	}
	}
	},
	markAnnouncementAsRead(id) {
	return dismissAnnouncement({
	id,
	credentials: useOAuthStore().token,
	}).then(() => {
	const index = this.announcements.findIndex((a) => a.id === id)

	if (index < 0) {
	return
	}

	this.announcements[index].read = true
	})
	},
	startFetchingAnnouncements() {
	if (this.fetchAnnouncementsTimer) {
	return
	}

	const interval = setInterval(
	() => this.fetchAnnouncements(),
	FETCH_ANNOUNCEMENT_INTERVAL_MS,
	)
	this.fetchAnnouncementsTimer = interval

	return this.fetchAnnouncements()
	},
	stopFetchingAnnouncements() {
	const interval = this.fetchAnnouncementsTimer
	this.fetchAnnouncementsTimer = undefined
	clearInterval(interval)
	},
	postAnnouncement({ content, startsAt, endsAt, allDay }) {
	return this.adminActions
	.postAnnouncement({
	credentials: useOAuthStore().token,
	content,
	startsAt,
	endsAt,
	allDay,
	})
	.then(() => {
	return this.fetchAnnouncements()
	})
	},
	editAnnouncement({ id, content, startsAt, endsAt, allDay }) {
	return this.adminActions
	.editAnnouncement({
	id,
	content,
	startsAt,
	endsAt,
	allDay,
	credentials: useOAuthStore().token,
	})
	.then(() => {
	return this.fetchAnnouncements()
	})
	},
	deleteAnnouncement(id) {
	return this.adminActions
	.deleteAnnouncement({
	id,
	credentials: useOAuthStore().token,
	})
	.then(() => {
	return this.fetchAnnouncements()
	})
	},
	},
	})
	diff --git a/src/stores/auth_flow.js b/src/stores/auth_flow.js
	index 64df30f2a5..0841dc5583 100644
	--- a/src/stores/auth_flow.js
	+++ b/src/stores/auth_flow.js
	@@ -1,70 +1,71 @@
	import { defineStore } from 'pinia'

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

	const PASSWORD_STRATEGY = 'password'
	const TOKEN_STRATEGY = 'token'

	// MFA strategies
	const TOTP_STRATEGY = 'totp'
	const RECOVERY_STRATEGY = 'recovery'

	export const useAuthFlowStore = defineStore('authFlow', {
	// initial state
	state: () => ({
	settings: {},
	strategy: PASSWORD_STRATEGY,
	initStrategy: PASSWORD_STRATEGY, // default strategy from config
	}),
	// getters
	getters: {
	requiredPassword: (state) => {
	return state.strategy === PASSWORD_STRATEGY
	},
	requiredToken: (state) => {
	return state.strategy === TOKEN_STRATEGY
	},
	requiredTOTP: (state) => {
	return state.strategy === TOTP_STRATEGY
	},
	requiredRecovery: (state) => {
	return state.strategy === RECOVERY_STRATEGY
	},
	},
	actions: {
	setInitialStrategy(strategy) {
	if (strategy) {
	this.initStrategy = strategy
	this.strategy = strategy
	}
	},
	requirePassword() {
	this.strategy = PASSWORD_STRATEGY
	},
	requireToken() {
	this.strategy = TOKEN_STRATEGY
	},
	requireMFA({ settings }) {
	this.settings = settings
	this.strategy = TOTP_STRATEGY // default strategy of MFA
	},
	requireRecovery() {
	this.strategy = RECOVERY_STRATEGY
	},
	requireTOTP() {
	this.strategy = TOTP_STRATEGY
	},
	abortMFA() {
	this.resetState()
	},
	resetState() {
	this.strategy = this.initStrategy
	this.settings = {}
	},
	async login({ access_token: accessToken }) {
	useOAuthStore().setToken(accessToken)
	- await window.vuex.dispatch('loginUser', accessToken, { root: true })
	+ useUsersStore().loginUser(accessToken, { root: true })
	this.resetState()
	},
	},
	})
	diff --git a/src/stores/emoji.js b/src/stores/emoji.js
	index 8135a483e5..1471f3dfb0 100644
	--- a/src/stores/emoji.js
	+++ b/src/stores/emoji.js
	@@ -1,317 +1,318 @@
	import { merge } from 'lodash'
	import { defineStore } from 'pinia'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	+import { useUsersStore } from 'src/stores/users.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),
	),
	).flat()
	},
	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
	+ const currentUser = useUsersStore().currentUser

	if (!currentUser.rights.admin) return

	const pageSize = 25

	return await listFunction({
	instance,
	page: 1,
	pageSize: 0,
	})
	.then((data) => {
	const promises = []

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

	return Promise.all(promises).then((results) => {
	return merge({}, ...results)
	})
	})
	.then((allPacks) => {
	// Sort by key
	return Object.keys(allPacks)
	.sort((a, b) => a.localeCompare(b))
	.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 02edd12358..123f0b819e 100644
	--- a/src/stores/instance.js
	+++ b/src/stores/instance.js
	@@ -1,235 +1,236 @@
	import { 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 { useUsersStore } from 'src/stores/users.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 {
	const { data } = await fetchKnownDomains({
	- credentials: window.vuex.state.users.currentUser.credentials,
	+ credentials: useUsersStore().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/interface.js b/src/stores/interface.js
	index 7be72a8d2a..6eede1d3a5 100644
	--- a/src/stores/interface.js
	+++ b/src/stores/interface.js
	@@ -1,803 +1,804 @@
	import { defineStore } from 'pinia'

	import {
	applyTheme,
	getResourcesIndex,
	tryLoadCache,
	} from '../services/style_setter/style_setter.js'
	import { deserialize } from '../services/theme_data/iss_deserializer.js'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import {
	CURRENT_VERSION,
	generatePreset,
	} from 'src/services/theme_data/theme_data.service.js'
	import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'

	const GENERIC_FONT_NAMES = new Set([
	'serif',
	'sans-serif',
	'system-ui',
	'cursive',
	'fantasy',
	'math',
	'monospace',
	])

	export const useInterfaceStore = defineStore('interface', {
	state: () => ({
	localFonts: null,
	themeApplied: false,
	themeChangeInProgress: false,
	themeVersion: 'v3',
	styleNameUsed: null,
	styleDataUsed: null,
	useStylePalette: false, // hack for applying styles from appearance tab
	paletteNameUsed: null,
	paletteDataUsed: null,
	themeNameUsed: null,
	themeDataUsed: null,
	temporaryChangesTimeoutId: null,
	temporaryChangesCountdown: -1, // used for temporary options that revert after a timeout
	temporaryChangesConfirm: () => {
	/* no-op */
	}, // used for applying temporary options
	temporaryChangesRevert: () => {
	/* no-op */
	}, // used for reverting temporary options
	settingsModalState: 'hidden',
	settingsModalLoadedUser: false,
	settingsModalLoadedAdmin: false,
	settingsModalTargetTab: null,
	settingsModalMode: 'user',
	settings: {
	currentSaveStateNotice: null,
	noticeClearTimeout: null,
	notificationPermission: null,
	},
	browserSupport: {
	cssFilter:
	window.CSS?.supports &&
	(window.CSS.supports('filter', 'drop-shadow(0 0)') \|\|
	window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')),
	localFonts: typeof window.queryLocalFonts === 'function',
	},
	layoutType: 'normal',
	globalNotices: [],
	globalError: null,
	layoutHeight: 0,
	lastTimeline: null,
	foreignProfileBackground: null,
	}),
	actions: {
	setTemporaryChanges({ confirm, revert }) {
	this.temporaryChangesCountdown = 10
	this.temporaryChangesConfirm = confirm
	this.temporaryChangesRevert = revert
	const countdownFunc = () => {
	if (this.temporaryChangesCountdown <= 1) {
	this.temporaryChangesRevert()
	this.clearTemporaryChanges()
	} else {
	this.temporaryChangesCountdown--
	this.temporaryChangesTimeoutId = setTimeout(countdownFunc, 1000)
	}
	}
	this.temporaryChangesTimeoutId = setTimeout(countdownFunc, 1000)
	},
	clearTemporaryChanges() {
	this.temporaryChangesTimeoutId ??
	clearTimeout(this.temporaryChangesTimeoutId)
	this.temporaryChangesTimeoutId = null
	this.temporaryChangesCountdown = -1
	this.temporaryChangesConfirm = () => {
	/* no-op */
	}
	this.temporaryChangesRevert = () => {
	/* no-op */
	}
	},
	setPageTitle(option = '') {
	try {
	document.title = `${option} ${useInstanceStore().instanceIdentity.name}`
	} catch (error) {
	console.error(`${error}`)
	}
	},
	setForeignProfileBackground(url) {
	this.foreignProfileBackground = url
	},
	settingsSaved({ success, error }) {
	if (success) {
	if (this.noticeClearTimeout) {
	clearTimeout(this.noticeClearTimeout)
	}
	this.settings.currentSaveStateNotice = { error: false, data: success }
	this.settings.noticeClearTimeout = setTimeout(
	() => delete this.settings.currentSaveStateNotice,
	2000,
	)
	} else {
	this.settings.currentSaveStateNotice = { error: true, errorData: error }
	}
	},
	setNotificationPermission(permission) {
	this.notificationPermission = permission
	},
	closeSettingsModal() {
	this.settingsModalState = 'hidden'
	},
	openSettingsModal(value) {
	this.settingsModalMode = value
	this.settingsModalState = 'visible'
	if (value === 'user') {
	if (!this.settingsModalLoadedUser) {
	this.settingsModalLoadedUser = true
	}
	} else if (value === 'admin') {
	if (!this.settingsModalLoadedAdmin) {
	this.settingsModalLoadedAdmin = true
	}
	}
	},
	setSettingsModalState(newState) {
	const oldState = this.settingsModalState
	const legal = (() => {
	switch (oldState) {
	case 'minimized':
	return true
	case 'visible':
	return true
	case 'hidden':
	return newState === 'visible'
	}
	})()

	if (legal) {
	this.settingsModalState = newState
	}
	},
	toggleMinimizeSettingsModal() {
	switch (this.settingsModalState) {
	case 'minimized':
	this.settingsModalState = 'visible'
	return
	case 'visible':
	this.settingsModalState = 'minimized'
	return
	case 'hidden':
	return
	default:
	throw new Error(
	`Illegal minimization state of settings modal: ${this.settingsModalState}`,
	)
	}
	},
	clearSettingsModalTargetTab() {
	this.settingsModalTargetTab = null
	},
	openSettingsModalTab(value, mode = 'user') {
	this.settingsModalTargetTab = value
	this.openSettingsModal(mode)
	},
	removeGlobalNotice(notice) {
	this.globalNotices = this.globalNotices.filter((n) => n !== notice)
	},
	setGlobalError({ error, instance, info }) {
	switch (info) {
	case 'https://vuejs.org/error-reference/#runtime-13': {
	this.globalError = {
	title: 'general.refresh_required',
	content: 'general.refresh_required_content',
	// `true` disables cache on Firefox (non-standard)
	recover: () => window.location.reload(true),
	recoverText: 'general.refresh_required_refresh',
	error,
	}
	break
	}
	default: {
	this.globalError = { error }
	break
	}
	}
	},
	clearGlobalError() {
	this.globalError = null
	},
	pushGlobalNotice({
	messageKey,
	messageArgs = {},
	level = 'error',
	timeout = 5000,
	}) {
	const notice = {
	messageKey,
	messageArgs,
	level,
	}

	this.globalNotices.push(notice)

	// Adding a new element to array wraps it in a Proxy, which breaks the comparison
	// TODO: Generate UUID or something instead or relying on !== operator?
	const newNotice = this.globalNotices[this.globalNotices.length - 1]
	if (timeout > 0) {
	setTimeout(() => this.removeGlobalNotice(newNotice), timeout)
	}

	return newNotice
	},
	setLayoutHeight(value) {
	this.layoutHeight = value
	},
	setLayoutWidth(value) {
	let width = value
	if (value !== undefined) {
	this.layoutWidth = value
	} else {
	width = this.layoutWidth
	}

	const mobileLayout = width <= 800
	const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
	const { thirdColumnMode } = useMergedConfigStore().mergedConfig
	- if (thirdColumnMode === 'none' \|\| !window.vuex.state.users.currentUser) {
	+ if (thirdColumnMode === 'none' \|\| !useUsersStore().currentUser) {
	this.layoutType = normalOrMobile
	} else {
	const wideLayout = width >= 1300
	this.layoutType = wideLayout ? 'wide' : normalOrMobile
	}
	},
	setFontsList(value) {
	this.localFonts = [...new Set(value.map(({ family }) => family)).values()]
	},
	queryLocalFonts() {
	if (this.localFonts !== null) return
	this.setFontsList([])

	if (!this.browserSupport.localFonts) {
	return
	}
	window
	.queryLocalFonts()
	.then((fonts) => {
	this.setFontsList(fonts)
	})
	.catch((e) => {
	this.pushGlobalNotice({
	messageKey: 'settings.style.themes3.font.font_list_unavailable',
	messageArgs: {
	error: e,
	},
	level: 'error',
	})
	})
	},
	setLastTimeline(value) {
	this.lastTimeline = value
	},
	async fetchPalettesIndex() {
	try {
	const value = await getResourcesIndex('/static/palettes/index.json')
	useInstanceStore().set({
	path: 'palettesIndex',
	value,
	})
	return value
	} catch (e) {
	console.error('Could not fetch palettes index', e)
	useInstanceStore().set({
	path: 'palettesIndex',
	value: { _error: e },
	})
	return {}
	}
	},
	setPalette(value) {
	this.resetThemeV3Palette()
	this.resetThemeV2()

	useSyncConfigStore().setPreference({ path: 'simple.palette', value })
	useSyncConfigStore().pushSyncConfig()

	this.applyTheme({ recompile: true })
	},
	setPaletteCustom(value) {
	this.resetThemeV3Palette()
	this.resetThemeV2()

	useSyncConfigStore().setPreference({
	path: 'simple.paletteCustomData',
	value,
	})
	useSyncConfigStore().pushSyncConfig()

	this.applyTheme({ recompile: true })
	},
	async fetchStylesIndex() {
	try {
	const value = await getResourcesIndex(
	'/static/styles/index.json',
	deserialize,
	)
	useInstanceStore().set({ path: 'stylesIndex', value })
	return value
	} catch (e) {
	console.error('Could not fetch styles index', e)
	useInstanceStore().set({
	path: 'simple.stylesIndex',
	value: { _error: e },
	})
	return {}
	}
	},
	setStyle(value) {
	this.resetThemeV3()
	this.resetThemeV2()
	this.resetThemeV3Palette()

	useSyncConfigStore().setPreference({ path: 'simple.style', value })
	useSyncConfigStore().pushSyncConfig()
	this.useStylePalette = true

	this.applyTheme({ recompile: true }).then(() => {
	this.useStylePalette = false
	})
	},
	setStyleCustom(value) {
	this.resetThemeV3()
	this.resetThemeV2()
	this.resetThemeV3Palette()

	useSyncConfigStore().setPreference({
	path: 'simple.styleCustomData',
	value,
	})
	useSyncConfigStore().pushSyncConfig()

	this.useStylePalette = true
	this.applyTheme({ recompile: true }).then(() => {
	this.useStylePalette = false
	})
	},
	async fetchThemesIndex() {
	try {
	const value = await getResourcesIndex('/static/styles.json')
	useInstanceStore().set({ path: 'themesIndex', value })
	return value
	} catch (e) {
	console.error('Could not fetch themes index', e)
	useInstanceStore().set({
	path: 'themesIndex',
	value: { _error: e },
	})
	return {}
	}
	},
	setTheme(value) {
	this.resetThemeV3()
	this.resetThemeV3Palette()
	this.resetThemeV2()

	useSyncConfigStore().setPreference({ path: 'simple.theme', value })
	useSyncConfigStore().pushSyncConfig()

	this.applyTheme({ recompile: true })
	},
	setThemeCustom(value) {
	this.resetThemeV3()
	this.resetThemeV3Palette()
	this.resetThemeV2()

	useSyncConfigStore().setPreference({ path: 'simple.customTheme', value })
	useSyncConfigStore().setPreference({
	path: 'simple.customThemeSource',
	value,
	})
	useSyncConfigStore().pushSyncConfig()

	this.applyTheme({ recompile: true })
	},
	resetThemeV3() {
	useSyncConfigStore().setPreference({ path: 'simple.style', value: null })
	useSyncConfigStore().setPreference({
	path: 'simple.styleCustomData',
	value: null,
	})
	},
	resetThemeV3Palette() {
	useSyncConfigStore().setPreference({
	path: 'simple.palette',
	value: null,
	})
	useSyncConfigStore().setPreference({
	path: 'simple.paletteCustomData',
	value: null,
	})
	},
	resetThemeV2() {
	useSyncConfigStore().setPreference({ path: 'simple.theme', value: null })
	useSyncConfigStore().setPreference({
	path: 'simple.customTheme',
	value: null,
	})
	useSyncConfigStore().setPreference({
	path: 'simple.customThemeSource',
	value: null,
	})
	},
	async getThemeData() {
	const getData = async (resource, index, customData, name) => {
	const capitalizedResource =
	resource[0].toUpperCase() + resource.slice(1)
	const result = {}

	if (customData) {
	result.nameUsed = 'custom' // custom data overrides name
	result.dataUsed = customData
	} else {
	result.nameUsed = name

	if (result.nameUsed == null) {
	result.dataUsed = null
	return result
	}

	let fetchFunc = index[result.nameUsed]
	// Fallbacks
	if (!fetchFunc) {
	if (resource === 'style' \|\| resource === 'palette') {
	return result
	}
	const newName = Object.keys(index)[0]
	fetchFunc = index[newName]
	console.warn(
	`${capitalizedResource} with id '${this.styleNameUsed}' not found, trying back to '${newName}'`,
	)
	if (!fetchFunc) {
	console.warn(
	`${capitalizedResource} doesn't have a fallback, defaulting to stock.`,
	)
	fetchFunc = () => Promise.resolve(null)
	}
	}
	result.dataUsed = await fetchFunc()
	}
	return result
	}

	let {
	theme: instanceThemeName,
	style: instanceStyleName,
	palette: instancePaletteName,
	} = useInstanceStore().instanceIdentity

	let { themesIndex, stylesIndex, palettesIndex } = useInstanceStore()

	const {
	style: userStyleName,
	styleCustomData: userStyleCustomData,
	palette: userPaletteName,
	paletteCustomData: userPaletteCustomData,
	} = useMergedConfigStore().mergedConfig

	let {
	theme: userThemeV2Name,
	customTheme: userThemeV2Snapshot,
	customThemeSource: userThemeV2Source,
	} = useMergedConfigStore().mergedConfig

	let majorVersionUsed

	console.debug(
	`User V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}`,
	)
	console.debug(
	`User V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}`,
	)

	console.debug(
	`Instance V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`,
	)
	console.debug('Instance V2 theme: ' + instanceThemeName)

	if (
	userPaletteName \|\|
	userPaletteCustomData \|\|
	userStyleName \|\|
	userStyleCustomData \|\|
	// User V2 overrides instance V3
	((instancePaletteName \|\| instanceStyleName) &&
	instanceThemeName == null &&
	userThemeV2Name == null)
	) {
	// Palette and/or style overrides V2 themes
	instanceThemeName = null
	userThemeV2Name = null
	userThemeV2Source = null
	userThemeV2Snapshot = null

	majorVersionUsed = 'v3'
	} else if (
	userThemeV2Name \|\|
	userThemeV2Snapshot \|\|
	userThemeV2Source \|\|
	instanceThemeName
	) {
	majorVersionUsed = 'v2'
	} else {
	// if all fails fallback to v3
	majorVersionUsed = 'v3'
	}

	if (majorVersionUsed === 'v3') {
	const result = await Promise.all([
	this.fetchPalettesIndex(),
	this.fetchStylesIndex(),
	])

	palettesIndex = result[0]
	stylesIndex = result[1]
	} else {
	// Promise.all just to be uniform with v3
	const result = await Promise.all([this.fetchThemesIndex()])

	themesIndex = result[0]
	}

	this.themeVersion = majorVersionUsed

	console.debug('Version used', majorVersionUsed)

	if (majorVersionUsed === 'v3') {
	this.themeDataUsed = null
	this.themeNameUsed = null

	const style = await getData(
	'style',
	stylesIndex,
	userStyleCustomData,
	userStyleName \|\| instanceStyleName,
	)
	this.styleNameUsed = style.nameUsed
	this.styleDataUsed = style.dataUsed

	let firstStylePaletteName = null
	style.dataUsed
	?.filter((x) => x.component === '@palette')
	.map((x) => {
	const cleanDirectives = Object.fromEntries(
	Object.entries(x.directives).filter(([k]) => k),
	)

	return { name: x.variant, ...cleanDirectives }
	})
	.forEach((palette) => {
	const key =
	'style.' + palette.name.toLowerCase().replaceAll(' ', '_')
	if (!firstStylePaletteName) firstStylePaletteName = key
	palettesIndex[key] = () => Promise.resolve(palette)
	})

	const palette = await getData(
	'palette',
	palettesIndex,
	userPaletteCustomData,
	this.useStylePalette
	? firstStylePaletteName
	: userPaletteName \|\| instancePaletteName,
	)

	if (this.useStylePalette) {
	useSyncConfigStore().setPreference({
	path: 'simple.palette',
	value: firstStylePaletteName,
	})
	useSyncConfigStore().pushSyncConfig()
	}

	this.paletteNameUsed = palette.nameUsed
	this.paletteDataUsed = palette.dataUsed

	if (this.paletteDataUsed) {
	this.paletteDataUsed.link =
	this.paletteDataUsed.link \|\| this.paletteDataUsed.accent
	this.paletteDataUsed.accent =
	this.paletteDataUsed.accent \|\| this.paletteDataUsed.link
	}
	if (Array.isArray(this.paletteDataUsed)) {
	const [
	name,
	bg,
	fg,
	text,
	link,
	cRed = '#FF0000',
	cGreen = '#00FF00',
	cBlue = '#0000FF',
	cOrange = '#E3FF00',
	] = palette.dataUsed
	this.paletteDataUsed = {
	name,
	bg,
	fg,
	text,
	link,
	accent: link,
	cRed,
	cBlue,
	cGreen,
	cOrange,
	}
	}
	console.debug('Palette data used', palette.dataUsed)
	} else {
	this.styleNameUsed = null
	this.styleDataUsed = null
	this.paletteNameUsed = null
	this.paletteDataUsed = null

	const theme = await getData(
	'theme',
	themesIndex,
	userThemeV2Source \|\| userThemeV2Snapshot,
	userThemeV2Name \|\| instanceThemeName,
	)
	this.themeNameUsed = theme.nameUsed
	this.themeDataUsed = theme.dataUsed
	}
	},
	async setThemeApplied() {
	this.themeApplied = true
	},
	async applyTheme({ recompile = false } = {}) {
	const { mergedConfig } = useMergedConfigStore()
	const { forceThemeRecompilation, themeDebug } = mergedConfig

	this.themeChangeInProgress = true
	// If we're not forced to recompile try using
	// cache (tryLoadCache return true if load successful)

	const forceRecompile = forceThemeRecompilation \|\| recompile

	await this.getThemeData()

	if (!forceRecompile && !themeDebug && (await tryLoadCache())) {
	this.themeChangeInProgress = false
	return this.setThemeApplied()
	}
	window.splashUpdate('splash.theme')

	try {
	const paletteIss = (() => {
	if (!this.paletteDataUsed) return null
	const result = {
	component: 'Root',
	directives: {},
	}

	Object.entries(this.paletteDataUsed)
	.filter(([k]) => k !== 'name')
	.forEach(([k, v]) => {
	let issRootDirectiveName
	switch (k) {
	case 'background':
	issRootDirectiveName = 'bg'
	break
	case 'foreground':
	issRootDirectiveName = 'fg'
	break
	default:
	issRootDirectiveName = k
	}
	result.directives['--' + issRootDirectiveName] = 'color \| ' + v
	})
	return result
	})()

	const theme2ruleset =
	this.themeDataUsed &&
	convertTheme2To3(normalizeThemeData(this.themeDataUsed))
	const hacks = []

	const fontMap = {
	Interface: 'Root',
	Input: 'Input',
	Posts: 'Post',
	Monospace: 'Root',
	}

	Object.entries(fontMap).forEach(([font, component]) => {
	const family = mergedConfig[`font${font}`]
	const variable = font === 'Monospace' ? '--monoFont' : '--font'
	if (typeof family === 'string') {
	const familyString = GENERIC_FONT_NAMES.has(family)
	? family
	: `"${family}"`
	hacks.push({
	component,
	directives: {
	[variable]: `generic \| ${familyString}`,
	},
	})
	}
	})

	if (mergedConfig.underlay !== 'none') {
	const newRule = {
	component: 'Underlay',
	directives: {},
	}
	if (mergedConfig.underlay === 'opaque') {
	newRule.directives.opacity = 1
	newRule.directives.background = '--wallpaper'
	}
	if (mergedConfig.underlay === 'transparent') {
	newRule.directives.opacity = 0
	}
	hacks.push(newRule)
	}

	const rulesetArray = [
	theme2ruleset,
	this.styleDataUsed,
	paletteIss,
	hacks,
	].filter(Boolean)

	return applyTheme(
	rulesetArray.flat(),
	() => this.setThemeApplied(),
	() => {
	this.themeChangeInProgress = false
	},
	themeDebug,
	)
	} catch (e) {
	console.error(e)
	window.splashError(e)
	}
	},
	},
	})

	export const normalizeThemeData = (input) => {
	let themeData, themeSource

	if (input.themeFileVerison === 1) {
	// this might not be even used at all, some leftover of unimplemented code in V2 editor
	return generatePreset(input).theme
	} else if (
	Object.hasOwn(input, '_pleroma_theme_version') \|\|
	Object.hasOwn(input, 'source') \|\|
	Object.hasOwn(input, 'theme')
	) {
	// We got passed a full theme file
	themeData = input.theme
	themeSource = input.source
	} else if (
	Object.hasOwn(input, 'themeEngineVersion') \|\|
	Object.hasOwn(input, 'colors')
	) {
	// We got passed a source/snapshot
	themeData = input
	themeSource = input
	}
	// New theme presets don't have 'theme' property, they use 'source'

	let out // shout, shout let it all out
	if (themeSource?.themeEngineVersion === CURRENT_VERSION) {
	// There are some themes in wild that have completely broken source
	out = { ...(themeData \|\| {}), ...themeSource }
	} else {
	out = themeData
	}

	// generatePreset here basically creates/updates "snapshot",
	// while also fixing the 2.2 -> 2.3 colors/shadows/etc
	return generatePreset(out).theme
	}
	diff --git a/src/stores/sync_config.js b/src/stores/sync_config.js
	index 9464ffb686..17a60d3ef2 100644
	--- a/src/stores/sync_config.js
	+++ b/src/stores/sync_config.js
	@@ -1,844 +1,845 @@
	import sum from 'hash-sum'
	import {
	merge as _merge,
	clamp,
	cloneDeep,
	findLastIndex,
	get,
	groupBy,
	isEqual,
	last,
	set,
	take,
	uniqWith,
	unset,
	} from 'lodash'
	import { defineStore } from 'pinia'
	import { v4 as uuidv4 } from 'uuid'
	import { toRaw } from 'vue'

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

	import { useLocalConfigStore } from 'src/stores/local_config.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	+import { useUsersStore } from 'src/stores/users.js'

	import { updateProfileJSON } from 'src/api/user.js'
	import { storage } from 'src/lib/storage.js'
	import {
	makeUndefined,
	ROOT_CONFIG,
	ROOT_CONFIG_DEFINITIONS,
	validateSetting,
	} from 'src/modules/default_config_state.js'
	import { oldDefaultConfigSync } from 'src/modules/old_default_config_state.js'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	return result
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	return data
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	return finalValue === undefined
	? [path, definition.default]
	: [path, finalValue]
	})
	newState.prefsStorage.simple = Object.fromEntries(
	newEntries.filter(Boolean),
	)
	return newState
	},
	},
	})
	diff --git a/src/stores/user_highlight.js b/src/stores/user_highlight.js
	index 3cd3bfe7dd..a4cbacd6eb 100644
	--- a/src/stores/user_highlight.js
	+++ b/src/stores/user_highlight.js
	@@ -1,349 +1,350 @@
	import {
	merge as _merge,
	clone,
	cloneDeep,
	groupBy,
	isEqual,
	last,
	} from 'lodash'
	import { defineStore } from 'pinia'
	import { toRaw } from 'vue'

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

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

	export const 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,
	}

	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 (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 = journals
	.map((j) => (Array.isArray(j) ? j : []))
	.flat()
	.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 [last(journal)]
	})
	return trimmedGrouped
	.flat()
	.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 })
	+ this.updateCache({ username: useUsersStore().currentUser.fqn })
	const params = {
	pleroma_settings_store: { user_highlight: this.cache },
	}
	updateProfileJSON({
	params,
	credentials: useOAuthStore().token,
	}).then(({ data: user }) => {
	this.initUserHighlight(user)
	this.dirty = false
	})
	},
	},
	persist: {
	afterLoad(state) {
	return state
	},
	},
	})
	diff --git a/src/stores/users.js b/src/stores/users.js
	index 7d12555696..d03348bcb3 100644
	--- a/src/stores/users.js
	+++ b/src/stores/users.js
	@@ -1,671 +1,673 @@
	import Cookies from 'js-cookie'
	import { last, map } from 'lodash'
	import { defineStore } from 'pinia'

	import {
	registerPushNotifications,
	unregisterPushNotifications,
	} from '../services/sw/sw.js'
	import {
	windowHeight,
	windowWidth,
	} from '../services/window_utils/window_utils'

	import { useAnnouncementsStore } from 'src/stores/announcements.js'
	import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
	import { useChatsStore } from 'src/stores/chats.js'
	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useListsStore } from 'src/stores/lists.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useSyncConfigStore } from 'src/stores/sync_config.js'
	import { useUserHighlightStore } from 'src/stores/user_highlight.js'

	import { revokeToken } from 'src/api/oauth.js'
	import {
	fetchFollowers,
	fetchFriends,
	fetchUser,
	fetchUserByName,
	searchUsers,
	verifyCredentials,
	} from 'src/api/public.js'
	import {
	blockUser,
	editUserNote,
	fetchBlocks,
	fetchDomainMutes,
	fetchMutes,
	fetchUserInLists,
	fetchUserRelationship,
	followUser,
	muteDomain,
	muteUser,
	removeUserFromFollowers,
	unblockUser,
	unmuteDomain,
	unmuteUser,
	} from 'src/api/user.js'

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

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

	-export const defaultState = {
	- loggingIn: false,
	- lastLoginName: null,
	- currentUser: null,
	- users: new Map(),
	- usersByName: new Map(),
	- usersByURL: new Map(),
	- relationships: new Map(),
	-}
	-
	export const useUsersStore = defineStore('users', {
	- state: defaultState,
	+ state: () => ({
	+ loggingIn: false,
	+ lastLoginName: null,
	+ currentUser: null,
	+ users: new Map(),
	+ usersByName: new Map(),
	+ usersByURL: new Map(),
	+ relationships: new Map(),
	+ }),
	getters: {
	loggedIn: (state) => !!state.currentUser,
	findUser: (state) => (query) => {
	return state.users.get(query)
	},
	findUserByName: (state) => (query) => {
	return state.usersByName.get(query.toLowerCase())
	},
	findUserByUrl: (state) => (query) => {
	return state.usersByURL.get(query.toLowerCase())
	},
	relationship: (state) => (id) => {
	const rel = id && state.relationships.get(id)
	return rel \|\| { id, loading: true }
	},
	},
	actions: {
	tagUser({ user: { id }, tag }) {
	const user = this.users.get(id)
	user.tags.add(tag)
	},
	untagUser({ user: { id }, tag }) {
	const user = this.users.get(id)
	user.tags.delete(tag)
	},
	updateRight({ user: { id }, right, value }) {
	const user = this.users.get(id)
	const newRights = user.rights
	newRights[right] = value
	user.rights = newRights
	},
	async updateUserAdminData({ user }) {
	const localUser = await this.fetchUserIfMissing(user.id)

	localUser.adminData = user
	localUser.deactivated = !user.is_active
	localUser.tags = new Set(user.tags)
	},
	setCurrentUser(user) {
	this.lastLoginName = user.screen_name
	this.currentUser = user
	},
	clearCurrentUser() {
	this.currentUser = null
	this.lastLoginName = null
	},
	saveFriendIds({ id, friendIds }) {
	const user = this.users.get(id)
	user.friendIds = [...new Set([...(user.friendIds \|\| []), ...friendIds])]
	},
	saveFollowerIds({ id, followerIds }) {
	const user = this.users.get(id)
	user.followerIds = [...new Set([user.followerIds \|\| [], ...followerIds])]
	},
	// Because frontend doesn't have a reason to keep these stuff in memory
	// outside of viewing someones user profile.
	clearFriends(userId) {
	const user = this.users.get(userId)
	if (user) {
	user.friendIds = []
	}
	},
	clearFollowers(userId) {
	const user = this.users.get(userId)
	if (user) {
	user.followerIds = []
	}
	},
	addNewUsers(users, timestamp) {
	users.forEach((user) => {
	- const existing = users.get(user.id) ?? {}
	+ const existing = this.users.get(user.id) ?? {}

	const { relationship, ...old } = existing
	const { relationshop, ...neu } = user
	const newUser = { ...old, ...neu }

	this.users.set(user.id, newUser)
	this.usersByName.set(user.screen_name.toLowerCase(), newUser)
	this.usersByURL.set(user.url.toLowerCase(), newUser)
	+
	+ if (user.id === this.currentUser.id) {
	+ this.currentUser = newUser
	+ }
	})
	},
	updateUserRelationship(relationships) {
	relationships.forEach((relationship) => {
	this.relationships[relationship.id] = relationship
	})
	},
	updateUserInLists({ id, inLists }) {
	this.users.get(id).inLists = inLists
	},
	saveBlockIds(blockIds) {
	this.currentUser.blockIds = blockIds
	},
	addBlockId(blockId) {
	if (this.currentUser.blockIds.includes(blockId)) {
	this.currentUser.blockIds.push(blockId)
	}
	},
	setBlockIdsMaxId(blockIdsMaxId) {
	this.currentUser.blockIdsMaxId = blockIdsMaxId
	},
	saveMuteIds(muteIds) {
	this.currentUser.muteIds = muteIds
	},
	setMuteIdsMaxId(muteIdsMaxId) {
	this.currentUser.muteIdsMaxId = muteIdsMaxId
	},
	addMuteId(muteId) {
	if (this.currentUser.muteIds.includes(muteId)) {
	this.currentUser.muteIds.push(muteId)
	}
	},
	saveDomainMutes(domainMutes) {
	this.currentUser.domainMutes = domainMutes
	},
	addDomainMute(domain) {
	if (this.currentUser.domainMutes.includes(domain)) {
	this.currentUser.domainMutes.push(domain)
	}
	},
	removeDomainMute(domain) {
	const index = this.currentUser.domainMutes.indexOf(domain)
	if (index !== -1) {
	this.currentUser.domainMutes.splice(index, 1)
	}
	},
	setPinnedToUser(status) {
	const user = this.users.get(status.user.id)
	user.pinnedStatusIds = user.pinnedStatusIds \|\| []
	const index = user.pinnedStatusIds.indexOf(status.id)

	if (status.pinned && index === -1) {
	user.pinnedStatusIds.push(status.id)
	} else if (!status.pinned && index !== -1) {
	user.pinnedStatusIds.splice(index, 1)
	}
	},
	setUserForStatus(status) {
	status.user = this.users.get(status.user.id)
	},
	setUserForNotification(notification) {
	if (notification.type !== 'follow') {
	notification.action.user = this.users.get(notification.action.user.id)
	}
	notification.from_profile = this.users.get(notification.from_profile.id)
	},
	async fetchUserIfMissing(id) {
	const user = this.findUser(id)
	if (!user) {
	return this.fetchUser(id)
	} else {
	return user
	}
	},
	fetchUser(id) {
	return fetchUser({
	id,
	credentials: useOAuthStore().token,
	})
	.then(({ data: user }) => {
	this.addNewUsers([user])
	return user
	})
	.catch((error) => {
	if (error.statusCode === 404) {
	console.warn(`User ${id} not found`)
	} else {
	throw error
	}
	})
	},
	fetchUserByName(name) {
	return fetchUserByName({
	name,
	credentials: useOAuthStore().token,
	}).then(({ data: user }) => {
	this.addNewUsers([user])
	return user
	})
	},
	fetchUserRelationship(id) {
	if (this.currentUser) {
	fetchUserRelationship({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data: relationships }) =>
	this.updateUserRelationship(relationships),
	)
	}
	},
	fetchUserInLists(id) {
	if (this.currentUser) {
	fetchUserInLists({
	id,
	credentials: useOAuthStore().token,
	}).then(({ data: inLists }) => this.updateUserInLists({ id, inLists }))
	}
	},
	fetchBlocks(args) {
	const { reset } = args \|\| {}

	const maxId = this.currentUser.blockIdsMaxId
	return fetchBlocks({
	maxId,
	credentials: useOAuthStore().token,
	}).then(({ data: blocks }) => {
	if (reset) {
	this.saveBlockIds(blocks.map(({ id }) => id))
	} else {
	blocks.forEach(({ id }) => this.addBlockId(id))
	}
	if (blocks.length) {
	this.setBlockIdsMaxId(last(blocks).id)
	}
	this.addNewUsers(blocks)
	return blocks
	})
	},
	blockUser(id, expiresIn = 0) {
	const store = window.vuex

	const predictedRelationship = this.relationships[id] \|\| { id }
	this.updateUserRelationship([predictedRelationship])
	this.addBlockId(id)

	return blockUser({ id, expiresIn }).then(({ data: relationship }) => {
	this.updateUserRelationship([relationship])
	this.addBlockId(id)

	store.commit('removeStatus', { timeline: 'friends', userId: id })
	store.commit('removeStatus', { timeline: 'public', userId: id })
	store.commit('removeStatus', {
	timeline: 'publicAndExternal',
	userId: id,
	})
	})
	},
	unblockUser(id) {
	return unblockUser({ id }).then(({ data: relationship }) =>
	this.updateUserRelationship([relationship]),
	)
	},
	removeUserFromFollowers(id) {
	return removeUserFromFollowers({ id }).then((relationship) =>
	this.updateUserRelationship([relationship]),
	)
	},
	blockUsers(data = []) {
	return Promise.all(data.map((d) => this.blockUser(d)))
	},
	unblockUsers(data = []) {
	return Promise.all(data.map((d) => unblockUser(d)))
	},
	editUserNote({ id, comment }) {
	return editUserNote({ id, comment }).then((relationship) =>
	this.updateUserRelationship([relationship]),
	)
	},
	fetchMutes(args) {
	const { reset } = args \|\| {}

	const maxId = this.currentUser.muteIdsMaxId
	return fetchMutes({
	maxId,
	credentials: useOAuthStore().token,
	}).then(({ data: mutes }) => {
	if (reset) {
	this.saveMuteIds(mutes.map(({ id }) => id))
	} else {
	mutes.forEach(({ id }) => this.addMuteId(id))
	}
	if (mutes.length) {
	this.setMuteIdsMaxId(last(mutes).id)
	}
	this.addNewUsers(mutes)
	return mutes
	})
	},
	muteUser(id, expiresIn = 0) {
	const predictedRelationship = this.relationships[id] \|\| { id }
	this.updateUserRelationship([predictedRelationship])
	this.addMuteId(id)

	return muteUser({
	id,
	expiresIn,
	credentials: useOAuthStore().token,
	}).then(({ data: relationship }) => {
	this.updateUserRelationship([relationship])
	this.addMuteId(id)
	})
	},
	unmuteUser(id) {
	const predictedRelationship = this.relationships[id] \|\| { id }
	predictedRelationship.muting = false
	this.updateUserRelationship([predictedRelationship])

	return unmuteUser({ id }).then(({ data: relationship }) =>
	this.updateUserRelationship([relationship]),
	)
	},
	hideReblogs(id) {
	return followUser({
	id,
	reblogs: false,
	credentials: useOAuthStore().token,
	}).then(({ data: relationship }) =>
	this.updateUserRelationship([relationship]),
	)
	},
	showReblogs(id) {
	return followUser({
	id,
	reblogs: true,
	credentials: useOAuthStore().token,
	}).then(({ data: relationship }) =>
	this.updateUserRelationship([relationship]),
	)
	},
	muteUsers(data = []) {
	return Promise.all(data.map((d) => this.muteUser(d)))
	},
	unmuteUsers(ids = []) {
	return Promise.all(ids.map((d) => this.unmuteUser(d)))
	},
	fetchDomainMutes() {
	return fetchDomainMutes({
	credentials: useOAuthStore().token,
	}).then(({ data: domainMutes }) => {
	this.saveDomainMutes(domainMutes)
	return domainMutes
	})
	},
	muteDomain(domain) {
	return muteDomain({
	domain,
	credentials: useOAuthStore().token,
	}).then(() => this.addDomainMute(domain))
	},
	unmuteDomain(domain) {
	return unmuteDomain({
	domain,
	credentials: useOAuthStore().token,
	}).then(() => this.removeDomainMute(domain))
	},
	muteDomains(domains = []) {
	return Promise.all(domains.map((domain) => this.muteDomain(domain)))
	},
	unmuteDomains(domain = []) {
	return Promise.all(domain.map((domain) => this.unmuteDomain(domain)))
	},
	fetchFriends(id) {
	const user = this.users.get(id)
	const maxId = last(user.friendIds)
	return fetchFriends({
	id,
	maxId,
	credentials: useOAuthStore().token,
	}).then(({ data: friends }) => {
	this.addNewUsers(friends)
	this.saveFriendIds({ id, friendIds: map(friends, 'id') })
	return friends
	})
	},
	fetchFollowers(id) {
	const user = this.users.get(id)
	const maxId = last(user.followerIds)
	return fetchFollowers({
	id,
	maxId,
	credentials: useOAuthStore().token,
	}).then(({ data: followers }) => {
	this.addNewUsers(followers)
	this.saveFollowerIds({ id, followerIds: map(followers, 'id') })
	return followers
	})
	},
	subscribeUser(id) {
	return followUser({
	id,
	notify: true,
	credentials: useOAuthStore().token,
	}).then(({ data: relationship }) =>
	this.updateUserRelationship([relationship]),
	)
	},
	unsubscribeUser(id) {
	return followUser({
	id,
	notify: false,
	credentials: useOAuthStore().token,
	}).then(({ data: relationship }) =>
	this.updateUserRelationship([relationship]),
	)
	},
	registerPushNotifications() {
	const token = this.currentUser.credentials
	const vapidPublicKey = useInstanceStore().vapidPublicKey
	const isEnabled = useMergedConfigStore().mergedConfig.webPushNotifications
	const notificationVisibility =
	useMergedConfigStore().mergedConfig.notificationVisibility

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

	unregisterPushNotifications(token)
	},
	searchUsers({ query }) {
	return searchUsers({
	query,
	credentials: useOAuthStore().token,
	}).then(({ data: users }) => {
	this.addNewUsers(users)
	return users
	})
	},

	logout() {
	const store = window.vuex
	const oauth = useOAuthStore()

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

	return revokeToken(params)
	})
	.then(() => {
	this.clearCurrentUser()
	store.dispatch('disconnectFromSocket')
	store.dispatch('stopFetchingTimeline', 'friends')
	store.dispatch('stopFetchingNotifications')
	useListsStore().stopFetching()
	useBookmarkFoldersStore().stopFetching()
	store.dispatch('stopFetchingFollowRequests')
	store.commit('clearNotifications')
	store.commit('resetStatuses')
	useChatsStore().resetChats()
	oauth.clearToken()
	Cookies.remove('__Host-pleroma_key', { path: '/' })
	useInterfaceStore().setLastTimeline('public-timeline')
	useInterfaceStore().setLayoutWidth(windowWidth())
	useInterfaceStore().setLayoutHeight(windowHeight())
	})
	},
	loginUser(accessToken) {
	return new Promise((resolve, reject) => {
	const store = window.vuex
	const dispatch = store.dispatch

	this.loggingIn = true

	verifyCredentials({
	credentials: useOAuthStore().token,
	})
	.then(({ data: user }) => {
	// user.credentials = userCredentials
	user.credentials = accessToken
	user.blockIds = []
	user.muteIds = []
	user.domainMutes = []
	this.setCurrentUser(user)

	useSyncConfigStore()
	.initSyncConfig(user)
	.then(() => {
	useInterfaceStore()
	.applyTheme()
	.catch((e) => {
	console.error('Error setting theme', e)
	})
	})
	useUserHighlightStore().initUserHighlight(user)
	this.addNewUsers([user])

	useEmojiStore().fetchEmoji()

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

	// Do server-side storage migrations

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

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

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

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

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

	// Start fetching notifications
	dispatch('startFetchingNotifications')

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

	useListsStore().startFetching()
	useBookmarkFoldersStore().startFetching()

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

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

	// Start fetching things that don't need to block the UI
	useAnnouncementsStore().startFetchingAnnouncements()

	this.fetchMutes()
	dispatch('loadDrafts')

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

	// Fetch our friends
	fetchFriends({ id: user.id }).then(({ data: friends }) =>
	this.addNewUsers(friends),
	)
	this.loggingIn = false
	resolve()
	})
	.catch((error) => {
	console.error(error)

	// Authentication failed
	this.loggingIn = false

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

	this.loggingIn = false
	if (error.tatusCode === 401) {
	throw new Error('Wrong username or password', error)
	} else {
	throw new Error('An error occurred, please try again', error)
	}
	})
	})
	},
	},
	})
	diff --git a/test/unit/specs/components/post_status_form.spec.js b/test/unit/specs/components/post_status_form.spec.js
	index f89102504d..50b7471f2a 100644
	--- a/test/unit/specs/components/post_status_form.spec.js
	+++ b/test/unit/specs/components/post_status_form.spec.js
	@@ -1,322 +1,323 @@
	import { mount } from '@vue/test-utils'
	import { vi } from 'vitest'

	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import { mountOpts } from '../../../fixtures/setup_test'

	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	+import { useUsersStore } from 'src/stores/users.js'

	const currentUser = {
	id: 'current-user',
	default_scope: 'public',
	locked: false,
	}

	const repliedUser = {
	id: 'replied-user',
	screen_name: 'replied',
	}

	const repliedStatus = {
	id: 'status-1',
	visibility: 'public',
	user: repliedUser,
	}

	const repliedStatus2 = {
	id: 'status-2',
	visibility: 'private',
	summary: 'subject',
	user: repliedUser,
	}

	const replyMountOpts = (props) =>
	mountOpts({
	props,
	afterStore(store) {
	- store.state.users.currentUser = currentUser
	+ useUsersStore().currentUser = currentUser
	store.state.statuses.allStatusesObject = {
	[repliedStatus.id]: repliedStatus,
	}
	},
	})

	describe('PostStatusForm', () => {
	beforeEach(() => {
	vi.useFakeTimers()
	})

	it('Clean empty initial state', () => {
	const wrapper = mount(PostStatusForm, replyMountOpts())

	expect(wrapper.vm.statusType).to.equal('new')
	expect(wrapper.vm.newStatus.spoilerText).to.eql('')
	expect(wrapper.vm.newStatus.mentions).to.eql('')
	expect(wrapper.vm.newStatus.status).to.eql('')
	})

	it('Reset cleans form to pristine state equal to state form was when created', () => {
	const wrapper = mount(PostStatusForm, replyMountOpts())

	const initial = { ...wrapper.vm.newStatus }
	wrapper.vm.clearStatus()

	expect(wrapper.vm.newStatus).to.eql(initial)
	})

	it('Initializes a reply form', () => {
	const wrapper = mount(
	PostStatusForm,
	replyMountOpts({
	repliedStatus: repliedStatus,
	}),
	)

	useInstanceCapabilitiesStore().quotingAvailable = true

	expect(wrapper.vm.statusType).to.equal('reply')
	expect(wrapper.vm.isReply).to.equal(true)
	expect(wrapper.vm.refId).to.equal('status-1')
	expect(wrapper.vm.quotable).to.equal(true)
	expect(wrapper.vm.inReplyToStatusId).to.equal('status-1')
	expect(wrapper.vm.newStatus.quote).to.be.null
	expect(wrapper.vm.newStatus.poll).to.be.null
	expect(wrapper.vm.newStatus.spoilerText).to.eql('')
	expect(wrapper.vm.newStatus.mentions).to.eql('@replied')
	expect(wrapper.vm.newStatus.status).to.eql('@replied ')
	expect(wrapper.vm.newStatus.visibility).to.eql('public')
	})

	it('Copies scope and subject line, disables quoting for locked posts', () => {
	const wrapper = mount(
	PostStatusForm,
	replyMountOpts({
	repliedStatus: repliedStatus2,
	}),
	)

	useInstanceCapabilitiesStore().quotingAvailable = true

	expect(wrapper.vm.statusType).to.equal('reply')
	expect(wrapper.vm.isReply).to.equal(true)
	expect(wrapper.vm.quotable).to.equal(false)
	expect(wrapper.vm.newStatus.quote).to.be.null
	expect(wrapper.vm.newStatus.poll).to.be.null
	expect(wrapper.vm.newStatus.spoilerText).to.eql('re: subject')
	expect(wrapper.vm.newStatus.mentions).to.eql('@replied')
	expect(wrapper.vm.newStatus.status).to.eql('@replied ')
	expect(wrapper.vm.newStatus.visibility).to.eql('private')

	expect(wrapper.vm.postingOptions.status).to.eql('@replied ')
	expect(wrapper.vm.postingOptions.spoilerText).to.eql('re: subject')
	expect(wrapper.vm.postingOptions.visibility).to.eql('private')
	expect(wrapper.vm.postingOptions.sensitive).to.eql(false)
	expect(wrapper.vm.postingOptions.media).to.eql([])
	expect(wrapper.vm.postingOptions.inReplyToStatusId).to.eql('status-2')
	expect(wrapper.vm.postingOptions.quoteId).to.be.null
	expect(wrapper.vm.postingOptions.contentType).to.eql('text/plain')
	expect(wrapper.vm.postingOptions.poll).to.be.null
	})

	it('Forces direct mode when replying to a DM, mastodon style subject handling', () => {
	// We need to initialize pinia first which is happening here...
	const options = replyMountOpts({
	repliedStatus: { ...repliedStatus2, visibility: 'direct' },
	})

	// ...set our settings...
	useMergedConfigStore().mergedConfig = {
	...useMergedConfigStore().mergedConfig,
	subjectLineBehavior: 'masto',
	}

	// ...and only then mount our component
	const wrapper = mount(PostStatusForm, options)

	// Otherwise we get multiple instances of pinia that don't talk to each other

	expect(wrapper.vm.statusType).to.equal('reply')
	expect(wrapper.vm.isReply).to.equal(true)
	expect(wrapper.vm.quotable).to.equal(false)
	expect(wrapper.vm.newStatus.quote).to.be.null
	expect(wrapper.vm.newStatus.poll).to.be.null
	expect(wrapper.vm.newStatus.spoilerText).to.eql('subject')
	expect(wrapper.vm.newStatus.mentions).to.eql('@replied')
	expect(wrapper.vm.newStatus.status).to.eql('@replied ')
	expect(wrapper.vm.newStatus.visibility).to.eql('direct')
	})

	it('Sets status to statusText without mentions if mentions line is enabled', () => {
	const wrapper = mount(
	PostStatusForm,
	replyMountOpts({
	repliedStatus: repliedStatus2,
	statusText: 'testing',
	mentionsLine: true,
	}),
	)

	expect(wrapper.vm.statusType).to.equal('reply')
	expect(wrapper.vm.isReply).to.equal(true)
	expect(wrapper.vm.newStatus.mentions).to.eql('@replied')
	expect(wrapper.vm.newStatus.status).to.eql('testing')
	})

	it('Sets mention when asked for it', () => {
	const wrapper = mount(
	PostStatusForm,
	replyMountOpts({
	profileMention: repliedUser,
	}),
	)

	expect(wrapper.vm.statusType).to.equal('mention')
	expect(wrapper.vm.isReply).to.equal(false)
	expect(wrapper.vm.newStatus.mentions).to.eql('@replied')
	expect(wrapper.vm.newStatus.status).to.eql('@replied ')
	})

	it('Initializes quote when reply/quote toggled to quote', () => {
	const wrapper = mount(
	PostStatusForm,
	replyMountOpts({
	repliedStatus: repliedStatus2,
	}),
	)

	expect(wrapper.vm.statusType).to.equal('reply')
	expect(wrapper.vm.isReply).to.equal(true)

	wrapper.vm.quoteThreadToggled = true

	expect(wrapper.vm.newStatus.quote).to.eql({ thread: true, id: 'status-2' })
	})

	it('Resets quote when reply/quote toggled to reply', () => {
	const wrapper = mount(
	PostStatusForm,
	replyMountOpts({
	repliedStatus: repliedStatus2,
	}),
	)

	expect(wrapper.vm.statusType).to.equal('reply')
	expect(wrapper.vm.isReply).to.equal(true)

	wrapper.vm.quoteThreadToggled = true
	wrapper.vm.quoteThreadToggled = false

	expect(wrapper.vm.newStatus.quote).to.be.null
	})

	it('Initializes and reset quote when toggling quote attachment', () => {
	const wrapper = mount(
	PostStatusForm,
	replyMountOpts({
	repliedStatus: repliedStatus2,
	}),
	)

	expect(wrapper.vm.statusType).to.equal('reply')
	expect(wrapper.vm.isReply).to.equal(true)

	wrapper.vm.toggleQuoteForm()
	expect(wrapper.vm.newStatus.quote).to.eql({
	thread: false,
	id: null,
	url: '',
	})
	wrapper.vm.toggleQuoteForm()
	expect(wrapper.vm.newStatus.quote).to.be.null
	})

	it('Status editing', () => {
	const wrapper = mount(
	PostStatusForm,
	replyMountOpts({
	statusId: 'edited',
	statusText: 'text',
	statusSubject: 'heading',
	statusIsSensitive: true,
	statusPoll: {},
	statusQuote: {},
	statusFiles: [],
	statusMediaDescriptions: {},
	statusVisibility: 'unlisted',
	statusContentType: 'text/markdown',
	}),
	)

	expect(wrapper.vm.statusType).to.equal('edit')
	expect(wrapper.vm.isReply).to.equal(false) // edits don't support changing reply-to so it's pretty much ignored
	expect(wrapper.vm.isEdit).to.equal(true)
	expect(wrapper.vm.newStatus.quote).to.eql({})
	expect(wrapper.vm.newStatus.poll).to.eql({})
	expect(wrapper.vm.newStatus.spoilerText).to.eql('heading')
	expect(wrapper.vm.newStatus.mentions).to.eql('')
	expect(wrapper.vm.newStatus.status).to.eql('text')
	expect(wrapper.vm.newStatus.visibility).to.eql('unlisted')
	expect(wrapper.vm.newStatus.contentType).to.eql('text/markdown')
	expect(wrapper.vm.newStatus.nsfw).to.equal(true)
	expect(wrapper.vm.newStatus.files).to.eql([])
	})

	it('Posting should reset idempotency key', async () => {
	vi.setSystemTime(new Date(2027, 1, 1, 13))
	const wrapper = mount(PostStatusForm, replyMountOpts())
	const oldIdempotency = wrapper.vm.idempotencyKey

	vi.setSystemTime(new Date(2028, 1, 1, 13))

	wrapper.vm.newStatus.status = 'Testing'
	await wrapper.vm.postStatus()

	expect(wrapper.vm.idempotencyKey).to.not.eql(oldIdempotency)
	})

	// TODO Probably better to separate attachment upload/manipulation into its own component?
	// we need to upload-on-submit for compression setting anyway
	it('Attachments manipulations (moving, adding, removing)', () => {
	const wrapper = mount(PostStatusForm, replyMountOpts())

	const i1 = { id: '1', url: 'a' }
	const i2 = { id: '2', url: 'b' }
	const i3 = { id: '3', url: 'c' }
	const i4 = { id: '4', url: 'd' }
	const iX = { id: 'x', url: 'x' }

	wrapper.vm.newStatus.files = [i3, i1, iX, i2]

	wrapper.vm.removeMediaFile(iX)
	expect(wrapper.vm.newStatus.files).to.eql([i3, i1, i2])

	wrapper.vm.shiftUpMediaFile(i1)
	expect(wrapper.vm.newStatus.files).to.eql([i1, i3, i2])

	wrapper.vm.shiftUpMediaFile(i1) // should ignore
	expect(wrapper.vm.newStatus.files).to.eql([i1, i3, i2])

	wrapper.vm.shiftDnMediaFile(i3)
	expect(wrapper.vm.newStatus.files).to.eql([i1, i2, i3])

	wrapper.vm.shiftDnMediaFile(i3) // should ignore
	expect(wrapper.vm.newStatus.files).to.eql([i1, i2, i3])

	wrapper.vm.addMediaFile(i4)
	expect(wrapper.vm.newStatus.files).to.eql([i1, i2, i3, i4])
	})

	it('Attachment descriptions', () => {
	const wrapper = mount(PostStatusForm, replyMountOpts())

	const i1 = { id: '1', url: 'a' }

	wrapper.vm.addMediaFile(i1)
	expect(wrapper.vm.newStatus.files).to.eql([i1])

	wrapper.vm.editAttachment(i1, 'description')
	expect(wrapper.vm.newStatus.mediaDescriptions['1']).to.eql('description')
	})
	// TODO: Drafts (needs vuex to pinia migration)
	})

File Metadata

Mime Type: text/x-diff
Expires: Sun, Oct 11, 10:23 PM (1 d, 12 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1785981
Default Alt Text: (587 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions