No OneTemporary
Actions

Size

305 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 220f563f8b..a65b5e52ae 100644
	--- a/src/App.js
	+++ b/src/App.js
	@@ -1,268 +1,271 @@
	import { throttle } from 'lodash'
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'
	import { mapGetters } from 'vuex'

	import DesktopNav from './components/desktop_nav/desktop_nav.vue'
	import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue'
	import FeaturesPanel from './components/features_panel/features_panel.vue'
	import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
	import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
	import MediaModal from './components/media_modal/media_modal.vue'
	import MobileNav from './components/mobile_nav/mobile_nav.vue'
	import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
	import NavPanel from './components/nav_panel/nav_panel.vue'
	import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
	import ShoutPanel from './components/shout_panel/shout_panel.vue'
	import SideDrawer from './components/side_drawer/side_drawer.vue'
	import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue'
	import UserPanel from './components/user_panel/user_panel.vue'
	import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
	import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
	import { getOrCreateServiceWorker } from './services/sw/sw'
	import { windowHeight, windowWidth } from './services/window_utils/window_utils'

	import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useShoutStore } from 'src/stores/shout.js'

	export default {
	name: 'app',
	components: {
	UserPanel,
	NavPanel,
	Notifications: defineAsyncComponent(
	() => import('./components/notifications/notifications.vue'),
	),
	InstanceSpecificPanel,
	FeaturesPanel,
	WhoToFollowPanel,
	ShoutPanel,
	MediaModal,
	SideDrawer,
	MobilePostStatusButton,
	MobileNav,
	DesktopNav,
	SettingsModal: defineAsyncComponent(
	() => import('./components/settings_modal/settings_modal.vue'),
	),
	UpdateNotification: defineAsyncComponent(
	() => import('./components/update_notification/update_notification.vue'),
	),
	UserReportingModal,
	PostStatusModal,
	EditStatusModal,
	StatusHistoryModal,
	GlobalNoticeList,
	},
	data: () => ({
	mobileActivePanel: 'timeline',
	}),
	watch: {
	themeApplied() {
	this.removeSplash()
	},
	currentTheme() {
	this.setThemeBodyClass()
	},
	layoutType() {
	document.getElementById('modal').classList = ['-' + this.layoutType]
	},
	},
	created() {
	// Load the locale from the storage
	const val = this.$store.getters.mergedConfig.interfaceLanguage
	this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
	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 } = this.$store.getters.mergedConfig
	return [
	'-' + this.layoutType,
	...(navbarColumnStretch ? ['-column-stretch'] : []),
	]
	},
	currentUser() {
	return this.$store.state.users.currentUser
	},
	userBackground() {
	return this.currentUser.background_image
	},
	instanceBackground() {
	return this.mergedConfig.hideInstanceWallpaper ? null : this.background
	},
	background() {
	return this.userBackground \|\| this.instanceBackground
	},
	bgStyle() {
	if (this.background) {
	return {
	'--body-background-image': `url(${this.background})`,
	}
	}
	},
	shout() {
	return useShoutStore().joined
	},
	showInstanceSpecificPanel() {
	return (
	this.showInstanceSpecificPanel &&
	!this.$store.getters.mergedConfig.hideISP &&
	this.instanceSpecificPanelContent
	)
	},
	isChats() {
	return this.$route.name === 'chat' \|\| this.$route.name === 'chats'
	},
	isListEdit() {
	return this.$route.name === 'lists-edit'
	},
	newPostButtonShown() {
	if (this.isChats) return false
	if (this.isListEdit) return false
	return (
	this.$store.getters.mergedConfig.alwaysShowNewPostButton \|\|
	this.layoutType === 'mobile'
	)
	},
	shoutboxPosition() {
	return this.$store.getters.mergedConfig.alwaysShowNewPostButton \|\| false
	},
	hideShoutbox() {
	return this.$store.getters.mergedConfig.hideShoutbox
	},
	reverseLayout() {
	const { thirdColumnMode, sidebarRight: reverseSetting } =
	this.$store.getters.mergedConfig
	if (this.layoutType !== 'wide') {
	return reverseSetting
	} else {
	return thirdColumnMode === 'notifications'
	? reverseSetting
	: !reverseSetting
	}
	},
	noSticky() {
	return this.$store.getters.mergedConfig.disableStickyHeaders
	},
	showScrollbars() {
	return this.$store.getters.mergedConfig.showScrollbars
	},
	scrollParent() {
	return window /* this.$refs.appContentRef */
	},
	...mapGetters(['mergedConfig']),
	...mapState(useInterfaceStore, [
	'themeApplied',
	'styleDataUsed',
	'layoutType',
	]),
	...mapState(useInstanceStore, ['styleDataUsed', 'private']),
	+ ...mapState(useInstanceCapabilitiesStore, [
	+ 'suggestionsEnabled',
	+ 'editingAvailable',
	+ ]),
	...mapState(useInstanceStore, {
	background: (store) => store.instanceIdentity.background,
	showFeaturesPanel: (store) => store.instanceIdentity.showFeaturesPanel,
	showInstanceSpecificPanel: (store) =>
	store.instanceIdentity.showInstanceSpecificPanel,
	- suggestionsEnabled: (store) => store.featureSet.suggestionsEnabled,
	- editingAvailable: (store) => store.featureSet.editingAvailable,
	instanceSpecificPanelContent: (store) =>
	store.instanceIdentity.instanceSpecificPanelContent,
	}),
	},
	methods: {
	resizeHandler() {
	useInterfaceStore().setLayoutWidth(windowWidth())
	useInterfaceStore().setLayoutHeight(windowHeight())
	},
	scrollHandler() {
	const scrollPosition =
	this.scrollParent === window
	? window.scrollY
	: this.scrollParent.scrollTop

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

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

	// remove old theme reference if there are any
	if (oldTheme.length) {
	document.body.classList.replace(oldTheme[0], newTheme)
	} else {
	document.body.classList.add(newTheme)
	}
	} else {
	// remove theme reference if non-V3 theme is used
	document.body.classList.remove(...oldTheme)
	}
	},
	removeSplash() {
	document.querySelector('#status').textContent = this.$t(
	'splash.fun_' + Math.ceil(Math.random() * 4),
	)
	const splashscreenRoot = document.querySelector('#splash')
	splashscreenRoot.addEventListener('transitionend', () => {
	splashscreenRoot.remove()
	})
	setTimeout(() => {
	splashscreenRoot.remove() // forcibly remove it, should fix my plasma browser widget t. HJ
	}, 600)
	splashscreenRoot.classList.add('hidden')
	document.querySelector('#app').classList.remove('hidden')
	},
	},
	}
	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index 79ff631ca7..40eda50f5d 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,611 +1,606 @@
	/* 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 { config } from '@fortawesome/fontawesome-svg-core'
	import {
	FontAwesomeIcon,
	FontAwesomeLayers,
	} from '@fortawesome/vue-fontawesome'

	config.autoAddCss = false

	import App from '../App.vue'
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import FaviconService from '../services/favicon_service/favicon_service.js'
	import { applyConfig } 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 { useAnnouncementsStore } from 'src/stores/announcements'
	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 { useOAuthStore } from 'src/stores/oauth'

	import VBodyScrollLock from 'src/directives/body_scroll_lock'
	import {
	instanceDefaultConfig,
	staticOrApiConfigDefault,
	} 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.charCodeAt(0)))
	const text = new TextDecoder().decode(array)
	return text
	}

	const preloadFetch = async (request) => {
	const data = parsedInitialResults()
	if (!data \|\| !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

	- useInstanceStore().set({
	- name: 'featureSet.pleromaExtensionsAvailable',
	- value: data.pleroma,
	- })
	+ useInstanceCapabilitiesStore().set(
	+ 'pleromaExtensionsAvailable',
	+ data.pleroma,
	+ )
	useInstanceStore().set({
	name: 'textlimit',
	value: textlimit,
	})
	useInstanceStore().set({
	name: 'accountApprovalRequired',
	value: data.approval_required,
	})
	useInstanceStore().set({
	name: 'birthdayRequired',
	value: !!data.pleroma?.metadata.birthday_required,
	})
	useInstanceStore().set({
	name: 'birthdayMinAge',
	value: data.pleroma?.metadata.birthday_min_age \|\| 0,
	})

	if (vapidPublicKey) {
	useInstanceStore().set({
	name: '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.')
	console.warn(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 = Object.assign({}, apiConfig, staticConfig)
	} else {
	config = Object.assign({}, staticConfig, apiConfig)
	}

	const copyInstanceOption = ({ source, destination }) => {
	if (typeof config[source] !== 'undefined') {
	useInstanceStore().set({ path: destination, value: config[source] })
	}
	}

	Object.keys(staticOrApiConfigDefault)
	.map((k) => ({ source: k, destination: `instanceIdentity.${k}` }))
	.forEach(copyInstanceOption)
	Object.keys(instanceDefaultConfig)
	.map((k) => ({ source: k, destination: `prefsStorage.${k}` }))
	.forEach(copyInstanceOption)

	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({ name: '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 getAppSecret = async ({ store }) => {
	const oauth = useOAuthStore()
	if (oauth.userToken) {
	store.commit(
	'setBackendInteractor',
	backendInteractorService(oauth.getToken),
	)
	}
	}

	const resolveStaffAccounts = ({ store, accounts }) => {
	const nicknames = accounts.map((uri) => uri.split('/').pop())
	useInstanceStore().set({
	name: '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: 'name',
	value: metadata.nodeName,
	})
	useInstanceStore().set({
	path: 'registrationOpen',
	value: data.openRegistrations,
	})
	- useInstanceStore().set({
	- path: 'featureSet.mediaProxyAvailable',
	- value: features.includes('media_proxy'),
	- })
	- useInstanceStore().set({
	- path: 'featureSet.safeDM',
	- value: features.includes('safe_dm_mentions'),
	- })
	- useInstanceStore().set({
	- path: 'featureSet.shoutAvailable',
	- value: features.includes('chat'),
	- })
	- useInstanceStore().set({
	- path: 'featureSet.pleromaChatMessagesAvailable',
	- value: features.includes('pleroma_chat_messages'),
	- })
	- useInstanceStore().set({
	- path: 'featureSet.pleromaCustomEmojiReactionsAvailable',
	- value:
	- features.includes('pleroma_custom_emoji_reactions') \|\|
	+ 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'),
	- })
	- useInstanceStore().set({
	- path: 'featureSet.pleromaBookmarkFoldersAvailable',
	- value: features.includes('pleroma:bookmark_folders'),
	- })
	- useInstanceStore().set({
	- path: 'featureSet.gopherAvailable',
	- value: features.includes('gopher'),
	- })
	- useInstanceStore().set({
	- path: 'featureSet.pollsAvailable',
	- value: features.includes('polls'),
	- })
	- useInstanceStore().set({
	- path: 'featureSet.editingAvailable',
	- value: features.includes('editing'),
	- })
	- useInstanceStore().set({
	- path: 'featureSet.mailerEnabled',
	- value: metadata.mailerEnabled,
	- })
	- useInstanceStore().set({
	- path: 'featureSet.quotingAvailable',
	- value: features.includes('quote_posting'),
	- })
	- useInstanceStore().set({
	- path: 'featureSet.groupActorAvailable',
	- value: features.includes('pleroma:group_actors'),
	- })
	- useInstanceStore().set({
	- path: 'featureSet.blockExpiration',
	- value: features.includes('pleroma:block_expiration'),
	- })
	+ )
	+ 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 ?? [],
	})
	- useInstanceStore().set({
	- path: 'featureSet.localBubble',
	- value: (metadata.localBubbleInstances ?? []).length > 0,
	- })
	+ useInstanceCapabilitiesStore().set(
	+ 'localBubble',
	+ (metadata.localBubbleInstances ?? []).length > 0,
	+ )

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

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

	const suggestions = metadata.suggestions
	- useInstanceStore().set({
	- name: 'featureSet.suggestionsEnabled',
	- value: suggestions.enabled,
	- })
	- useInstanceStore().set({
	- name: 'featureSet.suggestionsWeb',
	- value: suggestions.web,
	- })
	+ useInstanceCapabilitiesStore().set(
	+ 'suggestionsEnabled',
	+ suggestions.enabled,
	+ )
	+ // this is unused, why?
	+ useInstanceCapabilitiesStore().set('suggestionsWeb', suggestions.web)

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

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

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

	const federation = metadata.federation

	- useInstanceStore().set({
	- name: 'featureSet.tagPolicyAvailable',
	- value:
	- typeof federation.mrf_policies === 'undefined'
	- ? false
	- : metadata.federation.mrf_policies.includes('TagPolicy'),
	- })
	+ useInstanceCapabilitiesStore().set(
	+ 'tagPolicyAvailable',
	+ typeof federation.mrf_policies === 'undefined'
	+ ? false
	+ : metadata.federation.mrf_policies.includes('TagPolicy'),
	+ )

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

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

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

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

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

	const checkOAuthToken = async ({ store }) => {
	const oauth = useOAuthStore()
	if (oauth.getUserToken) {
	return store.dispatch('loginUser', oauth.getUserToken)
	}
	return Promise.resolve()
	}

	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)

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

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

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

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

	FaviconService.initFaviconService()
	initServiceWorker(store)

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

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

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

	applyConfig(store.state.config, 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 }),
	]).catch((e) => Promise.reject(e))

	// Start fetching things that don't need to block the UI
	store.dispatch('fetchMutes')
	store.dispatch('loadDrafts')
	useAnnouncementsStore().startFetchingAnnouncements()
	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 false
	}
	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)

	// 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 c5876a3d4e..193daf4a72 100644
	--- a/src/boot/routes.js
	+++ b/src/boot/routes.js
	@@ -1,228 +1,229 @@
	import About from 'components/about/about.vue'
	import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
	import AuthForm from 'components/auth_form/auth_form.js'
	import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue'
	import BubbleTimeline from 'components/bubble_timeline/bubble_timeline.vue'
	import Chat from 'components/chat/chat.vue'
	import ChatList from 'components/chat_list/chat_list.vue'
	import ConversationPage from 'components/conversation-page/conversation-page.vue'
	import DMs from 'components/dm_timeline/dm_timeline.vue'
	import Drafts from 'components/drafts/drafts.vue'
	import FollowRequests from 'components/follow_requests/follow_requests.vue'
	import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
	import Interactions from 'components/interactions/interactions.vue'
	import Lists from 'components/lists/lists.vue'
	import ListsEdit from 'components/lists_edit/lists_edit.vue'
	import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
	import Notifications from 'components/notifications/notifications.vue'
	import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
	import PasswordReset from 'components/password_reset/password_reset.vue'
	import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
	import PublicTimeline from 'components/public_timeline/public_timeline.vue'
	import Registration from 'components/registration/registration.vue'
	import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
	import Search from 'components/search/search.vue'
	import ShoutPanel from 'components/shout_panel/shout_panel.vue'
	import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
	import UserProfile from 'components/user_profile/user_profile.vue'
	import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'

	import NavPanel from 'src/components/nav_panel/nav_panel.vue'
	import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_folder_edit.vue'
	import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
	import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'

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

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

	let routes = [
	{
	name: 'root',
	path: '/',
	redirect: () => {
	return (
	(store.state.users.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: '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: UserProfile,
	},
	{
	name: 'interactions',
	path: '/users/:username/interactions',
	component: Interactions,
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'dms',
	path: '/users/:username/dms',
	component: DMs,
	beforeEnter: validateAuthenticatedRoute,
	},
	{ name: 'registration', path: '/registration', component: Registration },
	{
	name: 'password-reset',
	path: '/password-reset',
	component: PasswordReset,
	props: true,
	},
	{
	name: 'registration-token',
	path: '/registration/:token',
	component: Registration,
	},
	{
	name: 'friend-requests',
	path: '/friend-requests',
	component: FollowRequests,
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'notifications',
	path: '/:username/notifications',
	component: Notifications,
	props: () => ({ disableTeleport: true }),
	beforeEnter: validateAuthenticatedRoute,
	},
	{ name: 'login', path: '/login', component: AuthForm },
	{
	name: 'shout-panel',
	path: '/shout-panel',
	component: ShoutPanel,
	props: () => ({ floating: false }),
	},
	{
	name: 'oauth-callback',
	path: '/oauth-callback',
	component: OAuthCallback,
	props: (route) => ({ code: route.query.code }),
	},
	{
	name: 'search',
	path: '/search',
	component: Search,
	props: (route) => ({ query: route.query.query }),
	},
	{
	name: 'who-to-follow',
	path: '/who-to-follow',
	component: WhoToFollow,
	beforeEnter: validateAuthenticatedRoute,
	},
	{ name: 'about', path: '/about', component: About },
	{
	name: 'announcements',
	path: '/announcements',
	component: AnnouncementsPage,
	},
	{ name: 'drafts', path: '/drafts', component: Drafts },
	{ name: 'user-profile', path: '/users/:name', component: UserProfile },
	{ name: 'legacy-user-profile', path: '/:name', component: UserProfile },
	{ name: 'lists', path: '/lists', component: Lists },
	{ name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
	{ name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
	{ name: 'lists-new', path: '/lists/new', component: ListsEdit },
	{
	name: 'edit-navigation',
	path: '/nav-edit',
	component: NavPanel,
	props: () => ({ forceExpand: true, forceEditMode: true }),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'bookmark-folders',
	path: '/bookmark_folders',
	component: BookmarkFolders,
	},
	{
	name: 'bookmark-folder-new',
	path: '/bookmarks/new-folder',
	component: BookmarkFolderEdit,
	},
	{
	name: 'bookmark-folder',
	path: '/bookmarks/:id',
	component: BookmarkTimeline,
	},
	{
	name: 'bookmark-folder-edit',
	path: '/bookmarks/:id/edit',
	component: BookmarkFolderEdit,
	},
	]

	- if (useInstanceStore().featureSet.pleromaChatMessagesAvailable) {
	+ if (useInstanceCapabilitiesStore().pleromaChatMessagesAvailable) {
	routes = routes.concat([
	{
	name: 'chat',
	path: '/users/:username/chats/:recipient_id',
	component: Chat,
	meta: { dontScroll: false },
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'chats',
	path: '/users/:username/chats',
	component: ChatList,
	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 1910d3544b..8fce4b5af2 100644
	--- a/src/components/account_actions/account_actions.js
	+++ b/src/components/account_actions/account_actions.js
	@@ -1,105 +1,104 @@
	import { mapState } from 'pinia'

	import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
	import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
	import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import Popover from '../popover/popover.vue'
	import ProgressButton from '../progress_button/progress_button.vue'

	-import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useReportsStore } from 'src/stores/reports'

	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,
	UserTimedFilterModal,
	},
	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,
	recipient_id: this.user.id,
	},
	})
	},
	},
	computed: {
	shouldConfirmBlock() {
	return this.$store.getters.mergedConfig.modalOnBlock
	},
	shouldConfirmRemoveUserFromFollowers() {
	return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
	},
	- ...mapState(useInstanceStore, {
	- blockExpirationSupported: (store) => store.featureSet.blockExpiration,
	- pleromaChatMessagesAvailable: (store) =>
	- store.featureSet.pleromaChatMessagesAvailable,
	- }),
	+ ...mapState(useInstanceCapabilitiesStore, [
	+ 'blockExpiration',
	+ 'pleromaChatMessagesAvailable',
	+ ]),
	},
	}

	export default AccountActions
	diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
	index cc00a735d6..94cb91ee0e 100644
	--- a/src/components/account_actions/account_actions.vue
	+++ b/src/components/account_actions/account_actions.vue
	@@ -1,161 +1,161 @@
	<template>
	<div class="AccountActions">
	<Popover
	trigger="click"
	placement="bottom"
	remove-padding
	>
	<template #content>
	<div class="dropdown-menu">
	<template v-if="relationship.following">
	<div
	v-if="relationship.showing_reblogs"
	class="menu-item dropdown-item"
	>
	<button
	class="main-button"
	@click="hideRepeats"
	>
	{{ $t('user_card.hide_repeats') }}
	</button>
	</div>
	<div
	v-if="!relationship.showing_reblogs"
	class="menu-item dropdown-item"
	>
	<button
	class="main-button"
	@click="showRepeats"
	>
	{{ $t('user_card.show_repeats') }}
	</button>
	</div>
	<div
	role="separator"
	class="dropdown-divider"
	/>
	</template>
	<UserListMenu :user="user" />
	<div
	v-if="relationship.followed_by"
	class="menu-item dropdown-item"
	>
	<button
	class="main-button"
	@click="removeUserFromFollowers"
	>
	{{ $t('user_card.remove_follower') }}
	</button>
	</div>
	<div class="menu-item dropdown-item">
	<button
	v-if="relationship.blocking"
	class="main-button"
	@click="unblockUser"
	>
	{{ $t('user_card.unblock') }}
	</button>
	<button
	v-else
	class="main-button"
	@click="blockUser"
	>
	{{ $t('user_card.block') }}
	</button>
	</div>
	<div class="menu-item dropdown-item">
	<button
	class="main-button"
	@click="reportUser"
	>
	{{ $t('user_card.report') }}
	</button>
	</div>
	<div
	v-if="pleromaChatMessagesAvailable"
	class="menu-item dropdown-item"
	>
	<button
	class="main-button"
	@click="openChat"
	>
	{{ $t('user_card.message') }}
	</button>
	</div>
	</div>
	</template>
	<template #trigger>
	<button class="button-unstyled ellipsis-button">
	<FAIcon
	class="icon"
	icon="ellipsis-v"
	/>
	</button>
	</template>
	</Popover>
	<teleport to="#modal">
	<confirm-modal
	- v-if="showingConfirmBlock && !blockExpirationSupported"
	+ v-if="showingConfirmBlock && !blockExpiration"
	ref="blockDialog"
	:title="$t('user_card.block_confirm_title')"
	:confirm-text="$t('user_card.block_confirm_accept_button')"
	:cancel-text="$t('user_card.block_confirm_cancel_button')"
	@accepted="doBlockUser"
	@cancelled="hideConfirmBlock"
	>
	<i18n-t
	keypath="user_card.block_confirm"
	tag="span"
	scope="global"
	>
	<template #user>
	<span
	v-text="user.screen_name_ui"
	/>
	</template>
	</i18n-t>
	</confirm-modal>
	</teleport>
	<teleport to="#modal">
	<confirm-modal
	v-if="showingConfirmRemoveFollower"
	:title="$t('user_card.remove_follower_confirm_title')"
	:confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
	:cancel-text="$t('user_card.remove_follower_confirm_cancel_button')"
	@accepted="doRemoveUserFromFollowers"
	@cancelled="hideConfirmRemoveUserFromFollowers"
	>
	<i18n-t
	keypath="user_card.remove_follower_confirm"
	tag="span"
	scope="global"
	>
	<template #user>
	<span
	v-text="user.screen_name_ui"
	/>
	</template>
	</i18n-t>
	</confirm-modal>
	<UserTimedFilterModal
	- v-if="blockExpirationSupported"
	+ v-if="blockExpiration"
	ref="timedBlockDialog"
	:is-mute="false"
	:user="user"
	/>
	</teleport>
	</div>
	</template>

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

	<style lang="scss">
	.AccountActions {
	.ellipsis-button {
	width: 2.5em;
	margin: -0.5em 0;
	padding: 0.5em 0;
	text-align: center;
	}
	}
	</style>
	diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
	index d1884ba5c9..db5171c80d 100644
	--- a/src/components/attachment/attachment.js
	+++ b/src/components/attachment/attachment.js
	@@ -1,222 +1,223 @@
	import { mapGetters } from 'vuex'

	import nsfwImage from '../../assets/nsfw.png'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import Flash from '../flash/flash.vue'
	import StillImage from '../still-image/still-image.vue'
	import VideoAttachment from '../video_attachment/video_attachment.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useMediaViewerStore } from 'src/stores/media_viewer'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faAlignRight,
	faFile,
	faImage,
	faMusic,
	faPencilAlt,
	faPlayCircle,
	faSearchPlus,
	faStop,
	faTimes,
	faTrashAlt,
	faVideo,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faFile,
	faMusic,
	faImage,
	faVideo,
	faPlayCircle,
	faTimes,
	faStop,
	faSearchPlus,
	faTrashAlt,
	faPencilAlt,
	faAlignRight,
	)

	const Attachment = {
	props: [
	'attachment',
	'compact',
	'description',
	'hideDescription',
	'nsfw',
	'size',
	'setMedia',
	'remove',
	'shiftUp',
	'shiftDn',
	'edit',
	],
	data() {
	return {
	localDescription: this.description \|\| this.attachment.description,
	nsfwImage:
	useInstanceStore().instanceIdentity.nsfwCensorImage \|\| nsfwImage,
	hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
	preloadImage: this.$store.getters.mergedConfig.preloadImage,
	loading: false,
	img:
	fileTypeService.fileType(this.attachment.mimetype) === 'image' &&
	document.createElement('img'),
	modalOpen: false,
	showHidden: false,
	flashLoaded: false,
	showDescription: false,
	}
	},
	components: {
	Flash,
	StillImage,
	VideoAttachment,
	},
	computed: {
	classNames() {
	return [
	{
	'-loading': this.loading,
	'-nsfw-placeholder': this.hidden,
	'-editable': this.edit !== undefined,
	'-compact': this.compact,
	},
	'-type-' + this.type,
	this.size && '-size-' + this.size,
	`-${this.useContainFit ? 'contain' : 'cover'}-fit`,
	]
	},
	usePlaceholder() {
	return this.size === 'hide'
	},
	useContainFit() {
	return this.$store.getters.mergedConfig.useContainFit
	},
	placeholderName() {
	if (this.attachment.description === '' \|\| !this.attachment.description) {
	return this.type.toUpperCase()
	}
	return this.attachment.description
	},
	placeholderIconClass() {
	if (this.type === 'image') return 'image'
	if (this.type === 'video') return 'video'
	if (this.type === 'audio') return 'music'
	return 'file'
	},
	referrerpolicy() {
	- return useInstanceStore().featureSet.mediaProxyAvailable
	+ return useInstanceCapabilitiesStore().mediaProxyAvailable
	? ''
	: 'no-referrer'
	},
	type() {
	return fileTypeService.fileType(this.attachment.mimetype)
	},
	hidden() {
	return this.nsfw && this.hideNsfwLocal && !this.showHidden
	},
	isEmpty() {
	return this.type === 'html' && !this.attachment.oembed
	},
	useModal() {
	let modalTypes = []
	switch (this.size) {
	case 'hide':
	case 'small':
	modalTypes = ['image', 'video', 'audio', 'flash']
	break
	default:
	modalTypes = this.mergedConfig.playVideosInModal
	? ['image', 'video', 'flash']
	: ['image']
	break
	}
	return modalTypes.includes(this.type)
	},
	videoTag() {
	return this.useModal ? 'button' : 'span'
	},
	...mapGetters(['mergedConfig']),
	},
	watch: {
	'attachment.description'(newVal) {
	this.localDescription = newVal
	},
	localDescription(newVal) {
	this.onEdit(newVal)
	},
	},
	methods: {
	linkClicked({ target }) {
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	openModal() {
	if (this.useModal) {
	this.$emit('setMedia')
	useMediaViewerStore().setCurrentMedia(this.attachment)
	} else if (this.type === 'unknown') {
	window.open(this.attachment.url)
	}
	},
	openModalForce() {
	this.$emit('setMedia')
	useMediaViewerStore().setCurrentMedia(this.attachment)
	},
	onEdit(event) {
	this.edit && this.edit(this.attachment, event)
	},
	onRemove() {
	this.remove && this.remove(this.attachment)
	},
	onShiftUp() {
	this.shiftUp && this.shiftUp(this.attachment)
	},
	onShiftDn() {
	this.shiftDn && this.shiftDn(this.attachment)
	},
	stopFlash() {
	this.$refs.flash.closePlayer()
	},
	setFlashLoaded(event) {
	this.flashLoaded = event
	},
	toggleDescription() {
	this.showDescription = !this.showDescription
	},
	toggleHidden(event) {
	if (
	this.mergedConfig.useOneClickNsfw &&
	!this.showHidden &&
	(this.type !== 'video' \|\| this.mergedConfig.playVideosInModal)
	) {
	this.openModal(event)
	return
	}
	if (this.img && !this.preloadImage) {
	if (this.img.onload) {
	this.img.onload()
	} else {
	this.loading = true
	this.img.src = this.attachment.url
	this.img.onload = () => {
	this.loading = false
	this.showHidden = !this.showHidden
	}
	}
	} else {
	this.showHidden = !this.showHidden
	}
	},
	onImageLoad(image) {
	const width = image.naturalWidth
	const height = image.naturalHeight
	this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
	},
	},
	}

	export default Attachment
	diff --git a/src/components/block_card/block_card.js b/src/components/block_card/block_card.js
	index 8101394dd8..967ce2a3cd 100644
	--- a/src/components/block_card/block_card.js
	+++ b/src/components/block_card/block_card.js
	@@ -1,50 +1,50 @@
	import { mapState } from 'pinia'

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

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

	const BlockCard = {
	props: ['userId'],
	computed: {
	user() {
	return this.$store.getters.findUser(this.userId)
	},
	relationship() {
	return this.$store.getters.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(useInstanceStore, {
	- blockExpirationSupported: (store) => store.featureSet.blockExpiration,
	- }),
	+ ...mapState(useInstanceCapabilitiesStore, ['blockExpiration']),
	},
	components: {
	BasicUserCard,
	+ UserTimedFilterModal,
	},
	methods: {
	unblockUser() {
	this.$store.dispatch('unblockUser', this.user.id)
	},
	blockUser() {
	- if (this.blockExpirationSupported) {
	+ if (this.blockExpiration) {
	this.$refs.timedBlockDialog.optionallyPrompt()
	} else {
	this.$store.dispatch('blockUser', { id: this.user.id })
	}
	},
	},
	}

	export default BlockCard
	diff --git a/src/components/lists_menu/lists_menu_content.js b/src/components/lists_menu/lists_menu_content.js
	index 49b413b4fb..4dae0bff48 100644
	--- a/src/components/lists_menu/lists_menu_content.js
	+++ b/src/components/lists_menu/lists_menu_content.js
	@@ -1,26 +1,26 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

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

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useListsStore } from 'src/stores/lists.js'

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

	export default ListsMenuContent
	diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
	index 6628e02f86..4149fd6d02 100644
	--- a/src/components/moderation_tools/moderation_tools.js
	+++ b/src/components/moderation_tools/moderation_tools.js
	@@ -1,150 +1,151 @@
	import DialogModal from '../dialog_modal/dialog_modal.vue'
	import Popover from '../popover/popover.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.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 ModerationTools = {
	props: ['user'],
	data() {
	return {
	tags: {
	FORCE_NSFW,
	STRIP_MEDIA,
	FORCE_UNLISTED,
	DISABLE_REMOTE_SUBSCRIPTION,
	DISABLE_ANY_SUBSCRIPTION,
	SANDBOX,
	QUARANTINE,
	},
	showDeleteUserDialog: false,
	toggled: false,
	}
	},
	components: {
	DialogModal,
	Popover,
	},
	computed: {
	tagsSet() {
	return new Set(this.user.tags)
	},
	canGrantRole() {
	return (
	this.user.is_local &&
	!this.user.deactivated &&
	this.$store.state.users.currentUser.role === 'admin'
	)
	},
	canChangeActivationState() {
	return this.privileged('users_manage_activation_state')
	},
	canDeleteAccount() {
	return this.privileged('users_delete')
	},
	canUseTagPolicy() {
	return (
	- useInstanceStore().featureSet.tagPolicyAvailable &&
	+ useInstanceCapabilitiesStore().tagPolicyAvailable &&
	this.privileged('users_manage_tags')
	)
	},
	},
	methods: {
	hasTag(tagName) {
	return this.tagsSet.has(tagName)
	},
	privileged(privilege) {
	return this.$store.state.users.currentUser.privileges.includes(privilege)
	},
	toggleTag(tag) {
	const store = this.$store
	if (this.tagsSet.has(tag)) {
	store.state.api.backendInteractor
	.untagUser({ user: this.user, tag })
	.then((response) => {
	if (!response.ok) {
	return
	}
	store.commit('untagUser', { user: this.user, tag })
	})
	} else {
	store.state.api.backendInteractor
	.tagUser({ user: this.user, tag })
	.then((response) => {
	if (!response.ok) {
	return
	}
	store.commit('tagUser', { user: this.user, tag })
	})
	}
	},
	toggleRight(right) {
	const store = this.$store
	if (this.user.rights[right]) {
	store.state.api.backendInteractor
	.deleteRight({ user: this.user, right })
	.then((response) => {
	if (!response.ok) {
	return
	}
	store.commit('updateRight', {
	user: this.user,
	right,
	value: false,
	})
	})
	} else {
	store.state.api.backendInteractor
	.addRight({ user: this.user, right })
	.then((response) => {
	if (!response.ok) {
	return
	}
	store.commit('updateRight', { user: this.user, right, value: true })
	})
	}
	},
	toggleActivationStatus() {
	this.$store.dispatch('toggleActivationStatus', { user: this.user })
	},
	deleteUserDialog(show) {
	this.showDeleteUserDialog = show
	},
	deleteUser() {
	const store = this.$store
	const user = this.user
	const { id, name } = user
	store.state.api.backendInteractor.deleteUser({ user }).then(() => {
	this.$store.dispatch(
	'markStatusesAsDeleted',
	(status) => user.id === status.user.id,
	)
	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()
	}
	})
	},
	setToggled(value) {
	this.toggled = value
	},
	},
	}

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

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

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

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

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

	export default NavPanel
	diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
	index 10903bcae7..ae5c6eae4d 100644
	--- a/src/components/nav_panel/nav_panel.vue
	+++ b/src/components/nav_panel/nav_panel.vue
	@@ -1,168 +1,168 @@
	<template>
	<div class="NavPanel">
	<div class="panel panel-default">
	<div
	v-if="!forceExpand"
	class="panel-heading nav-panel-heading"
	>
	<NavigationPins :limit="6" />
	<div class="spacer" />
	<button
	class="button-unstyled"
	@click="toggleCollapse"
	>
	<FAIcon
	class="navigation-chevron"
	fixed-width
	:icon="collapsed ? 'chevron-down' : 'chevron-up'"
	/>
	</button>
	</div>
	<ul
	v-if="!collapsed \|\| forceExpand"
	class="panel-body"
	>
	<NavigationEntry
	v-if="currentUser \|\| !privateMode"
	:show-pin="false"
	:item="{ icon: 'stream', label: 'nav.timelines' }"
	:aria-expanded="showTimelines ? 'true' : 'false'"
	@click="toggleTimelines"
	>
	<FAIcon
	class="timelines-chevron"
	fixed-width
	:icon="showTimelines ? 'chevron-up' : 'chevron-down'"
	/>
	</NavigationEntry>
	<div
	v-show="showTimelines"
	class="timelines-background menu-item-collapsible"
	:class="{ '-expanded': showTimelines }"
	>
	<div class="timelines">
	<NavigationEntry
	v-for="item in timelinesItems"
	:key="item.name"
	:show-pin="editMode \|\| forceEditMode"
	:item="item"
	/>
	</div>
	</div>
	<NavigationEntry
	v-if="currentUser"
	:show-pin="false"
	:item="{ icon: 'list', label: 'nav.lists' }"
	:aria-expanded="showLists ? 'true' : 'false'"
	@click="toggleLists"
	>
	<router-link
	:title="$t('lists.manage_lists')"
	class="button-unstyled extra-button"
	:to="{ name: 'lists' }"
	@click.stop
	>
	<FAIcon
	fixed-width
	icon="wrench"
	/>
	</router-link>
	<FAIcon
	class="timelines-chevron"
	fixed-width
	:icon="showLists ? 'chevron-up' : 'chevron-down'"
	/>
	</NavigationEntry>
	<div
	v-show="showLists"
	class="timelines-background menu-item-collapsible"
	:class="{ '-expanded': showLists }"
	>
	<ListsMenuContent
	:show-pin="editMode \|\| forceEditMode"
	class="timelines"
	/>
	</div>
	<NavigationEntry
	- v-if="currentUser && bookmarkFolders"
	+ v-if="currentUser && pleromaBookmarkFoldersAvailable"
	:show-pin="false"
	:item="{ icon: 'bookmark', label: 'nav.bookmarks' }"
	:aria-expanded="showBookmarkFolders ? 'true' : 'false'"
	@click="toggleBookmarkFolders"
	>
	<router-link
	:title="$t('bookmarks.manage_bookmark_folders')"
	class="button-unstyled extra-button"
	:to="{ name: 'bookmark-folders' }"
	@click.stop
	>
	<FAIcon
	fixed-width
	icon="wrench"
	/>
	</router-link>
	<FAIcon
	class="timelines-chevron"
	fixed-width
	:icon="showBookmarkFolders ? 'chevron-up' : 'chevron-down'"
	/>
	</NavigationEntry>
	<div
	v-show="showBookmarkFolders"
	class="timelines-background menu-item-collapsible"
	:class="{ '-expanded': showBookmarkFolders }"
	>
	<BookmarkFoldersMenuContent
	:show-pin="editMode \|\| forceEditMode"
	class="timelines"
	/>
	</div>
	<NavigationEntry
	v-for="item in rootItems"
	:key="item.name"
	:show-pin="editMode \|\| forceEditMode"
	:item="item"
	/>
	<NavigationEntry
	v-if="!forceEditMode && currentUser"
	:show-pin="false"
	:item="{ labelRaw: editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned'), icon: editMode ? 'check' : 'wrench' }"
	@click="toggleEditMode"
	/>
	</ul>
	</div>
	</div>
	</template>

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

	<style lang="scss">
	.NavPanel {
	.panel {
	overflow: hidden;
	box-shadow: var(--shadow);
	}

	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	.navigation-chevron {
	margin-left: 0.8em;
	margin-right: 0.8em;
	font-size: 1.1em;
	}

	.timelines-background {
	padding: 0 0 0 0.6em;
	}

	.nav-panel-heading {
	// breaks without a unit
	// stylelint-disable-next-line length-zero-no-unit
	--panel-heading-height-padding: 0px;
	}
	}
	</style>
	diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
	index 73b6cdb2c5..0115f370f2 100644
	--- a/src/components/navigation/navigation_pins.js
	+++ b/src/components/navigation/navigation_pins.js
	@@ -1,132 +1,130 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

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

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

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

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

	const NavPanel = {
	props: ['limit'],
	methods: {
	getRouteTo(item) {
	return routeTo(item, this.currentUser)
	},
	},
	components: {
	StillImage,
	},
	computed: {
	getters() {
	return this.$store.getters
	},
	...mapPiniaState(useListsStore, {
	lists: getListEntries,
	}),
	...mapPiniaState(useAnnouncementsStore, {
	supportsAnnouncements: (store) => store.supportsAnnouncements,
	}),
	...mapPiniaState(useBookmarkFoldersStore, {
	bookmarks: getBookmarkFolderEntries,
	}),
	...mapPiniaState(useServerSideStorageStore, {
	pinnedItems: (store) =>
	new Set(store.prefsStorage.collections.pinnedNavItems),
	}),
	- ...mapPiniaState(useInstanceStore, {
	- pleromaChatMessagesAvailable: (store) =>
	- store.featureSet.pleromaChatMessagesAvailable,
	- bubbleTimeline: (store) => store.featureSet.localBubble,
	- }),
	...mapPiniaState(useInstanceStore, ['private', 'federating']),
	+ ...mapPiniaState(useInstanceCapabilitiesStore, [
	+ 'pleromaChatMessagesAvailable',
	+ 'localBubble',
	+ ]),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	followRequestCount: (state) => state.api.followRequests.length,
	}),
	pinnedList() {
	if (!this.currentUser) {
	return filterNavigation(
	[
	{ ...TIMELINES.public, name: 'public' },
	{ ...TIMELINES.twkn, name: 'twkn' },
	{ ...ROOT_ITEMS.about, name: 'about' },
	],
	{
	hasChats: this.pleromaChatMessagesAvailable,
	hasAnnouncements: this.supportsAnnouncements,
	isFederating: this.federating,
	isPrivate: this.private,
	currentUser: this.currentUser,
	- supportsBubbleTimeline: this.bubbleTimeline,
	+ supportsBubbleTimeline: this.localBubble,
	supportsBookmarkFolders: this.bookmarks,
	},
	)
	}
	- console.log([...this.pinnedItems])
	- console.log([...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.bubbleTimeline,
	+ supportsBubbleTimeline: this.localBubble,
	supportsBookmarkFolders: this.bookmarks,
	isFederating: this.federating,
	isPrivate: this.private,
	currentUser: this.currentUser,
	},
	).slice(0, this.limit)
	},
	},
	}

	export default NavPanel
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index 7b95124561..802d340aba 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,933 +1,934 @@
	import { debounce, map, reject, uniqBy } from 'lodash'
	import { mapActions, mapState } from 'pinia'
	import { mapGetters } from 'vuex'

	import DraftCloser from 'src/components/draft_closer/draft_closer.vue'
	import Gallery from 'src/components/gallery/gallery.vue'
	import Popover from 'src/components/popover/popover.vue'
	import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
	import fileTypeService from '../../services/file_type/file_type.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 Attachment from '../attachment/attachment.vue'
	import Checkbox from '../checkbox/checkbox.vue'
	import EmojiInput from '../emoji_input/emoji_input.vue'
	import suggestor from '../emoji_input/suggestor.js'
	import MediaUpload from '../media_upload/media_upload.vue'
	import PollForm from '../poll/poll_form.vue'
	import ScopeSelector from '../scope_selector/scope_selector.vue'
	import Select from '../select/select.vue'
	import StatusContent from '../status_content/status_content.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.js'
	import { useMediaViewerStore } from 'src/stores/media_viewer.js'

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

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

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

	const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
	let allAttentions = [...attentions]

	allAttentions.unshift(user)

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

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

	return mentions.length > 0 ? mentions.join(' ') + ' ' : ''
	}

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

	const typeAndRefId = ({ replyTo, profileMention, statusId }) => {
	if (replyTo) {
	return ['reply', replyTo]
	} else if (profileMention) {
	return ['mention', profileMention]
	} else if (statusId) {
	return ['edit', statusId]
	} else {
	return ['new', '']
	}
	}

	const PostStatusForm = {
	props: [
	'statusId',
	'statusText',
	'statusIsSensitive',
	'statusPoll',
	'statusFiles',
	'statusMediaDescriptions',
	'statusScope',
	'statusContentType',
	'replyTo',
	'repliedUser',
	'attentions',
	'copyMessageScope',
	'subject',
	'disableSubject',
	'disableScopeSelector',
	'disableVisibilitySelector',
	'disableNotice',
	'disableLockWarning',
	'disablePolls',
	'disableSensitivityCheckbox',
	'disableSubmit',
	'disablePreview',
	'disableDraft',
	'hideDraft',
	'closeable',
	'placeholder',
	'maxHeight',
	'postHandler',
	'preserveFocus',
	'autoFocus',
	'fileLimit',
	'submitOnEnter',
	'emojiPickerPlacement',
	'optimisticPosting',
	'profileMention',
	'draftId',
	],
	emits: [
	'posted',
	'draft-done',
	'resize',
	'mediaplay',
	'mediapause',
	'can-close',
	'update',
	],
	components: {
	MediaUpload,
	EmojiInput,
	PollForm,
	ScopeSelector,
	Checkbox,
	Select,
	Attachment,
	StatusContent,
	Gallery,
	DraftCloser,
	Popover,
	},
	mounted() {
	this.updateIdempotencyKey()
	this.resize(this.$refs.textarea)

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

	if (this.replyTo \|\| this.autoFocus) {
	this.$refs.textarea.focus()
	}
	},
	data() {
	const preset = this.$route.query.message
	let statusText = preset \|\| ''

	const { scopeCopy } = this.$store.getters.mergedConfig

	const [statusType, refId] = typeAndRefId({
	replyTo: this.replyTo,
	profileMention: this.profileMention && this.repliedUser?.id,
	statusId: this.statusId,
	})

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

	if (!statusParams) {
	if (statusType === 'reply' \|\| statusType === 'mention') {
	const currentUser = this.$store.state.users.currentUser
	statusText = buildMentionsString(
	{ user: this.repliedUser, attentions: this.attentions },
	currentUser,
	)
	}

	const scope =
	(this.copyMessageScope && scopeCopy) \|\|
	this.copyMessageScope === 'direct'
	? this.copyMessageScope
	: this.$store.state.users.currentUser.default_scope

	const { postContentType: contentType, sensitiveByDefault } =
	this.$store.getters.mergedConfig

	statusParams = {
	type: statusType,
	refId,
	spoilerText: this.subject \|\| '',
	status: statusText,
	nsfw: !!sensitiveByDefault,
	files: [],
	poll: {},
	hasPoll: false,
	mediaDescriptions: {},
	visibility: scope,
	contentType,
	quoting: false,
	}

	if (statusType === 'edit') {
	const statusContentType = this.statusContentType \|\| contentType
	statusParams = {
	type: statusType,
	refId,
	spoilerText: this.subject \|\| '',
	status: this.statusText \|\| '',
	nsfw: this.statusIsSensitive \|\| !!sensitiveByDefault,
	files: this.statusFiles \|\| [],
	poll: this.statusPoll \|\| {},
	hasPoll: false,
	mediaDescriptions: this.statusMediaDescriptions \|\| {},
	visibility: this.statusScope \|\| scope,
	contentType: statusContentType,
	}
	}
	}

	return {
	randomSeed: genRandomSeed(),
	dropFiles: [],
	uploadingFiles: false,
	error: null,
	posting: false,
	highlighted: 0,
	newStatus: statusParams,
	caret: 0,
	showDropIcon: 'hide',
	dropStopTimeout: null,
	preview: null,
	previewLoading: false,
	emojiInputShown: false,
	idempotencyKey: '',
	saveInhibited: true,
	saveable: false,
	}
	},
	computed: {
	users() {
	return this.$store.state.users.users
	},
	userDefaultScope() {
	return this.$store.state.users.currentUser.default_scope
	},
	showAllScopes() {
	return !this.mergedConfig.minimalScopesMode
	},
	hideExtraActions() {
	return this.disableDraft \|\| this.hideDraft
	},
	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 \|\| []
	},
	statusLength() {
	return this.newStatus.status.length
	},
	spoilerTextLength() {
	return this.newStatus.spoilerText.length
	},
	statusLengthLimit() {
	return useInstanceStore().textlimit
	},
	hasStatusLengthLimit() {
	return this.statusLengthLimit > 0
	},
	charactersLeft() {
	return (
	this.statusLengthLimit - (this.statusLength + this.spoilerTextLength)
	)
	},
	isOverLengthLimit() {
	return this.hasStatusLengthLimit && this.charactersLeft < 0
	},
	minimalScopesMode() {
	return useInstanceStore().minimalScopesMode
	},
	alwaysShowSubject() {
	return this.mergedConfig.alwaysShowSubjectInput
	},
	postFormats() {
	- return useInstanceStore().featureSet.postFormats \|\| []
	+ return useInstanceCapabilitiesStore().postFormats \|\| []
	},
	safeDMEnabled() {
	- return useInstanceStore().featureSet.safeDM
	+ return useInstanceCapabilitiesStore().safeDM
	},
	pollsAvailable() {
	return (
	- useInstanceStore().featureSet.pollsAvailable &&
	+ useInstanceCapabilitiesStore().pollsAvailable &&
	useInstanceStore().limits.pollLimits.max_options >= 2 &&
	this.disablePolls !== true
	)
	},
	hideScopeNotice() {
	return (
	this.disableNotice \|\| this.$store.getters.mergedConfig.hideScopeNotice
	)
	},
	pollContentError() {
	return (
	this.pollFormVisible && this.newStatus.poll && this.newStatus.poll.error
	)
	},
	showPreview() {
	return !this.disablePreview && (!!this.preview \|\| this.previewLoading)
	},
	emptyStatus() {
	return (
	this.newStatus.status.trim() === '' && this.newStatus.files.length === 0
	)
	},
	uploadFileLimitReached() {
	return this.newStatus.files.length >= this.fileLimit
	},
	isEdit() {
	return typeof this.statusId !== 'undefined' && this.statusId.trim() !== ''
	},
	quotable() {
	- if (!useInstanceStore().featureSet.quotingAvailable) {
	+ if (!useInstanceCapabilitiesStore().quotingAvailable) {
	return false
	}

	if (!this.replyTo) {
	return false
	}

	const repliedStatus =
	this.$store.state.statuses.allStatusesObject[this.replyTo]
	if (!repliedStatus) {
	return false
	}

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

	return false
	},
	debouncedMaybeAutoSaveDraft() {
	return debounce(this.maybeAutoSaveDraft, 3000)
	},
	pollFormVisible() {
	return this.newStatus.hasPoll
	},
	shouldAutoSaveDraft() {
	return this.$store.getters.mergedConfig.autoSaveDraft
	},
	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.newStatus.hasPoll) &&
	this.saveable
	)
	},
	hasEmptyDraft() {
	return (
	this.newStatus.id &&
	!(
	this.newStatus.status \|\|
	this.newStatus.spoilerText \|\|
	this.newStatus.files?.length \|\|
	this.newStatus.hasPoll
	)
	)
	},
	...mapGetters(['mergedConfig']),
	...mapState(useInterfaceStore, {
	mobileLayout: (store) => store.mobileLayout,
	}),
	},
	watch: {
	newStatus: {
	deep: true,
	handler() {
	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()
	}
	},
	},
	beforeUnmount() {
	this.maybeAutoSaveDraft()
	this.removeBeforeUnloadListener()
	},
	methods: {
	...mapActions(useMediaViewerStore, ['increment']),
	statusChanged() {
	this.autoPreview()
	this.updateIdempotencyKey()
	this.debouncedMaybeAutoSaveDraft()
	this.saveable = true
	this.saveInhibited = false
	},
	clearStatus() {
	const newStatus = this.newStatus
	this.saveInhibited = true
	this.newStatus = {
	status: '',
	spoilerText: '',
	files: [],
	visibility: newStatus.visibility,
	contentType: newStatus.contentType,
	poll: {},
	hasPoll: false,
	mediaDescriptions: {},
	quoting: false,
	}
	this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
	this.clearPollForm()
	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, newStatus) {
	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.emptyStatus \|\| this.isOverLengthLimit)
	) {
	return
	}

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

	const poll = this.newStatus.hasPoll
	? pollFormToMasto(this.newStatus.poll)
	: {}
	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 replyOrQuoteAttr = newStatus.quoting
	? 'quoteId'
	: 'inReplyToStatusId'

	const postingOptions = {
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: newStatus.files,
	store: this.$store,
	[replyOrQuoteAttr]: this.replyTo,
	contentType: newStatus.contentType,
	poll,
	idempotencyKey: this.idempotencyKey,
	}

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

	postHandler(postingOptions).then((data) => {
	if (!data.error) {
	this.abandonDraft()
	this.clearStatus()
	this.$emit('posted', data)
	} else {
	this.error = data.error
	}
	this.posting = false
	})
	},
	previewStatus() {
	if (this.emptyStatus && this.newStatus.spoilerText.trim() === '') {
	this.preview = { error: this.$t('post_status.preview_empty') }
	this.previewLoading = false
	return
	}
	const newStatus = this.newStatus
	this.previewLoading = true
	const replyOrQuoteAttr = newStatus.quoting
	? 'quoteId'
	: 'inReplyToStatusId'
	statusPoster
	.postStatus({
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: [],
	store: this.$store,
	[replyOrQuoteAttr]: this.replyTo,
	contentType: newStatus.contentType,
	poll: {},
	preview: true,
	})
	.then((data) => {
	// Don't apply preview if not loading, because it means
	// user has closed the preview manually.
	if (!this.previewLoading) return
	if (!data.error) {
	this.preview = data
	} else {
	this.preview = { error: data.error }
	}
	})
	.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()
	}
	},
	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)
	files.splice(index, 1)
	files.splice(index - 1, 0, fileInfo)
	},
	shiftDnMediaFile(fileInfo) {
	const { files } = this.newStatus
	const index = this.newStatus.files.indexOf(fileInfo)
	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
	},
	type(fileInfo) {
	return fileTypeService.fileType(fileInfo.mimetype)
	},
	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 && 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 && e.dataTransfer.types.includes('Files')) {
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'show'
	}
	},
	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
	}
	},
	clearError() {
	this.error = null
	},
	changeVis(visibility) {
	this.newStatus.visibility = visibility
	},
	togglePollForm() {
	this.newStatus.hasPoll = !this.newStatus.hasPoll
	},
	setPoll(poll) {
	this.newStatus.poll = poll
	},
	clearPollForm() {
	if (this.$refs.pollForm) {
	this.$refs.pollForm.clear()
	}
	},
	dismissScopeNotice() {
	this.$store.dispatch('setOption', {
	name: 'hideScopeNotice',
	value: true,
	})
	},
	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)))
	},
	handleEmojiInputShow(value) {
	this.emojiInputShown = value
	},
	updateIdempotencyKey() {
	this.idempotencyKey = Date.now().toString()
	},
	openProfileTab() {
	useInterfaceStore().openSettingsModalTab('profile')
	},
	propsToNative(props) {
	return propsToNative(props)
	},
	saveDraft() {
	if (!this.disableDraft && !this.saveInhibited) {
	if (this.safeToSaveDraft) {
	return this.$store
	.dispatch('addOrSaveDraft', { draft: this.newStatus })
	.then((id) => {
	if (this.newStatus.id !== id) {
	this.newStatus.id = id
	}
	this.saveable = false
	if (!this.shouldAutoSaveDraft) {
	this.clearStatus()
	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.$emit('draft-done')
	}
	})
	}
	}
	return Promise.resolve()
	},
	maybeAutoSaveDraft() {
	if (this.shouldAutoSaveDraft) {
	this.saveDraft(false)
	}
	},
	abandonDraft() {
	return this.$store.dispatch('abandonDraft', { id: this.newStatus.id })
	},
	getDraft(statusType, refId) {
	const maybeDraft = this.$store.state.drafts.drafts[this.draftId]
	if (this.draftId && maybeDraft) {
	return maybeDraft
	} else {
	const existingDrafts = this.$store.getters.draftsByTypeAndRefId(
	statusType,
	refId,
	)

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

	export default PostStatusForm
	diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
	index c77de92b17..2884d92b49 100644
	--- a/src/components/settings_modal/helpers/setting.js
	+++ b/src/components/settings_modal/helpers/setting.js
	@@ -1,362 +1,366 @@
	import { cloneDeep, get, isEqual, set } from 'lodash'

	import DraftButtons from './draft_buttons.vue'
	import ModifiedIndicator from './modified_indicator.vue'
	import ProfileSettingIndicator from './profile_setting_indicator.vue'

	export default {
	components: {
	ModifiedIndicator,
	DraftButtons,
	ProfileSettingIndicator,
	},
	props: {
	modelValue: {
	type: String,
	default: null,
	},
	+ description: {
	+ type: String,
	+ default: null,
	+ },
	path: {
	type: [String, Array],
	required: false,
	},
	showDescription: {
	type: Boolean,
	required: false,
	},
	descriptionPathOverride: {
	type: [String, Array],
	required: false,
	},
	suggestions: {
	type: [String, Array],
	required: false,
	},
	subgroup: {
	type: String,
	required: false,
	},
	disabled: {
	type: Boolean,
	default: false,
	},
	parentPath: {
	type: [String, Array],
	},
	parentInvert: {
	type: Boolean,
	default: false,
	},
	expert: {
	type: [Number, String],
	default: 0,
	},
	source: {
	type: String,
	default: undefined,
	},
	hideDraftButtons: {
	// this is for the weird backend hybrid (Boolean\|String or Boolean\|Number) settings
	required: false,
	type: Boolean,
	},
	hideLabel: {
	type: Boolean,
	},
	hideDescription: {
	type: Boolean,
	},
	swapDescriptionAndLabel: {
	type: Boolean,
	},
	backendDescriptionPath: {
	type: [String, Array],
	},
	overrideBackendDescription: {
	type: Boolean,
	},
	overrideBackendDescriptionLabel: {
	type: [Boolean, String],
	},
	draftMode: {
	type: Boolean,
	default: undefined,
	},
	timedApplyMode: {
	type: Boolean,
	default: false,
	},
	},
	inject: {
	defaultSource: {
	default: 'default',
	},
	defaultDraftMode: {
	default: false,
	},
	},
	data() {
	return {
	localDraft: null,
	}
	},
	created() {
	if (
	this.realDraftMode &&
	(this.realSource !== 'admin' \|\| this.path == null)
	) {
	this.draft = cloneDeep(this.state)
	}
	},
	computed: {
	draft: {
	get() {
	if (this.realSource === 'admin' \|\| this.path == null) {
	return get(this.$store.state.adminSettings.draft, this.canonPath)
	} else {
	return this.localDraft
	}
	},
	set(value) {
	if (this.realSource === 'admin' \|\| this.path == null) {
	this.$store.commit('updateAdminDraft', {
	path: this.canonPath,
	value,
	})
	} else {
	this.localDraft = value
	}
	},
	},
	state() {
	if (this.path == null) {
	return this.modelValue
	}
	const value = get(this.configSource, this.canonPath)
	if (value === undefined) {
	return this.defaultState
	} else {
	return value
	}
	},
	visibleState() {
	return this.realDraftMode ? this.draft : this.state
	},
	realSource() {
	return this.source \|\| this.defaultSource
	},
	realDraftMode() {
	return typeof this.draftMode === 'undefined'
	? this.defaultDraftMode
	: this.draftMode
	},
	backendDescription() {
	return get(
	this.$store.state.adminSettings.descriptions,
	this.descriptionPath,
	)
	},
	backendDescriptionLabel() {
	if (this.realSource !== 'admin') return ''
	if (
	this.overrideBackendDescriptionLabel !== '' &&
	typeof this.overrideBackendDescriptionLabel === 'string'
	) {
	return this.overrideBackendDescriptionLabel
	}
	if (!this.backendDescription \|\| this.overrideBackendDescriptionLabel) {
	return this.$t(
	[
	'admin_dash',
	'temp_overrides',
	...this.canonPath.map((p) => p.replace(/\./g, '_DOT_')),
	'label',
	].join('.'),
	)
	} else {
	return this.swapDescriptionAndLabel
	? this.backendDescription?.description
	: this.backendDescription?.label
	}
	},
	backendDescriptionDescription() {
	if (this.description) return this.description
	if (this.realSource !== 'admin') return ''
	if (this.hideDescription) return null
	if (!this.backendDescription \|\| this.overrideBackendDescription) {
	return this.$t(
	[
	'admin_dash',
	'temp_overrides',
	...this.canonPath.map((p) => p.replace(/\./g, '_DOT_')),
	'description',
	].join('.'),
	)
	} else {
	return this.swapDescriptionAndLabel
	? this.backendDescription?.label
	: this.backendDescription?.description
	}
	},
	backendDescriptionSuggestions() {
	return this.backendDescription?.suggestions \|\| this.suggestions
	},
	shouldBeDisabled() {
	if (this.path == null) {
	return this.disabled
	}
	let parentValue = null
	if (this.parentPath !== undefined && this.realSource === 'admin') {
	if (this.realDraftMode) {
	parentValue = get(
	this.$store.state.adminSettings.draft,
	this.parentPath,
	)
	} else {
	parentValue = get(this.configSource, this.parentPath)
	}
	}
	return (
	this.disabled \|\|
	(parentValue !== null
	? this.parentInvert
	? parentValue
	: !parentValue
	: false)
	)
	},
	configSource() {
	switch (this.realSource) {
	case 'profile':
	return this.$store.state.profileConfig
	case 'admin':
	return this.$store.state.adminSettings.config
	default:
	return this.$store.getters.mergedConfig
	}
	},
	configSink() {
	if (this.path == null) {
	return (k, v) => this.$emit('update:modelValue', v)
	}
	switch (this.realSource) {
	case 'profile':
	return (k, v) =>
	this.$store.dispatch('setProfileOption', { name: k, value: v })
	case 'admin':
	return (k, v) =>
	this.$store.dispatch('pushAdminSetting', { path: k, value: v })
	default:
	if (this.timedApplyMode) {
	return (k, v) =>
	this.$store.dispatch('setOptionTemporarily', {
	name: k,
	value: v,
	})
	} else {
	return (k, v) =>
	this.$store.dispatch('setOption', { name: k, value: v })
	}
	}
	},
	defaultState() {
	switch (this.realSource) {
	case 'profile':
	return {}
	default:
	return get(this.$store.getters.defaultConfig, this.path)
	}
	},
	isProfileSetting() {
	return this.realSource === 'profile'
	},
	isChanged() {
	if (this.path == null) return false
	switch (this.realSource) {
	case 'profile':
	case 'admin':
	return false
	default:
	return this.state !== this.defaultState
	}
	},
	canonPath() {
	if (this.path == null) return null
	return Array.isArray(this.path) ? this.path : this.path.split('.')
	},
	descriptionPath() {
	if (this.path == null) return null
	if (this.descriptionPathOverride) return this.descriptionPathOverride
	const path = Array.isArray(this.path) ? this.path : this.path.split('.')
	if (this.subgroup) {
	return [
	...path.slice(0, path.length - 1),
	':subgroup,' + this.subgroup,
	...path.slice(path.length - 1),
	]
	}
	return path
	},
	isDirty() {
	if (this.path == null) return false
	if (this.realSource === 'admin' && this.canonPath.length > 3) {
	return false // should not show draft buttons for "grouped" values
	} else {
	return this.realDraftMode && !isEqual(this.draft, this.state)
	}
	},
	canHardReset() {
	return (
	this.realSource === 'admin' &&
	this.$store.state.adminSettings.modifiedPaths?.has(
	this.canonPath.join(' -> '),
	)
	)
	},
	matchesExpertLevel() {
	const settingExpertLevel = this.expert \|\| 0
	const userToggleExpert = this.$store.state.config.expertLevel \|\| 0

	return settingExpertLevel <= userToggleExpert
	},
	},
	methods: {
	getValue(e) {
	return e.target.value
	},
	update(e) {
	if (this.realDraftMode) {
	this.draft = this.getValue(e)
	} else {
	this.configSink(this.path, this.getValue(e))
	}
	},
	commitDraft() {
	if (this.realDraftMode) {
	this.configSink(this.path, this.draft)
	}
	},
	reset() {
	if (this.realDraftMode) {
	this.draft = cloneDeep(this.state)
	} else {
	set(
	this.$store.getters.mergedConfig,
	this.path,
	cloneDeep(this.defaultState),
	)
	}
	},
	hardReset() {
	switch (this.realSource) {
	case 'admin':
	return this.$store
	.dispatch('resetAdminSetting', { path: this.path })
	.then(() => {
	this.draft = this.state
	})
	default:
	console.warn('Hard reset not implemented yet!')
	}
	},
	},
	}
	diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
	index 1a8e13e186..f8ffc99eca 100644
	--- a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
	+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
	@@ -1,214 +1,208 @@
	// eslint-disable-next-line no-unused

	import { throttle } from 'lodash'
	import { mapState as mapPiniaState, mapState } from 'pinia'
	import { Fragment, h } from 'vue'

	import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'

	import './vertical_tab_switcher.scss'

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

	const findFirstUsable = (slots) => slots.findIndex((_) => _.props)

	export default {
	name: 'VerticalTabSwitcher',
	props: {
	renderOnlyFocused: {
	required: false,
	type: Boolean,
	default: false,
	},
	onSwitch: {
	required: false,
	type: Function,
	default: undefined,
	},
	activeTab: {
	required: false,
	type: String,
	default: undefined,
	},
	bodyScrollLock: {
	required: false,
	type: Boolean,
	default: false,
	},
	- parentCollapsed: {
	- required: false,
	- type: Boolean,
	- default: null,
	- },
	},
	data() {
	return {
	active: findFirstUsable(this.slots()),
	resizeHandler: null,
	navSide: 'tabs',
	}
	},
	computed: {
	activeIndex() {
	// In case of controlled component
	if (this.activeTab) {
	return this.slots().findIndex(
	(slot) => slot && slot.props && this.activeTab === slot.props.key,
	)
	} else {
	return this.active
	}
	},
	isActive() {
	return (tabName) => {
	const isWanted = (slot) =>
	slot.props && slot.props['data-tab-name'] === tabName
	return this.$slots.default().findIndex(isWanted) === this.activeIndex
	}
	},
	...mapPiniaState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	},
	beforeUpdate() {
	const currentSlot = this.slots()[this.active]
	if (!currentSlot.props) {
	this.active = findFirstUsable(this.slots())
	}
	},
	methods: {
	clickTab(index) {
	return (e) => {
	e.preventDefault()
	this.setTab(index)
	}
	},
	setTab(index) {
	if (typeof this.onSwitch === 'function') {
	this.onSwitch.call(null, this.slots()[index].key)
	}
	this.active = index
	this.changeNavSide('content')
	},
	changeNavSide(side) {
	if (this.navSide !== side) {
	this.navSide = side
	}
	},
	// DO NOT put it to computed, it doesn't work (caching?)
	slots() {
	if (this.$slots.default()[0].type === Fragment) {
	return this.$slots.default()[0].children
	}
	return this.$slots.default()
	},
	},
	render() {
	const tabs = this.slots().map((slot, index) => {
	const props = slot.props
	if (!props) return
	const classesTab = ['vertical-tab', 'menu-item']
	if (
	this.activeIndex === index &&
	useInterfaceStore().layoutType !== 'mobile'
	) {
	classesTab.push('-active')
	}
	return (
	<button
	disabled={props.disabled}
	onClick={this.clickTab(index)}
	class={classesTab.join(' ')}
	type="button"
	role="tab"
	title={props.label}
	>
	{!props.icon ? (
	''
	) : (
	<FAIcon class="tab-icon" size="1x" fixed-width icon={props.icon} />
	)}
	<span class="text">{props.label}</span>
	</button>
	)
	})

	const contents = this.slots().map((slot, index) => {
	const props = slot.props
	if (!props) return
	const active = this.activeIndex === index

	let delayRender = slot.props['delay-render']
	if (delayRender && active) {
	slot.props['delay-render'] = false
	delayRender = false
	}
	const renderSlot =
	!delayRender && (!this.renderOnlyFocused \|\| active) ? slot : ''

	const headerClasses = ['tab-content-label']
	const header = (
	<h2 class={headerClasses}>
	<button
	type="button"
	onClick={() => this.changeNavSide('tabs')}
	title={this.$t('nav.back')}
	class="button-unstyled"
	>
	<FAIcon size="lg" class="back-button-icon" icon="chevron-left" />
	</button>
	{props.label}
	</h2>
	)

	const wrapperClasses = [
	'tab-content-wrapper',
	active ? '-active' : '-hidden',
	]
	const contentClasses = ['tab-content']
	if (props['full-width'] \|\| props['full-width'] === '') {
	contentClasses.push('-full-width')
	wrapperClasses.push('-full-width')
	}
	if (props['full-height'] \|\| props['full-width'] === '') {
	contentClasses.push('-full-height')
	wrapperClasses.push('-full-height')
	}
	return (
	<div class={wrapperClasses}>
	<div class="tab-mobile-header">{header}</div>
	<div class="tab-slot-wrapper">
	<div class={contentClasses}>{renderSlot}</div>
	</div>
	</div>
	)
	})

	const rootClasses = ['vertical-tab-switcher']
	if (useInterfaceStore().layoutType === 'mobile') {
	rootClasses.push('-mobile')
	}

	if (this.navSide === 'tabs') {
	rootClasses.push('-nav-tabs')
	} else {
	rootClasses.push('-nav-contents')
	}

	return (
	<div ref="root" class={rootClasses.join(' ')}>
	<div class="tabs" role="tablist" ref="nav">
	{tabs}
	</div>
	<div
	role="tabpanel"
	- class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}
	v-body-scroll-lock={this.bodyScrollLock}
	ref="contents"
	>
	{contents}
	</div>
	</div>
	)
	},
	}
	diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
	index 44460adfb7..1396227814 100644
	--- a/src/components/settings_modal/settings_modal_user_content.vue
	+++ b/src/components/settings_modal/settings_modal_user_content.vue
	@@ -1,140 +1,139 @@
	<template>
	<vertical-tab-switcher
	ref="tabSwitcher"
	class="settings_tab-switcher"
	:scrollable-tabs="true"
	- :child-collapsed="childCollapsed"
	:body-scroll-lock="bodyLock"
	:hide-header="navHideHeader"
	>
	<div
	:label="$t('settings.general')"
	icon="wrench"
	data-tab-name="general"
	>
	<GeneralTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.profile_tab')"
	icon="user"
	data-tab-name="profile"
	:full-width="true"
	>
	<ProfileTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.composing')"
	icon="pen-alt"
	data-tab-name="composing"
	:delay-render="true"
	>
	<ComposingTab />
	</div>
	<div
	:label="$t('settings.posts')"
	icon="message"
	data-tab-name="posts"
	:delay-render="true"
	>
	<PostsTab />
	</div>
	<div
	:full-width="true"
	:label="$t('settings.appearance')"
	icon="window-restore"
	data-tab-name="appearance"
	:delay-render="true"
	>
	<AppearanceTab />
	</div>
	<div
	:label="$t('settings.layout')"
	icon="table-columns"
	data-tab-name="layout"
	:delay-render="true"
	>
	<LayoutTab />
	</div>
	<div
	v-if="isLoggedIn"
	:full-width="true"
	:label="$t('settings.notifications')"
	icon="bell"
	data-tab-name="notifications"
	>
	<NotificationsTab />
	</div>
	<div
	:label="$t('settings.filtering')"
	icon="filter"
	data-tab-name="filtering"
	>
	<FilteringTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.mutes_and_blocks')"
	icon="eye-slash"
	data-tab-name="mutesAndBlocks"
	:full-width="true"
	:full-height="true"
	>
	<MutesAndBlocksTab />
	</div>
	<div
	:label="$t('settings.clutter')"
	icon="broom"
	data-tab-name="clutter"
	>
	<ClutterTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.security_tab')"
	icon="lock"
	data-tab-name="security"
	>
	<SecurityTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.data_import_export_tab')"
	icon="download"
	data-tab-name="dataImportExport"
	>
	<DataImportExportTab />
	</div>
	<div
	v-if="expertLevel > 0"
	:label="$t('settings.style.themes3.editor.title')"
	icon="palette"
	data-tab-name="style"
	:delay-render="true"
	:full-width="true"
	>
	<StyleTab />
	</div>
	<div
	v-if="expertLevel > 0"
	:label="$t('settings.theme_old')"
	icon="paint-brush"
	data-tab-name="theme"
	:delay-render="true"
	:full-width="true"
	>
	<OldThemeTab />
	</div>
	<div
	v-if="expertLevel > 0"
	:label="$t('settings.developer')"
	icon="code"
	data-tab-name="developer"
	>
	<DeveloperTab />
	</div>
	</vertical-tab-switcher>
	</template>

	<script src="./settings_modal_user_content.js"></script>
	diff --git a/src/components/settings_modal/tabs/clutter_tab.js b/src/components/settings_modal/tabs/clutter_tab.js
	index 903ffe5408..7aef996c80 100644
	--- a/src/components/settings_modal/tabs/clutter_tab.js
	+++ b/src/components/settings_modal/tabs/clutter_tab.js
	@@ -1,203 +1,201 @@
	import { mapActions, mapState } from 'pinia'
	import { v4 as uuidv4 } from 'uuid'

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

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

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

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

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

	export default ClutterTab
	diff --git a/src/components/settings_modal/tabs/clutter_tab.vue b/src/components/settings_modal/tabs/clutter_tab.vue
	index daf098f5a5..5cd66dccd1 100644
	--- a/src/components/settings_modal/tabs/clutter_tab.vue
	+++ b/src/components/settings_modal/tabs/clutter_tab.vue
	@@ -1,88 +1,88 @@
	<template>
	<div class="clutter-tab">
	<div class="setting-section">
	<h3>{{ $t('settings.interface') }}</h3>
	<ul class="setting-list">
	<li>
	<BooleanSetting path="alwaysShowSubjectInput">
	{{ $t('settings.subject_input_always_show') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="minimalScopesMode">
	{{ $t('settings.minimal_scopes_mode') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="hidePostStats">
	{{ $t('settings.hide_post_stats') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="hideUserStats"
	>
	{{ $t('settings.hide_user_stats') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="hideBotIndication">
	{{ $t('settings.hide_actor_type_indication') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="hideScrobbles">
	{{ $t('settings.hide_scrobbles') }}
	</BooleanSetting>
	<ul class="setting-list suboptions">
	<li>
	<UnitSetting
	key="hideScrobblesAfter"
	path="hideScrobblesAfter"
	:units="['m', 'h', 'd']"
	unit-set="time"
	>
	{{ $t('settings.hide_scrobbles_after') }}
	</UnitSetting>
	</li>
	</ul>
	</li>
	</ul>
	<h3>{{ $t('settings.attachments') }}</h3>
	<ul class="setting-list">
	<li>
	<IntegerSetting
	path="maxThumbnails"
	:min="0"
	>
	{{ $t('settings.max_thumbnails') }}
	</IntegerSetting>
	</li>
	<li>
	<BooleanSetting path="hideAttachments">
	{{ $t('settings.hide_attachments_in_tl') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="hideAttachmentsInConv">
	{{ $t('settings.hide_attachments_in_convo') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="userCardHidePersonalMarks">
	{{ $t('settings.user_card_hide_personal_marks') }}
	</BooleanSetting>
	</li>
	- <li v-if="instanceShoutboxPresent">
	+ <li v-if="shoutAvailable">
	<BooleanSetting
	path="hideShoutbox"
	>
	{{ $t('settings.hide_shoutbox') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>
	</div>
	</template>

	<script src="./clutter_tab.js"></script>
	diff --git a/src/components/settings_modal/tabs/composing_tab.js b/src/components/settings_modal/tabs/composing_tab.js
	index ba3ddaca86..9d55d1f4fa 100644
	--- a/src/components/settings_modal/tabs/composing_tab.js
	+++ b/src/components/settings_modal/tabs/composing_tab.js
	@@ -1,196 +1,188 @@
	-import { mapState } from 'vuex'
	+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 ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import UnitSetting from '../helpers/unit_setting.vue'

	import { useInstanceStore } from 'src/stores/instance.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 = {
	- props: {
	- parentCollapsed: {
	- required: true,
	- type: Boolean,
	- },
	- },
	data() {
	return {
	subjectLineOptions: ['email', 'noop', 'masto'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(
	`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`,
	),
	})),
	conversationDisplayOptions: ['tree', 'linear'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_display_${mode}`),
	})),
	absoluteTime12hOptions: ['24h', '12h'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.absolute_time_format_12h_${mode}`),
	})),
	conversationOtherRepliesButtonOptions: ['below', 'inside'].map(
	(mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_other_replies_button_${mode}`),
	}),
	),
	mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(
	(mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.mention_link_display_${mode}`),
	}),
	),
	userPopoverAvatarActionOptions: ['close', 'zoom', 'open'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.user_popover_avatar_action_${mode}`),
	})),
	unsavedPostActionOptions: ['save', 'discard', 'confirm'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.unsaved_post_action_${mode}`),
	})),
	loopSilentAvailable:
	// Firefox
	Object.getOwnPropertyDescriptor(
	HTMLVideoElement.prototype,
	'mozHasAudio',
	) \|\|
	// Chrome-likes
	Object.getOwnPropertyDescriptor(
	HTMLMediaElement.prototype,
	'webkitAudioDecodedByteCount',
	) \|\|
	// Future spec, still not supported in Nightly 63 as of 08/2018
	Object.getOwnPropertyDescriptor(
	HTMLMediaElement.prototype,
	'audioTracks',
	),
	emailLanguage: this.$store.state.users.currentUser.language \|\| [''],
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	IntegerSetting,
	FloatSetting,
	UnitSetting,
	InterfaceLanguageSwitcher,
	ProfileSettingIndicator,
	ScopeSelector,
	Select,
	FontControl,
	},
	computed: {
	postFormats() {
	return useInstanceStore().postFormats \|\| []
	},
	postContentOptions() {
	return this.postFormats.map((format) => ({
	key: format,
	value: format,
	label: this.$t(`post_status.content_type["${format}"]`),
	}))
	},
	language: {
	get: function () {
	return this.$store.getters.mergedConfig.interfaceLanguage
	},
	set: function (val) {
	this.$store.dispatch('setOption', {
	name: 'interfaceLanguage',
	value: val,
	})
	},
	},
	...SharedComputedObject(),
	- ...mapState(useInstanceStore, {
	- blockExpirationSupported: (store) => store.featureSet.blockExpiration,
	- }),
	+ ...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,
	),
	}

	this.$store.state.api.backendInteractor
	.updateProfile({ params })
	.then((user) => {
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	})
	},
	updateFont(key, value) {
	this.$store.dispatch('setOption', {
	name: 'theme3hacks',
	value: {
	...this.mergedConfig.theme3hacks,
	fonts: {
	...this.mergedConfig.theme3hacks.fonts,
	[key]: value,
	},
	},
	})
	},
	},
	}

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

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

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

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

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

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

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

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

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

	export default FilteringTab
	diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
	index ff74986560..bb0dccb85e 100644
	--- a/src/components/settings_modal/tabs/filtering_tab.vue
	+++ b/src/components/settings_modal/tabs/filtering_tab.vue
	@@ -1,347 +1,347 @@
	<template>
	<div class="filtering-tab">
	<div class="setting-section">
	<h3>{{ $t('settings.filter.mute_filter') }}</h3>
	<ul class="setting-list">
	<li>
	<ChoiceSetting
	v-if="user"
	id="replyVisibility"
	path="replyVisibility"
	:options="replyVisibilityOptions"
	>
	{{ $t('settings.replies_in_timeline') }}
	</ChoiceSetting>
	</li>
	<li>
	<span class="setting-item">
	<span class="setting-label">
	{{ $t('user_card.default_mute_expiration') }}
	</span>
	<Select
	id="onMuteDefaultActionLv1"
	v-model="onMuteDefaultActionLv1"
	>
	<option
	v-for="option in muteBlockLv1Options"
	:key="option.key"
	:value="option.value"
	>
	{{ option.label }}
	</option>
	</Select>
	</span>
	<ul
	v-if="onMuteDefaultActionLv1 === 'temporarily'"
	class="setting-list suboptions"
	>
	<li>
	<UnitSetting
	path="onMuteDefaultAction"
	unit-set="time"
	:units="['s', 'm', 'h', 'd']"
	:min="0"
	>
	{{ $t('user_card.default_expiration_time') }}
	</UnitSetting>
	</li>
	</ul>
	</li>
	- <li v-if="blockExpirationSupported">
	+ <li v-if="blockExpiration">
	<span class="setting-item">
	<span class="setting-label">
	{{ $t('user_card.default_block_expiration') }}
	</span>
	<Select
	id="onBlockDefaultActionLv1"
	v-model="onBlockDefaultActionLv1"
	class="setting-control"
	>
	<option
	v-for="option in muteBlockLv1Options"
	:key="option.key"
	:value="option.value"
	>
	{{ option.label }}
	</option>
	</Select>
	</span>
	<ul
	v-if="onBlockDefaultActionLv1 === 'temporarily'"
	class="setting-list suboptions"
	>
	<li>
	<UnitSetting
	path="onBlockDefaultAction"
	unit-set="time"
	:units="['s', 'm', 'h', 'd']"
	:min="0"
	>
	{{ $t('user_card.default_expiration_time') }}
	</UnitSetting>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting path="hideFilteredStatuses">
	{{ $t('settings.hide_muted_statuses') }}
	</BooleanSetting>
	<ul class="setting-list suboptions">
	<li>
	<BooleanSetting
	parent-path="hideFilteredStatuses"
	:parent-invert="true"
	path="hideWordFilteredPosts"
	expert="1"
	>
	{{ $t('settings.hide_filtered_statuses') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	v-if="user"
	parent-path="hideFilteredStatuses"
	:parent-invert="true"
	path="hideMutedThreads"
	>
	{{ $t('settings.hide_muted_threads') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	v-if="user"
	parent-path="hideFilteredStatuses"
	:parent-invert="true"
	path="hideMutedPosts"
	>
	{{ $t('settings.hide_muted_posts') }}
	</BooleanSetting>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting path="muteBotStatuses">
	{{ $t('settings.mute_bot_posts') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="muteSensitiveStatuses">
	{{ $t('settings.mute_sensitive_posts') }}
	</BooleanSetting>
	</li>
	<li>
	<h3>{{ $t('settings.filter.custom_filters') }}</h3>
	<p class="muteFiltersActions">
	<span class="total">
	{{ $t('settings.filter.total_count', { count: muteFiltersDraft.length }) }}
	</span>
	<button
	class="add-button button-default"
	type="button"
	@click="createFilter()"
	>
	{{ $t('settings.filter.new') }}
	</button>
	<button
	class="add-button button-default"
	type="button"
	@click="importFilter()"
	>
	{{ $t('settings.filter.import') }}
	</button>
	</p>
	<div class="muteFilterContainer">
	<div
	v-for="filter in muteFiltersDraft"
	:key="filter[0]"
	class="mute-filter"
	:style="{ order: filter[1].order }"
	>
	<div class="filter-name">
	<label
	:for="'filterName' + filter[0]"
	>
	{{ $t('settings.filter.name') }}
	</label>
	{{ ' ' }}
	<input
	:id="'filterName' + filter[0]"
	class="input"
	:value="filter[1].name"
	@input="updateFilter(filter[0], 'name', $event.target.value)"
	>
	<span
	v-if="filter[1].expires !== null && Date.now() > filter[1].expires"
	class="alert neutral"
	>
	{{ $t('settings.filter.expired') }}
	</span>
	</div>
	<div class="filter-enabled">
	<Checkbox
	:id="'filterHide' + filter[0]"
	:model-value="filter[1].hide"
	:name="'filterHide' + filter[0]"
	@update:model-value="updateFilter(filter[0], 'hide', $event)"
	>
	{{ $t('settings.filter.hide') }}
	</Checkbox>
	{{ ' ' }}
	<Checkbox
	:id="'filterEnabled' + filter[0]"
	:model-value="filter[1].enabled"
	:name="'filterEnabled' + filter[0]"
	@update:model-value="updateFilter(filter[0], 'enabled', $event)"
	>
	{{ $t('settings.enabled') }}
	</Checkbox>
	</div>
	<div class="filter-type filter-field">
	<label :for="'filterType' + filter[0]">
	<HelpIndicator>
	<p>
	{{ $t('settings.filter.help.word') }}
	</p>
	<p>
	{{ $t('settings.filter.help.user') }}
	</p>
	<i18n-t
	keypath="settings.filter.help.regexp"
	tag="p"
	>
	<template #link>
	<a
	:href="$t('settings.filter.help.regexp_url')"
	target="_blank"
	>
	{{ $t('settings.filter.help.regexp_link') }}
	</a>
	</template>
	</i18n-t>
	</HelpIndicator>
	{{ $t('settings.filter.type') }}
	</label>
	<Select
	:id="'filterType' + filter[0]"
	class="filter-field-value"
	:model-value="filter[1].type"
	@update:model-value="updateFilter(filter[0], 'type', $event)"
	>
	<option value="word">
	{{ $t('settings.filter.plain') }}
	</option>
	<option value="regexp">
	{{ $t('settings.filter.regexp') }}
	</option>
	<option value="user">
	{{ $t('settings.filter.user') }}
	</option>
	<option value="user_regexp">
	{{ $t('settings.filter.user_regexp') }}
	</option>
	</Select>
	</div>
	<div class="filter-value filter-field">
	<label
	:for="'filterValue' + filter[0]"
	>
	{{ $t('settings.filter.value') }}
	</label>
	{{ ' ' }}
	<input
	:id="'filterValue' + filter[0]"
	class="input filter-field-value"
	:value="filter[1].value"
	@input="updateFilter(filter[0], 'value', $event.target.value)"
	>
	</div>
	<div class="filter-expires filter-field">
	<label
	:for="'filterExpires' + filter[0]"
	>
	{{ $t('settings.filter.expires') }}
	</label>
	{{ ' ' }}
	<div class="filter-field-value">
	<input
	:id="'filterExpires' + filter[0]"
	class="input"
	:class="{ disabled: filter[1].expires === null }"
	type="datetime-local"
	:disabled="filter[1].expires === null"
	:value="filter[1].expires ? getDatetimeLocal(filter[1].expires) : null"
	@input="updateFilter(filter[0], 'expires', $event.target.value)"
	>
	{{ ' ' }}
	<Checkbox
	:id="'filterExpiresNever' + filter[0]"
	:model-value="filter[1].expires === null"
	:name="'filterExpiresNever' + filter[0]"
	class="input-inset input-boolean never"
	@update:model-value="updateFilter(filter[0], 'expires-never', $event)"
	>
	{{ $t('settings.filter.never_expires') }}
	</Checkbox>
	</div>
	</div>
	<div
	v-if="!checkRegexValid(filter[0])"
	class="alert error"
	>
	{{ $t('settings.filter.regexp_error') }}
	</div>
	<div class="filter-buttons">
	<button
	class="delete-button button-default -danger"
	type="button"
	@click="deleteFilter(filter[0])"
	>
	{{ $t('settings.filter.delete') }}
	</button>
	<button
	class="export-button button-default"
	type="button"
	@click="exportFilter(filter[0])"
	>
	{{ $t('settings.filter.export') }}
	</button>
	<button
	class="copy-button button-default"
	type="button"
	@click="copyFilter(filter[0])"
	>
	{{ $t('settings.filter.copy') }}
	</button>
	<button
	class="save-button button-default"
	:class="{ disabled: !muteFiltersDraftDirty[filter[0]] }"
	:disabled="!muteFiltersDraftDirty[filter[0]]"
	type="button"
	@click="saveFilter(filter[0])"
	>
	{{ $t('settings.filter.save') }}
	</button>
	</div>
	</div>
	</div>
	<p class="muteFiltersActionsBottom">
	<span class="total">
	{{ $t('settings.filter.expired_count', { count: muteFiltersExpired.length }) }}
	</span>
	<button
	class="add-button button-default"
	type="button"
	:class="{ disabled: muteFiltersExpired.length === 0 }"
	:disabled="muteFiltersExpired.length === 0"
	@click="purgeExpiredFilters()"
	>
	{{ $t('settings.filter.purge_expired') }}
	</button>
	</p>
	</li>
	</ul>
	</div>
	</div>
	</template>
	<script src="./filtering_tab.js"></script>
	<style src="./filtering_tab.scss"></style>
	diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
	index 3f2530278c..0d8f9a7862 100644
	--- a/src/components/settings_modal/tabs/general_tab.js
	+++ b/src/components/settings_modal/tabs/general_tab.js
	@@ -1,89 +1,82 @@
	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 ProfileSettingIndicator from '../helpers/profile_setting_indicator.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 localeService from 'src/services/locale/locale.service.js'

	const GeneralTab = {
	- props: {
	- parentCollapsed: {
	- required: true,
	- type: Boolean,
	- },
	- },
	data() {
	return {
	absoluteTime12hOptions: ['24h', '12h'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.absolute_time_format_12h_${mode}`),
	})),
	emailLanguage: this.$store.state.users.currentUser.language \|\| [''],
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	UnitSetting,
	FloatSetting,
	FontControl,
	InterfaceLanguageSwitcher,
	ProfileSettingIndicator,
	},
	computed: {
	language: {
	get: function () {
	return this.$store.getters.mergedConfig.interfaceLanguage
	},
	set: function (val) {
	this.$store.dispatch('setOption', {
	name: 'interfaceLanguage',
	value: val,
	})
	},
	},
	...SharedComputedObject(),
	- ...mapState(useInstanceStore, {
	- blockExpirationSupported: (store) => store.featureSet.blockExpiration,
	- }),
	+ ...mapState(useInstanceCapabilitiesStore, ['blockExpiration']),
	},
	methods: {
	updateProfile() {
	const params = {
	language: localeService.internalToBackendLocaleMulti(
	this.emailLanguage,
	),
	}

	this.$store.state.api.backendInteractor
	.updateProfile({ params })
	.then((user) => {
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	})
	},
	updateFont(key, value) {
	this.$store.dispatch('setOption', {
	name: 'theme3hacks',
	value: {
	...this.mergedConfig.theme3hacks,
	fonts: {
	...this.mergedConfig.theme3hacks.fonts,
	[key]: value,
	},
	},
	})
	},
	},
	}

	export default GeneralTab
	diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
	index ceb073a48a..c44e558b54 100644
	--- a/src/components/settings_modal/tabs/general_tab.vue
	+++ b/src/components/settings_modal/tabs/general_tab.vue
	@@ -1,210 +1,210 @@
	<template>
	<div>
	<div class="setting-section">
	<h3>{{ $t('settings.format_and_language') }}</h3>
	<ul class="setting-list">
	<h4>{{ $t('settings.interfaceLanguage') }}</h4>
	<interface-language-switcher
	v-model="language"
	class="lang-selector"
	@update="val => language = val"
	/>
	<h4>
	{{ $t('settings.email_language') }}
	{{ ' ' }}
	<ProfileSettingIndicator :is-profile="true" />
	</h4>
	<interface-language-switcher
	v-model="emailLanguage"
	class="lang-selector"
	:profile="true"
	@update:model-value="updateProfile()"
	/>
	<li>
	<BooleanSetting path="useAbsoluteTimeFormat">
	{{ $t('settings.absolute_time_format') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	id="absoluteTime12h"
	path="absoluteTime12h"
	:options="absoluteTime12hOptions"
	>
	{{ $t('settings.absolute_time_format_12h') }}
	</ChoiceSetting>
	</li>
	</ul>
	<h3>{{ $t('settings.scale_and_font') }}</h3>
	<ul class="setting-list">
	<li>
	<UnitSetting
	path="textSize"
	:step="0.1"
	:units="['px', 'rem']"
	:reset-default="{ 'px': 14, 'rem': 1 }"
	timed-apply-mode
	>
	{{ $t('settings.text_size') }}
	</UnitSetting>
	<p class="sidenote">
	<i18n-t
	scope="global"
	keypath="settings.text_size_tip"
	tag="span"
	>
	<code>px</code>
	<code>rem</code>
	</i18n-t>
	<br>
	<i18n-t
	scope="global"
	keypath="settings.text_size_tip2"
	tag="span"
	>
	<code>14px</code>
	</i18n-t>
	</p>
	</li>
	<li>
	<FontControl
	:model-value="mergedConfig.theme3hacks.fonts.interface"
	name="ui"
	:label="$t('settings.style.fonts.components_inline.interface')"
	:fallback="{ family: 'sans-serif' }"
	no-inherit="1"
	@update:model-value="v => updateFont('interface', v)"
	/>
	</li>
	<li>
	<FontControl
	:model-value="mergedConfig.theme3hacks.fonts.input"
	name="input"
	:fallback="{ family: 'inherit' }"
	:label="$t('settings.style.fonts.components_inline.input')"
	@update:model-value="v => updateFont('input', v)"
	/>
	</li>
	<li>
	<UnitSetting
	path="emojiSize"
	:step="0.1"
	:units="['px', 'rem']"
	:reset-default="{ 'px': 32, 'rem': 2.2 }"
	>
	{{ $t('settings.emoji_size') }}
	</UnitSetting>
	<ul
	class="setting-list suboptions"
	>
	<li>
	<FloatSetting
	v-if="user"
	path="emojiReactionsScale"
	>
	{{ $t('settings.emoji_reactions_scale') }}
	</FloatSetting>
	</li>
	</ul>
	</li>
	</ul>
	<h3>{{ $t('settings.timelines') }}</h3>
	<ul class="setting-list">
	<li>
	<BooleanSetting path="streaming">
	{{ $t('settings.streaming') }}
	</BooleanSetting>
	<ul class="setting-list suboptions">
	<li>
	<BooleanSetting
	path="pauseOnUnfocused"
	parent-path="streaming"
	>
	{{ $t('settings.pause_on_unfocused') }}
	</BooleanSetting>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting
	path="useStreamingApi"
	expert="1"
	>
	{{ $t('settings.useStreamingApi') }}
	</BooleanSetting>
	</li>
	</ul>
	<h3 v-if="expertLevel > 0">
	{{ $t('settings.confirmations') }}
	</h3>
	<ul
	v-if="expertLevel > 0"
	class="setting-list"
	>
	<li class="select-multiple">
	<h4 class="label">
	{{ $t('settings.confirm_dialogs') }}
	</h4>
	<ul class="option-list">
	<li>
	<BooleanSetting path="modalOnRepeat">
	{{ $t('settings.confirm_dialogs_repeat') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnUnfollow">
	{{ $t('settings.confirm_dialogs_unfollow') }}
	</BooleanSetting>
	</li>
	<li
	- v-if="!blockExpirationSupported"
	+ v-if="!blockExpiration"
	>
	<BooleanSetting
	path="modalOnBlock"
	>
	{{ $t('settings.confirm_dialogs_block') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnMuteConversation">
	{{ $t('settings.confirm_dialogs_mute_conversation') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnMuteDomain">
	{{ $t('settings.confirm_dialogs_mute_domain') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnDelete">
	{{ $t('settings.confirm_dialogs_delete') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnLogout">
	{{ $t('settings.confirm_dialogs_logout') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnApproveFollow">
	{{ $t('settings.confirm_dialogs_approve_follow') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnDenyFollow">
	{{ $t('settings.confirm_dialogs_deny_follow') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnRemoveUserFromFollowers">
	{{ $t('settings.confirm_dialogs_remove_follower') }}
	</BooleanSetting>
	</li>
	</ul>
	</li>
	</ul>
	</div>
	</div>
	</template>

	<script src="./general_tab.js"></script>
	diff --git a/src/components/settings_modal/tabs/layout_tab.js b/src/components/settings_modal/tabs/layout_tab.js
	index c69e570f5b..58eb60a452 100644
	--- a/src/components/settings_modal/tabs/layout_tab.js
	+++ b/src/components/settings_modal/tabs/layout_tab.js
	@@ -1,60 +1,53 @@
	import { mapState } from 'pinia'

	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import ProfileSettingIndicator from '../helpers/profile_setting_indicator.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'

	const GeneralTab = {
	- props: {
	- parentCollapsed: {
	- required: true,
	- type: Boolean,
	- },
	- },
	data() {
	return {
	thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(
	(mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.third_column_mode_${mode}`),
	}),
	),
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	UnitSetting,
	ProfileSettingIndicator,
	},
	computed: {
	- ...mapState(useInstanceStore, {
	- postFormats: (store) => store.featureSet.postFormats \|\| [],
	- instanceSpecificPanelPresent: (store) =>
	- store.instanceIdentity.instanceSpecificPanelPresent,
	- instanceShoutboxPresent: (store) => store.featureSet.shoutAvailable,
	- }),
	+ ...mapState(useInstanceCapabilitiesStore, [
	+ 'instanceSpecificPanelPresent',
	+ 'postFormats',
	+ 'suggestionsEnabled',
	+ ]),
	columns() {
	const mode = this.$store.getters.mergedConfig.thirdColumnMode

	const notif = mode === 'none' ? [] : ['notifs']

	if (
	this.$store.getters.mergedConfig.sidebarRight \|\|
	mode === 'postform'
	) {
	return [...notif, 'content', 'sidebar']
	} else {
	return ['sidebar', 'content', ...notif]
	}
	},
	...SharedComputedObject(),
	},
	}

	export default GeneralTab
	diff --git a/src/components/settings_modal/tabs/posts_tab.js b/src/components/settings_modal/tabs/posts_tab.js
	index dfc4d4f8b8..268a0a56fb 100644
	--- a/src/components/settings_modal/tabs/posts_tab.js
	+++ b/src/components/settings_modal/tabs/posts_tab.js
	@@ -1,90 +1,84 @@
	import FontControl from 'src/components/font_control/font_control.vue'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import IntegerSetting from '../helpers/integer_setting.vue'
	import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'

	const GeneralTab = {
	- props: {
	- parentCollapsed: {
	- required: true,
	- type: Boolean,
	- },
	- },
	data() {
	return {
	conversationDisplayOptions: ['tree', 'linear'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_display_${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',
	),
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	IntegerSetting,
	FontControl,
	ProfileSettingIndicator,
	},
	computed: {
	...SharedComputedObject(),
	},
	methods: {
	updateFont(key, value) {
	this.$store.dispatch('setOption', {
	name: 'theme3hacks',
	value: {
	...this.mergedConfig.theme3hacks,
	fonts: {
	...this.mergedConfig.theme3hacks.fonts,
	[key]: value,
	},
	},
	})
	},
	},
	}

	export default GeneralTab
	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 c24ff8b6fd..96510edcf7 100644
	--- a/src/components/settings_modal/tabs/security_tab/security_tab.js
	+++ b/src/components/settings_modal/tabs/security_tab/security_tab.js
	@@ -1,173 +1,174 @@
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ProgressButton from 'src/components/progress_button/progress_button.vue'
	import Mfa from './mfa.vue'

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

	import localeService from 'src/services/locale/locale.service.js'

	const SecurityTab = {
	data() {
	return {
	newEmail: '',
	changeEmailError: false,
	changeEmailPassword: '',
	changedEmail: false,
	deletingAccount: false,
	deleteAccountConfirmPasswordInput: '',
	deleteAccountError: false,
	changePasswordInputs: ['', '', ''],
	changedPassword: false,
	changePasswordError: false,
	moveAccountTarget: '',
	moveAccountPassword: '',
	movedAccount: false,
	moveAccountError: false,
	aliases: [],
	listAliasesError: false,
	addAliasTarget: '',
	addedAlias: false,
	addAliasError: false,
	}
	},
	created() {
	useOAuthTokensStore().fetchTokens()
	this.fetchAliases()
	},
	components: {
	ProgressButton,
	Mfa,
	Checkbox,
	},
	computed: {
	user() {
	return this.$store.state.users.currentUser
	},
	pleromaExtensionsAvailable() {
	- return useInstanceStore().featureSet.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() {
	this.$store.state.api.backendInteractor
	.deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
	.then((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],
	}
	this.$store.state.api.backendInteractor
	.changePassword(params)
	.then((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,
	}
	this.$store.state.api.backendInteractor
	.changeEmail(params)
	.then((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,
	}
	this.$store.state.api.backendInteractor
	.moveAccount(params)
	.then((res) => {
	if (res.status === 'success') {
	this.movedAccount = true
	this.moveAccountError = false
	} else {
	this.movedAccount = false
	this.moveAccountError = res.error
	}
	})
	},
	removeAlias(alias) {
	this.$store.state.api.backendInteractor
	.deleteAlias({ alias })
	.then(() => this.fetchAliases())
	},
	addAlias() {
	this.$store.state.api.backendInteractor
	.addAlias({ alias: this.addAliasTarget })
	.then(() => {
	this.addedAlias = true
	this.addAliasError = false
	this.addAliasTarget = ''
	})
	.catch((error) => {
	this.addedAlias = false
	this.addAliasError = error
	})
	.then(() => this.fetchAliases())
	},
	fetchAliases() {
	this.$store.state.api.backendInteractor
	.listAliases()
	.then((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 40fcdc23d6..628d8d33fa 100644
	--- a/src/components/side_drawer/side_drawer.js
	+++ b/src/components/side_drawer/side_drawer.js
	@@ -1,127 +1,129 @@
	import { mapActions, mapState } from 'pinia'
	import { mapGetters } from 'vuex'

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

	import { useAnnouncementsStore } from 'src/stores/announcements'
	import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface'
	import { useShoutStore } from 'src/stores/shout'

	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 && this.currentUser.locked) {
	this.$store.dispatch('startFetchingFollowRequests')
	}
	},
	components: { UserCard },
	computed: {
	currentUser() {
	return this.$store.state.users.currentUser
	},
	shout() {
	return useShoutStore().joined
	},
	unseenNotifications() {
	return unseenNotificationsFromStore(this.$store)
	},
	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, ['private', 'federating']),
	...mapState(useInstanceStore, {
	logo: (store) => store.instanceIdentity.logo,
	sitename: (store) => store.instanceIdentity.name,
	hideSitename: (store) => store.instanceIdentity.hideSitename,
	- pleromaChatMessagesAvailable: (store) =>
	- store.featureSet.pleromaChatMessagesAvailable,
	- suggestionsEnabled: (store) => store.featureSet.suggestionsEnabled,
	}),
	...mapGetters(['unreadChatCount', '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 66acae0d3f..fbea34b4b5 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,676 +1,677 @@
	import { unescape as ldUnescape, uniqBy } from 'lodash'

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

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

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

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

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

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

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

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

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

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

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

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

	export default Status
	diff --git a/src/components/status_action_buttons/buttons_definitions.js b/src/components/status_action_buttons/buttons_definitions.js
	index 4e0baaa619..20db7aa454 100644
	--- a/src/components/status_action_buttons/buttons_definitions.js
	+++ b/src/components/status_action_buttons/buttons_definitions.js
	@@ -1,289 +1,290 @@
	import { useEditStatusStore } from 'src/stores/editStatus.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useReportsStore } from 'src/stores/reports.js'
	import { useStatusHistoryStore } from 'src/stores/statusHistory.js'

	const PRIVATE_SCOPES = new Set(['private', 'direct'])
	const PUBLIC_SCOPES = new Set(['public', 'unlisted'])
	export const BUTTONS = [
	{
	// =========
	// REPLY
	// =========
	name: 'reply',
	label: 'tool_tip.reply',
	icon: 'reply',
	active: ({ replying }) => replying,
	counter: ({ status }) => status.replies_count,
	anon: true,
	anonLink: true,
	toggleable: true,
	closeIndicator: 'times',
	activeIndicator: 'none',
	action({ emit }) {
	emit('toggleReplying')
	return Promise.resolve()
	},
	},
	{
	// =========
	// REPEAT
	// =========
	name: 'retweet',
	label: ({ status }) =>
	status.repeated ? 'tool_tip.unrepeat' : 'tool_tip.repeat',
	icon({ status, currentUser }) {
	if (
	currentUser.id !== status.user.id &&
	PRIVATE_SCOPES.has(status.visibility)
	) {
	return 'lock'
	}
	return 'retweet'
	},
	animated: true,
	active: ({ status }) => status.repeated,
	counter: ({ status }) => status.repeat_num,
	anonLink: true,
	interactive: ({ status, currentUser }) =>
	!!currentUser &&
	(currentUser.id === status.user.id \|\|
	!PRIVATE_SCOPES.has(status.visibility)),
	toggleable: true,
	confirm: ({ status, getters }) =>
	!status.repeated && getters.mergedConfig.modalOnRepeat,
	confirmStrings: {
	title: 'status.repeat_confirm_title',
	body: 'status.repeat_confirm',
	confirm: 'status.repeat_confirm_accept_button',
	cancel: 'status.repeat_confirm_cancel_button',
	},
	action({ status, dispatch }) {
	if (!status.repeated) {
	return dispatch('retweet', { id: status.id })
	} else {
	return dispatch('unretweet', { id: status.id })
	}
	},
	},
	{
	// =========
	// FAVORITE
	// =========
	name: 'favorite',
	label: ({ status }) =>
	status.favorited ? 'tool_tip.unfavorite' : 'tool_tip.favorite',
	icon: ({ status }) =>
	status.favorited ? ['fas', 'star'] : ['far', 'star'],
	animated: true,
	active: ({ status }) => status.favorited,
	counter: ({ status }) => status.fave_num,
	anonLink: true,
	toggleable: true,
	action({ status, dispatch }) {
	if (!status.favorited) {
	return dispatch('favorite', { id: status.id })
	} else {
	return dispatch('unfavorite', { id: status.id })
	}
	},
	},
	{
	// =========
	// EMOJI REACTIONS
	// =========
	name: 'emoji',
	label: 'tool_tip.add_reaction',
	icon: ['far', 'smile-beam'],
	anonLink: true,
	},
	{
	// =========
	// MUTE
	// =========
	name: 'mute',
	icon: 'eye-slash',
	label: 'status.mute_ellipsis',
	if: ({ loggedIn }) => loggedIn,
	toggleable: true,
	dropdown: true,
	// action ({ status, dispatch, emit }) {
	// }
	},
	{
	// =========
	// PIN STATUS
	// =========
	name: 'pin',
	icon: 'thumbtack',
	label: ({ status }) => (status.pinned ? 'status.unpin' : 'status.pin'),
	if({ status, loggedIn, currentUser }) {
	return (
	loggedIn &&
	status.user.id === currentUser.id &&
	PUBLIC_SCOPES.has(status.visibility)
	)
	},
	action({ status, dispatch }) {
	if (status.pinned) {
	return dispatch('unpinStatus', status.id)
	} else {
	return dispatch('pinStatus', status.id)
	}
	},
	},
	{
	// =========
	// BOOKMARK
	// =========
	name: 'bookmark',
	icon: ({ status }) =>
	status.bookmarked ? ['fas', 'bookmark'] : ['far', 'bookmark'],
	toggleable: true,
	active: ({ status }) => status.bookmarked,
	label: ({ status }) =>
	status.bookmarked ? 'status.unbookmark' : 'status.bookmark',
	if: ({ loggedIn }) => loggedIn,
	action({ status, dispatch }) {
	if (status.bookmarked) {
	return dispatch('unbookmark', { id: status.id })
	} else {
	return dispatch('bookmark', { id: status.id })
	}
	},
	},
	{
	// =========
	// EDIT HISTORY
	// =========
	name: 'editHistory',
	icon: 'history',
	label: 'status.status_history',
	if({ status, state }) {
	return (
	- useInstanceStore().featureSet.editingAvailable &&
	+ useInstanceCapabilitiesStore().editingAvailable &&
	status.edited_at !== null
	)
	},
	action({ status }) {
	const originalStatus = { ...status }
	const stripFieldsList = [
	'attachments',
	'created_at',
	'emojis',
	'text',
	'raw_html',
	'nsfw',
	'poll',
	'summary',
	'summary_raw_html',
	]
	stripFieldsList.forEach((p) => delete originalStatus[p])
	useStatusHistoryStore().openStatusHistoryModal(originalStatus)
	return Promise.resolve()
	},
	},
	{
	// =========
	// EDIT
	// =========
	name: 'edit',
	icon: 'pen',
	label: 'status.edit',
	if({ status, loggedIn, currentUser, state }) {
	return (
	loggedIn &&
	- useInstanceStore().featureSet.editingAvailable &&
	+ useInstanceCapabilitiesStore().editingAvailable &&
	status.user.id === currentUser.id
	)
	},
	action({ dispatch, status }) {
	return dispatch('fetchStatusSource', { id: status.id }).then((data) =>
	useEditStatusStore().openEditStatusModal({
	statusId: status.id,
	subject: data.spoiler_text,
	statusText: data.text,
	statusIsSensitive: status.nsfw,
	statusPoll: status.poll,
	statusFiles: [...status.attachments],
	visibility: status.visibility,
	statusContentType: data.content_type,
	}),
	)
	},
	},
	{
	// =========
	// DELETE
	// =========
	name: 'delete',
	icon: 'times',
	label: 'status.delete',
	if({ status, loggedIn, currentUser }) {
	return (
	loggedIn &&
	(status.user.id === currentUser.id \|\|
	currentUser.privileges.includes('messages_delete'))
	)
	},
	confirm: ({ getters }) => getters.mergedConfig.modalOnDelete,
	confirmStrings: {
	title: 'status.delete_confirm_title',
	body: 'status.delete_confirm',
	confirm: 'status.delete_confirm_accept_button',
	cancel: 'status.delete_confirm_cancel_button',
	},
	action({ dispatch, status }) {
	return dispatch('deleteStatus', { id: status.id })
	},
	},
	{
	// =========
	// SHARE/COPY
	// =========
	name: 'share',
	icon: 'share-alt',
	label: 'status.copy_link',
	action({ state, status, router }) {
	navigator.clipboard.writeText(
	[
	useInstanceStore().server,
	router.resolve({ name: 'conversation', params: { id: status.id } })
	.href,
	].join(''),
	)
	return Promise.resolve()
	},
	},
	{
	// =========
	// EXTERNAL
	// =========
	name: 'external',
	icon: 'external-link-alt',
	label: 'status.external_source',
	link: ({ status }) => status.external_url,
	},
	{
	// =========
	// REPORT
	// =========
	name: 'report',
	icon: 'flag',
	label: 'user_card.report',
	if: ({ loggedIn }) => loggedIn,
	action({ status }) {
	return useReportsStore().openUserReportingModal({
	userId: status.user.id,
	statusIds: [status.id],
	})
	},
	},
	].map((button) => {
	return Object.fromEntries(
	Object.entries(button).map(([k, v]) => [
	k,
	typeof v === 'function' \|\| k === 'name' ? v : () => v,
	]),
	)
	})
	diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
	index ebbe803c72..b309a93ffc 100644
	--- a/src/components/timeline_menu/timeline_menu.js
	+++ b/src/components/timeline_menu/timeline_menu.js
	@@ -1,127 +1,127 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	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 BookmarkFoldersMenuContent from '../bookmark_folders_menu/bookmark_folders_menu_content.vue'
	import ListsMenuContent from '../lists_menu/lists_menu_content.vue'
	import Popover from '../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 { 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, [
	+ 'pleromaChatMessagesAvailable',
	+ 'pleromaBookmarkFoldersAvailable',
	+ 'bookmarkFolders',
	+ 'localBubble',
	+ ]),
	...mapPiniaState(useInstanceStore, ['private', 'federating']),
	- ...mapPiniaState(useInstanceStore, {
	- pleromaChatMessagesAvailable: (store) =>
	- store.featureSet.pleromaChatMessagesAvailable,
	- bookmarkFolders: (store) =>
	- store.featureSet.pleromaBookmarkFoldersAvailable,
	- bubbleTimeline: (store) => store.featureSet.localBubble,
	- }),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	timelinesList() {
	return filterNavigation(
	Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
	{
	hasChats: this.pleromaChatMessagesAvailable,
	isFederating: this.federating,
	isPrivate: this.private,
	currentUser: this.currentUser,
	- supportsBookmarkFolders: this.bookmarkFolders,
	- supportsBubbleTimeline: this.bubbleTimeline,
	+ 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/user_card/user_card.js b/src/components/user_card/user_card.js
	index 5cbb8b6d75..0df27e6cb8 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,568 +1,569 @@
	import isEqual from 'lodash/isEqual'
	import merge from 'lodash/merge'
	import ldUnescape from 'lodash/unescape'
	import { mapGetters } from 'vuex'

	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
	import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
	import suggestor from 'src/components/emoji_input/suggestor.js'
	import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
	import { useInterfaceStore } from '../../stores/interface'
	import { useMediaViewerStore } from '../../stores/media_viewer'
	import AccountActions from '../account_actions/account_actions.vue'
	import FollowButton from '../follow_button/follow_button.vue'
	import ModerationTools from '../moderation_tools/moderation_tools.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	import RemoteFollow from '../remote_follow/remote_follow.vue'
	import Select from '../select/select.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import UserLink from '../user_link/user_link.vue'
	import UserNote from '../user_note/user_note.vue'

	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { usePostStatusStore } from 'src/stores/post_status'

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

	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,
	},
	// 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,
	},
	},
	components: {
	DialogModal,
	UserAvatar,
	Checkbox,
	RemoteFollow,
	ModerationTools,
	AccountActions,
	ProgressButton,
	FollowButton,
	Select,
	RichContent,
	UserLink,
	UserNote,
	UserTimedFilterModal,
	ColorInput,
	EmojiInput,
	ImageCropper,
	},
	data() {
	const user = this.$store.getters.findUser(this.userId)

	return {
	followRequestInProgress: false,

	// Editable stuff
	editImage: false,

	newName: user.name_unescaped,
	editingName: false,

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

	newAvatar: null,
	newAvatarFile: null,

	newBanner: null,
	newBannerFile: null,

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

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

	editingFields: false,
	}
	},
	created() {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	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 useInstanceStore().featureSet.groupActorAvailable
	+ return useInstanceCapabilitiesStore().groupActorAvailable
	},
	availableActorTypes() {
	return this.groupActorAvailable
	? ['Person', 'Service', 'Group']
	: ['Person', 'Service']
	},
	user() {
	return this.$store.getters.findUser(this.userId)
	},
	role() {
	return this.user.role
	},
	relationship() {
	return this.$store.getters.relationship(this.userId)
	},
	isOtherUser() {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl() {
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn() {
	return this.$store.state.users.currentUser
	},
	dailyAvg() {
	const days = Math.ceil(
	(new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000),
	)
	return Math.round(this.user.statuses_count / days)
	},
	emoji() {
	return useEmojiStore().customEmoji.map((e) => ({
	shortcode: e.displayText,
	static_url: e.imageUrl,
	url: e.imageUrl,
	}))
	},
	userHighlightType: {
	get() {
	const data =
	this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return (data && data.type) \|\| 'disabled'
	},
	set(type) {
	const data =
	this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	if (type !== 'disabled') {
	this.$store.dispatch('setHighlight', {
	user: this.user.screen_name,
	color: (data && data.color) \|\| '#FFFFFF',
	type,
	})
	} else {
	this.$store.dispatch('setHighlight', {
	user: this.user.screen_name,
	color: undefined,
	})
	}
	},
	...mapGetters(['mergedConfig']),
	},
	userHighlightColor: {
	get() {
	const data =
	this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return data && data.color
	},
	set(color) {
	this.$store.dispatch('setHighlight', {
	user: this.user.screen_name,
	color,
	})
	},
	},
	visibleRole() {
	if (!this.newShowRole) {
	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.includes('users_manage_activation_state') \|\|
	privileges.includes('users_delete') \|\|
	privileges.includes('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' },
	)
	)
	},

	// 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().defaultAvatar
	return (
	!this.$store.state.users.currentUser.profile_image_url \|\|
	this.$store.state.users.currentUser.profile_image_url.includes(
	baseAvatar,
	)
	)
	},
	isDefaultBanner() {
	const baseBanner = useInstanceStore().defaultBanner
	return (
	!this.$store.state.users.currentUser.cover_photo \|\|
	this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
	)
	},
	fieldsLimits() {
	return useInstanceStore().limits.fieldsLimits
	},
	maxFields() {
	return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
	},
	emojiUserSuggestor() {
	return suggestor({
	emoji: [
	...this.$store.getters.standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	store: this.$store,
	})
	},
	emojiSuggestor() {
	return suggestor({
	emoji: [
	...this.$store.getters.standardEmojiList,
	...useEmojiStore().customEmoji,
	],
	})
	},
	...mapGetters(['mergedConfig']),
	},
	methods: {
	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,
	mimetype: 'image',
	}
	useMediaViewerStore().setMedia([attachment])
	useMediaViewerStore().setCurrentMedia(attachment)
	},
	mentionUser() {
	usePostStatusStore().openPostStatusModal({
	profileMention: true,
	repliedUser: this.user,
	})
	},
	onAvatarClickHandler(e) {
	if (this.onAvatarClick) {
	e.preventDefault()
	this.onAvatarClick()
	}
	},

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

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

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

	this.editImage = false
	}

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

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

	this.newAvatar = null
	this.newAvatarFile = null

	this.newBanner = null
	this.newBannerFile = null

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

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

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

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

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

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

	this.$store.state.api.backendInteractor
	.updateProfile({ params })
	.then((user) => {
	this.newFields.splice(this.newFields.length)
	merge(this.newFields, user.fields)
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	this.resetState()
	})
	.catch((error) => {
	this.displayUploadError(error)
	})
	},
	displayUploadError(error) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'upload.error.message',
	messageArgs: [error.message],
	level: 'error',
	})
	},
	},
	}
	diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
	index d40103293f..25f71fba8d 100644
	--- a/src/components/user_profile/user_profile.js
	+++ b/src/components/user_profile/user_profile.js
	@@ -1,204 +1,205 @@
	import get from 'lodash/get'

	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	import withLoadMore from '../../hocs/with_load_more/with_load_more'
	import Conversation from '../conversation/conversation.vue'
	import FollowCard from '../follow_card/follow_card.vue'
	import List from '../list/list.vue'
	import Timeline from '../timeline/timeline.vue'
	import UserCard from '../user_card/user_card.vue'

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

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

	library.add(faCircleNotch)

	const FollowerList = withLoadMore({
	fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
	select: (props, $store) =>
	get($store.getters.findUser(props.userId), 'followerIds', []).map((id) =>
	$store.getters.findUser(id),
	),
	destroy: (props, $store) => $store.dispatch('clearFollowers', props.userId),
	childPropName: 'items',
	additionalPropNames: ['userId'],
	})(List)

	const FriendList = withLoadMore({
	fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId),
	select: (props, $store) =>
	get($store.getters.findUser(props.userId), 'friendIds', []).map((id) =>
	$store.getters.findUser(id),
	),
	destroy: (props, $store) => $store.dispatch('clearFriends', props.userId),
	childPropName: 'items',
	additionalPropNames: ['userId'],
	})(List)

	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)
	},
	unmounted() {
	this.stopFetching()
	},
	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
	)
	},
	user() {
	return this.$store.getters.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 \|\|
	- (useInstanceStore().featureSet.pleromaPublicFavouritesAvailable &&
	+ (useInstanceCapabilitiesStore().pleromaPublicFavouritesAvailable &&
	!this.user.hide_favorites)
	)
	},
	},
	methods: {
	setFooterRef(el) {
	this.footerRef = el
	},
	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)
	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,
	FollowerList,
	FriendList,
	FollowCard,
	TabSwitcher,
	Conversation,
	RichContent,
	},
	}

	export default UserProfile
	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 13787000ec..e364dcf80f 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,83 +1,84 @@
	import { shuffle } from 'lodash'

	import apiService from '../../services/api/api.service.js'

	import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.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().defaultAvatar
	const name = user.acct

	toFollow.img = img
	toFollow.name = name

	panel.$store.state.api.backendInteractor
	.fetchUser({ id: name })
	.then((externalUser) => {
	if (!externalUser.error) {
	panel.$store.commit('addNewUsers', [externalUser])
	toFollow.id = externalUser.id
	}
	})
	})
	}

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

	const WhoToFollowPanel = {
	data: () => ({
	usersToFollow: [],
	}),
	computed: {
	user: function () {
	return this.$store.state.users.currentUser.screen_name
	},
	suggestionsEnabled() {
	- return useInstanceStore().featureSet.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().defaultAvatar,
	name: '',
	id: 0,
	}))
	if (this.suggestionsEnabled) {
	getWhoToFollow(this)
	}
	},
	}

	export default WhoToFollowPanel
	diff --git a/src/modules/api.js b/src/modules/api.js
	index d658433fe2..d6bf27f235 100644
	--- a/src/modules/api.js
	+++ b/src/modules/api.js
	@@ -1,364 +1,366 @@
	import { Socket } from 'phoenix'

	import { WSConnectionStatus } from '../services/api/api.service.js'
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'

	import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useShoutStore } from 'src/stores/shout.js'

	const retryTimeout = (multiplier) => 1000 * multiplier

	const api = {
	state: {
	retryMultiplier: 1,
	backendInteractor: backendInteractorService(),
	fetchers: {},
	socket: null,
	mastoUserSocket: null,
	mastoUserSocketStatus: null,
	followRequests: [],
	},
	getters: {
	followRequestCount: (state) => state.followRequests.length,
	},
	mutations: {
	setBackendInteractor(state, backendInteractor) {
	state.backendInteractor = backendInteractor
	},
	addFetcher(state, { fetcherName, fetcher }) {
	state.fetchers[fetcherName] = fetcher
	},
	removeFetcher(state, { fetcherName }) {
	state.fetchers[fetcherName].stop()
	delete state.fetchers[fetcherName]
	},
	setWsToken(state, token) {
	state.wsToken = token
	},
	setSocket(state, socket) {
	state.socket = socket
	},
	setFollowRequests(state, value) {
	state.followRequests = value
	},
	setMastoUserSocketStatus(state, value) {
	state.mastoUserSocketStatus = value
	},
	incrementRetryMultiplier(state) {
	state.retryMultiplier = Math.max(++state.retryMultiplier, 3)
	},
	resetRetryMultiplier(state) {
	state.retryMultiplier = 1
	},
	},
	actions: {
	/**
	* Global MastoAPI socket control, in future should disable ALL sockets/(re)start relevant sockets
	*
	* @param {Boolean} [initial] - whether this enabling happened at boot time or not
	*/
	enableMastoSockets(store, initial) {
	const { state, dispatch, commit } = store
	// Do not initialize unless nonexistent or closed
	if (
	state.mastoUserSocket &&
	![WebSocket.CLOSED, WebSocket.CLOSING].includes(
	state.mastoUserSocket.getState(),
	)
	) {
	return
	}
	if (initial) {
	commit('setMastoUserSocketStatus', WSConnectionStatus.STARTING_INITIAL)
	} else {
	commit('setMastoUserSocketStatus', WSConnectionStatus.STARTING)
	}
	return dispatch('startMastoUserSocket')
	},
	disableMastoSockets(store) {
	const { state, dispatch, commit } = store
	if (!state.mastoUserSocket) return
	commit('setMastoUserSocketStatus', WSConnectionStatus.DISABLED)
	return dispatch('stopMastoUserSocket')
	},

	// MastoAPI 'User' sockets
	startMastoUserSocket(store) {
	return new Promise((resolve, reject) => {
	try {
	const { state, commit, dispatch, rootState } = store
	const timelineData = rootState.statuses.timelines.friends
	state.mastoUserSocket = state.backendInteractor.startUserSocket({
	store,
	})
	state.mastoUserSocket.addEventListener(
	'pleroma:authenticated',
	() => {
	state.mastoUserSocket.subscribe('user')
	},
	)
	state.mastoUserSocket.addEventListener(
	'message',
	({ detail: message }) => {
	if (!message) return // pings
	if (message.event === 'notification') {
	dispatch('addNewNotifications', {
	notifications: [message.notification],
	older: false,
	})
	} else if (message.event === 'update') {
	dispatch('addNewStatuses', {
	statuses: [message.status],
	userId: false,
	showImmediately: timelineData.visibleStatuses.length === 0,
	timeline: 'friends',
	})
	} else if (message.event === 'status.update') {
	dispatch('addNewStatuses', {
	statuses: [message.status],
	userId: false,
	showImmediately:
	message.status.id in timelineData.visibleStatusesObject,
	timeline: 'friends',
	})
	} else if (message.event === 'delete') {
	dispatch('deleteStatusById', message.id)
	} else if (message.event === 'pleroma:chat_update') {
	// The setTimeout wrapper is a temporary band-aid to avoid duplicates for the user's own messages when doing optimistic sending.
	// The cause of the duplicates is the WS event arriving earlier than the HTTP response.
	// This setTimeout wrapper can be removed once the commit `8e41baff` is in the stable Pleroma release.
	// (`8e41baff` adds the idempotency key to the chat message entity, which PleromaFE uses when it's available, and it makes this artificial delay unnecessary).
	setTimeout(() => {
	dispatch('addChatMessages', {
	chatId: message.chatUpdate.id,
	messages: [message.chatUpdate.lastMessage],
	})
	dispatch('updateChat', { chat: message.chatUpdate })
	maybeShowChatNotification(store, message.chatUpdate)
	}, 100)
	}
	},
	)
	state.mastoUserSocket.addEventListener('open', () => {
	// Do not show notification when we just opened up the page
	if (
	state.mastoUserSocketStatus !==
	WSConnectionStatus.STARTING_INITIAL
	) {
	useInterfaceStore().pushGlobalNotice({
	level: 'success',
	messageKey: 'timeline.socket_reconnected',
	timeout: 5000,
	})
	}
	// Stop polling if we were errored or disabled
	if (
	new Set([
	WSConnectionStatus.ERROR,
	WSConnectionStatus.DISABLED,
	]).has(state.mastoUserSocketStatus)
	) {
	dispatch('stopFetchingTimeline', { timeline: 'friends' })
	dispatch('stopFetchingNotifications')
	dispatch('stopFetchingChats')
	}
	commit('resetRetryMultiplier')
	commit('setMastoUserSocketStatus', WSConnectionStatus.JOINED)
	})
	state.mastoUserSocket.addEventListener(
	'error',
	({ detail: error }) => {
	console.error('Error in MastoAPI websocket:', error)
	// TODO is this needed?
	dispatch('clearOpenedChats')
	},
	)
	state.mastoUserSocket.addEventListener(
	'close',
	({ detail: closeEvent }) => {
	const ignoreCodes = new Set([
	1000, // Normal (intended) closure
	1001, // Going away
	])
	const { code } = closeEvent
	if (ignoreCodes.has(code)) {
	console.debug(
	`Not restarting socket becasue of closure code ${code} is in ignore list`,
	)
	commit('setMastoUserSocketStatus', WSConnectionStatus.CLOSED)
	} else {
	console.warn(
	`MastoAPI websocket disconnected, restarting. CloseEvent code: ${code}`,
	)
	setTimeout(() => {
	dispatch('startMastoUserSocket')
	}, retryTimeout(state.retryMultiplier))
	commit('incrementRetryMultiplier')
	if (state.mastoUserSocketStatus !== WSConnectionStatus.ERROR) {
	dispatch('startFetchingTimeline', { timeline: 'friends' })
	dispatch('startFetchingNotifications')
	dispatch('startFetchingChats')
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'timeline.socket_broke',
	messageArgs: [code],
	timeout: 5000,
	})
	}
	commit('setMastoUserSocketStatus', WSConnectionStatus.ERROR)
	}
	dispatch('clearOpenedChats')
	},
	)
	resolve()
	} catch (e) {
	reject(e)
	}
	})
	},
	stopMastoUserSocket({ state, dispatch }) {
	dispatch('startFetchingTimeline', { timeline: 'friends' })
	dispatch('startFetchingNotifications')
	dispatch('startFetchingChats')
	state.mastoUserSocket.close()
	},

	// Timelines
	startFetchingTimeline(
	store,
	{
	timeline = 'friends',
	tag = false,
	userId = false,
	listId = false,
	statusId = false,
	bookmarkFolderId = false,
	},
	) {
	if (
	timeline === 'favourites' &&
	- !useInstanceStore().featureSet.pleromaPublicFavouritesAvailable
	+ !useInstanceCapabilitiesStore().pleromaPublicFavouritesAvailable
	)
	return
	if (store.state.fetchers[timeline]) return

	const fetcher = store.state.backendInteractor.startFetchingTimeline({
	timeline,
	store,
	userId,
	listId,
	statusId,
	bookmarkFolderId,
	tag,
	})
	store.commit('addFetcher', { fetcherName: timeline, fetcher })
	},
	stopFetchingTimeline(store, timeline) {
	const fetcher = store.state.fetchers[timeline]
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: timeline, fetcher })
	},
	fetchTimeline(store, { timeline, ...rest }) {
	store.state.backendInteractor.fetchTimeline({
	store,
	timeline,
	...rest,
	})
	},

	// Notifications
	startFetchingNotifications(store) {
	if (store.state.fetchers.notifications) return
	const fetcher = store.state.backendInteractor.startFetchingNotifications({
	store,
	})
	store.commit('addFetcher', { fetcherName: 'notifications', fetcher })
	},
	stopFetchingNotifications(store) {
	const fetcher = store.state.fetchers.notifications
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'notifications', fetcher })
	},
	fetchNotifications(store, { ...rest }) {
	store.state.backendInteractor.fetchNotifications({
	store,
	...rest,
	})
	},

	// Follow requests
	startFetchingFollowRequests(store) {
	if (store.state.fetchers.followRequests) return
	const fetcher = store.state.backendInteractor.startFetchingFollowRequests(
	{ store },
	)

	store.commit('addFetcher', { fetcherName: 'followRequests', fetcher })
	},
	stopFetchingFollowRequests(store) {
	const fetcher = store.state.fetchers.followRequests
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'followRequests', fetcher })
	},
	removeFollowRequest(store, request) {
	const requests = store.state.followRequests.filter((it) => it !== request)
	store.commit('setFollowRequests', requests)
	},

	// Lists
	startFetchingLists(store) {
	if (store.state.fetchers.lists) return
	const fetcher = store.state.backendInteractor.startFetchingLists({
	store,
	})
	store.commit('addFetcher', { fetcherName: 'lists', fetcher })
	},
	stopFetchingLists(store) {
	const fetcher = store.state.fetchers.lists
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'lists', fetcher })
	},

	// Bookmark folders
	startFetchingBookmarkFolders(store) {
	if (store.state.fetchers.bookmarkFolders) return
	- if (!useInstanceStore().featureSet.pleromaBookmarkFoldersAvailable) return
	+ if (!useInstanceCapabilitiesStore().pleromaBookmarkFoldersAvailable)
	+ return
	const fetcher =
	store.state.backendInteractor.startFetchingBookmarkFolders({ store })
	store.commit('addFetcher', { fetcherName: 'bookmarkFolders', fetcher })
	},
	stopFetchingBookmarkFolders(store) {
	const fetcher = store.state.fetchers.bookmarkFolders
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'bookmarkFolders', fetcher })
	},

	// Pleroma websocket
	setWsToken(store, token) {
	store.commit('setWsToken', token)
	},
	initializeSocket({ commit, state, rootState }) {
	// Set up websocket connection
	const token = state.wsToken
	if (
	useInstanceStore().shoutAvailable &&
	typeof token !== 'undefined' &&
	state.socket === null
	) {
	const socket = new Socket('/socket', { params: { token } })
	socket.connect()

	commit('setSocket', socket)
	useShoutStore().initializeShout(socket)
	}
	},
	disconnectFromSocket({ commit, state }) {
	state.socket && state.socket.disconnect()
	commit('setSocket', null)
	},
	},
	}

	export default api
	diff --git a/src/modules/config.js b/src/modules/config.js
	index 508ddafc6e..82acf81625 100644
	--- a/src/modules/config.js
	+++ b/src/modules/config.js
	@@ -1,201 +1,200 @@
	import Cookies from 'js-cookie'
	import { set } from 'lodash'

	import messages from '../i18n/messages'
	import localeService from '../services/locale/locale.service.js'
	import { applyConfig } from '../services/style_setter/style_setter.js'
	import { defaultState, instanceDefaultConfig } from './default_config_state.js'

	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useI18nStore } from 'src/stores/i18n.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInterfaceStore } from 'src/stores/interface.js'

	const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
	const APPEARANCE_SETTINGS_KEYS = new Set([
	'sidebarColumnWidth',
	'contentColumnWidth',
	'notifsColumnWidth',
	'themeEditorMinWidth',
	'textSize',
	'navbarSize',
	'panelHeaderSize',
	'forcedRoundness',
	'emojiSize',
	'emojiReactionsScale',
	])

	/* TODO this is a bit messy.
	* We need to declare settings with their types and also deal with
	* instance-default settings in some way, hopefully try to avoid copy-pasta
	* in general.
	*/
	export const multiChoiceProperties = [
	'postContentType',
	'subjectLineBehavior',
	'conversationDisplay', // tree \| linear
	'conversationOtherRepliesButton', // below \| inside
	'mentionLinkDisplay', // short \| full_for_remote \| full
	'userPopoverAvatarAction', // close \| zoom \| open
	'unsavedPostAction', // save \| discard \| confirm
	]

	// caching the instance default properties
	export const instanceDefaultProperties = Object.keys(instanceDefaultConfig)

	const config = {
	state: { ...defaultState },
	getters: {
	defaultConfig() {
	return {
	...defaultState,
	...Object.fromEntries(
	instanceDefaultProperties.map((key) => [
	key,
	useInstanceStore().prefsStorage[key],
	]),
	),
	}
	},
	mergedConfig(state) {
	const instancePrefs = useInstanceStore().prefsStorage
	- console.log(state)
	const result = Object.fromEntries(
	Object.keys(defaultState).map((key) => [
	key,
	state[key] ?? instancePrefs[key],
	]),
	)
	return result
	},
	},
	mutations: {
	setOptionTemporarily(state, { name, value }) {
	set(state, name, value)
	applyConfig(state)
	},
	setOption(state, { name, value }) {
	set(state, name, value)
	},
	setHighlight(state, { user, color, type }) {
	const data = this.state.config.highlight[user]
	if (color \|\| type) {
	state.highlight[user] = {
	color: color \|\| data.color,
	type: type \|\| data.type,
	}
	} else {
	delete state.highlight[user]
	}
	},
	},
	actions: {
	loadSettings({ dispatch }, data) {
	const knownKeys = new Set(Object.keys(defaultState))
	const presentKeys = new Set(Object.keys(data))
	const intersection = new Set()
	for (const elem of presentKeys) {
	if (knownKeys.has(elem)) {
	intersection.add(elem)
	}
	}

	intersection.forEach((name) =>
	dispatch('setOption', { name, value: data[name] }),
	)
	},
	setHighlight({ commit }, { user, color, type }) {
	commit('setHighlight', { user, color, type })
	},
	setOptionTemporarily({ commit, dispatch, state }, { name, value }) {
	if (useInterfaceStore().temporaryChangesTimeoutId !== null) {
	console.warn("Can't track more than one temporary change")
	return
	}
	const oldValue = state[name]

	commit('setOptionTemporarily', { name, value })

	const confirm = () => {
	dispatch('setOption', { name, value })
	useInterfaceStore().clearTemporaryChanges()
	}

	const revert = () => {
	commit('setOptionTemporarily', { name, value: oldValue })
	useInterfaceStore().clearTemporaryChanges()
	}

	useInterfaceStore().setTemporaryChanges({
	confirm,
	revert,
	})
	},
	setThemeV2({ commit, dispatch }, { customTheme, customThemeSource }) {
	commit('setOption', { name: 'theme', value: 'custom' })
	commit('setOption', { name: 'customTheme', value: customTheme })
	commit('setOption', {
	name: 'customThemeSource',
	value: customThemeSource,
	})
	dispatch('setTheme', { themeData: customThemeSource, recompile: true })
	},
	setOption({ commit, dispatch, state }, { name, value }) {
	const exceptions = new Set(['useStreamingApi'])

	if (exceptions.has(name)) {
	switch (name) {
	case 'useStreamingApi': {
	const action = value ? 'enableMastoSockets' : 'disableMastoSockets'

	dispatch(action)
	.then(() => {
	commit('setOption', { name: 'useStreamingApi', value })
	})
	.catch((e) => {
	console.error('Failed starting MastoAPI Streaming socket', e)
	dispatch('disableMastoSockets')
	dispatch('setOption', { name: 'useStreamingApi', value: false })
	})
	break
	}
	}
	} else {
	commit('setOption', { name, value })
	if (APPEARANCE_SETTINGS_KEYS.has(name)) {
	applyConfig(state)
	}
	if (name.startsWith('theme3hacks')) {
	dispatch('applyTheme', { recompile: true })
	}
	switch (name) {
	case 'theme':
	if (value === 'custom') break
	dispatch('setTheme', {
	themeName: value,
	recompile: true,
	saveData: true,
	})
	break
	case 'themeDebug': {
	dispatch('setTheme', { recompile: true })
	break
	}
	case 'interfaceLanguage':
	messages.setLanguage(useI18nStore().i18n, value)
	useEmojiStore().loadUnicodeEmojiData(value)
	Cookies.set(
	BACKEND_LANGUAGE_COOKIE_NAME,
	localeService.internalToBackendLocaleMulti(value),
	)
	break
	case 'thirdColumnMode':
	useInterfaceStore().setLayoutWidth(undefined)
	break
	}
	}
	},
	},
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	logout(store) {
	const oauth = useOAuthStore()

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

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

	useServerSideStorageStore().setServerSideStorage(user)
	commit('addNewUsers', [user])

	useEmojiStore().fetchEmoji()

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

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

	// Do server-side storage migrations

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

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

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

	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 (
	- useInstanceStore().featureSet.pleromaChatMessagesAvailable
	+ useInstanceCapabilitiesStore().pleromaChatMessagesAvailable
	) {
	// Start fetching chats
	dispatch('startFetchingChats')
	}
	}

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

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

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

	// Get user mutes
	dispatch('fetchMutes')

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

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

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

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

	export default users
	diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
	index f82f981301..73411b6a53 100644
	--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
	+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
	@@ -1,130 +1,131 @@
	import apiService from '../api/api.service.js'
	import { promiseInterval } from '../promise_interval/promise_interval.js'

	import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'

	const update = ({ store, notifications, older }) => {
	store.dispatch('addNewNotifications', { notifications, older })
	}
	//
	// For using include_types when fetching notifications.
	// Note: chat_mention excluded as pleroma-fe polls them separately
	const mastoApiNotificationTypes = new Set([
	'mention',
	'status',
	'favourite',
	'reblog',
	'follow',
	'follow_request',
	'move',
	'poll',
	'pleroma:emoji_reaction',
	'pleroma:report',
	])

	const fetchAndUpdate = ({ store, credentials, older = false, since }) => {
	const args = { credentials }
	const { getters } = store
	const rootState = store.rootState \|\| store.state
	const timelineData = rootState.notifications
	const hideMutedPosts = getters.mergedConfig.hideMutedPosts

	- if (useInstanceStore().featureSet.pleromaChatMessagesAvailable) {
	+ if (useInstanceCapabilitiesStore().pleromaChatMessagesAvailable) {
	mastoApiNotificationTypes.add('pleroma:chat_mention')
	}

	args.includeTypes = mastoApiNotificationTypes
	args.withMuted = !hideMutedPosts

	args.timeline = 'notifications'
	if (older) {
	if (timelineData.minId !== Number.POSITIVE_INFINITY) {
	args.until = timelineData.minId
	}
	return fetchNotifications({ store, args, older })
	} else {
	// fetch new notifications
	if (
	since === undefined &&
	timelineData.maxId !== Number.POSITIVE_INFINITY
	) {
	args.since = timelineData.maxId
	} else if (since !== null) {
	args.since = since
	}
	const result = fetchNotifications({ store, args, older })

	// If there's any unread notifications, try fetch notifications since
	// the newest read notification to check if any of the unread notifs
	// have changed their 'seen' state (marked as read in another session), so
	// we can update the state in this session to mark them as read as well.
	// The normal maxId-check does not tell if older notifications have changed
	const notifications = timelineData.data
	const readNotifsIds = notifications.filter((n) => n.seen).map((n) => n.id)
	const unreadNotifsIds = notifications
	.filter((n) => !n.seen)
	.map((n) => n.id)
	if (readNotifsIds.length > 0 && readNotifsIds.length > 0) {
	const minId = Math.min(...unreadNotifsIds) // Oldest known unread notification
	if (minId !== Infinity) {
	args.since = false // Don't use since_id since it sorta conflicts with min_id
	args.minId = minId - 1 // go beyond
	fetchNotifications({ store, args, older })
	}
	}

	return result
	}
	}

	const fetchNotifications = ({ store, args, older }) => {
	return apiService
	.fetchTimeline(args)
	.then((response) => {
	if (response.errors) {
	if (
	response.status === 400 &&
	response.statusText.includes('Invalid value for enum')
	) {
	response.statusText
	.matchAll(/(\w+) - Invalid value for enum./g)
	.toArray()
	.map((x) => x[1])
	.forEach((x) => mastoApiNotificationTypes.delete(x))
	return fetchNotifications({ store, args, older })
	} else {
	throw new Error(`${response.status} ${response.statusText}`)
	}
	}
	const notifications = response.data
	update({ store, notifications, older })
	return notifications
	})
	.catch((error) => {
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'notifications.error',
	messageArgs: [error.message],
	timeout: 5000,
	})
	console.error(error)
	})
	}

	const startFetching = ({ credentials, store }) => {
	// Initially there's set flag to silence all desktop notifications so
	// that there won't spam of them when user just opened up the FE we
	// reset that flag after a while to show new notifications once again.
	setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000)
	const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
	boundFetchAndUpdate()
	return promiseInterval(boundFetchAndUpdate, 10000)
	}

	const notificationsFetcher = {
	fetchAndUpdate,
	startFetching,
	}

	export default notificationsFetcher
	diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
	index 0d993a1e33..da62f8b37b 100644
	--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
	+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
	@@ -1,162 +1,163 @@
	import { camelCase } from 'lodash'

	import apiService from '../api/api.service.js'
	import { promiseInterval } from '../promise_interval/promise_interval.js'

	import { useInstanceStore } from 'src/stores/instance.js'
	+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.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 = false,
	listId = false,
	statusId = false,
	bookmarkFolderId = false,
	tag = false,
	until,
	since,
	}) => {
	const args = { timeline, credentials }
	const rootState = store.rootState \|\| store.state
	const { getters } = store
	const timelineData = rootState.statuses.timelines[camelCase(timeline)]
	const { hideMutedPosts, replyVisibility } = getters.mergedConfig
	const loggedIn = !!rootState.users.currentUser

	if (older) {
	args.until = until \|\| timelineData.minId
	} else {
	if (since === undefined) {
	args.since = timelineData.maxId
	} else if (since !== null) {
	args.since = since
	}
	}

	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 apiService
	.fetchTimeline(args)
	.then((response) => {
	if (response.errors) {
	if (timeline === 'favorites') {
	- useInstanceStore().featureSet.pleromaPublicFavouritesAvailable = false
	+ useInstanceCapabilitiesStore().pleromaPublicFavouritesAvailable = false
	return
	}
	throw new Error(`${response.status} ${response.statusText}`)
	}

	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) => {
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'timeline.error',
	messageArgs: [error.message],
	timeout: 5000,
	})
	})
	}

	const startFetching = ({
	timeline = 'friends',
	credentials,
	store,
	userId = false,
	listId = false,
	statusId = false,
	bookmarkFolderId = false,
	tag = false,
	}) => {
	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/instance.js b/src/stores/instance.js
	index 87bb00d12f..8caca35520 100644
	--- a/src/stores/instance.js
	+++ b/src/stores/instance.js
	@@ -1,155 +1,123 @@
	import { get, set } from 'lodash'
	import { defineStore } from 'pinia'

	import { instanceDefaultProperties } from '../modules/config.js'
	import {
	instanceDefaultConfig,
	staticOrApiConfigDefault,
	} from '../modules/default_config_state.js'
	import apiService from '../services/api/api.service.js'

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

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

	const REMOTE_INTERACTION_URL = '/main/ostatus'

	const defaultState = {
	// Stuff from apiConfig
	name: 'Pleroma FE',
	registrationOpen: true,
	server: 'http://localhost:4040/',
	textlimit: 5000,
	private: false,
	federating: true,
	federationPolicy: null,
	themesIndex: null,
	stylesIndex: null,
	palettesIndex: null,
	themeData: null, // used for theme editor v2
	vapidPublicKey: null,

	// Stuff from static/config.json
	loginMethod: 'password',
	disableUpdateNotification: false,

	// Instance-wide configurations that should not be changed by individual users
	instanceIdentity: {
	...staticOrApiConfigDefault,
	},

	limits: {
	bannerlimit: null,
	avatarlimit: null,
	backgroundlimit: null,
	uploadlimit: null,
	fieldsLimits: 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: {
	...instanceDefaultConfig,
	},

	// Known domains list for user's domain-muting
	knownDomains: [],

	// Moderation stuff
	staffAccounts: [],
	accountActivationRequired: null,
	accountApprovalRequired: null,
	birthdayRequired: false,
	birthdayMinAge: 0,
	restrictedNicknames: [],
	localBubbleInstances: [], // Akkoma

	- // Feature-set, apparently, not everything here is reported...
	- featureSet: {
	- postFormats: [],
	- mailerEnabled: false,
	- safeDM: true,
	- shoutAvailable: false,
	- pleromaExtensionsAvailable: true,
	- pleromaChatMessagesAvailable: false,
	- pleromaCustomEmojiReactionsAvailable: false,
	- pleromaBookmarkFoldersAvailable: false,
	- pleromaPublicFavouritesAvailable: true,
	- statusNotificationTypeAvailable: true,
	- gopherAvailable: false,
	- editingAvailable: false,
	- mediaProxyAvailable: false,
	- suggestionsEnabled: false,
	- suggestionsWeb: '',
	- quotingAvailable: false,
	- groupActorAvailable: false,
	- blockExpiration: false,
	- tagPolicyAvailable: false,
	- pollsAvailable: false,
	- localBubble: false, // Akkoma
	- },
	-
	// Version Information
	backendVersion: '',
	backendRepository: '',
	frontendVersion: '',
	}

	export const useInstanceStore = defineStore('instance', {
	state: () => ({ ...defaultState }),
	getters: {
	instanceDefaultConfig(state) {
	return instanceDefaultProperties
	.map((key) => [key, state[key]])
	.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
	},
	instanceDomain(state) {
	return new URL(this.server).hostname
	},
	},
	actions: {
	set({ path, name, value }) {
	if (get(defaultState, path ?? name) === undefined)
	console.error(
	`Unknown instance option ${path ?? name}, value: ${value}`,
	)
	+
	set(this, path ?? name, value)
	- switch (name) {
	- case 'name':
	- useInterfaceStore().setPageTitle()
	- break
	- case 'shoutAvailable':
	- if (value) {
	- window.vuex.dispatch('initializeSocket')
	- }
	- break
	- }
	+
	+ if ((path ?? name) === 'name') useInterfaceStore().setPageTitle()
	},
	async getKnownDomains() {
	try {
	this.knownDomains = await apiService.fetchKnownDomains({
	credentials: window.vuex.state.users.currentUser.credentials,
	})
	} 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/instance_capabilities.js b/src/stores/instance_capabilities.js
	new file mode 100644
	index 0000000000..35d4721782
	--- /dev/null
	+++ b/src/stores/instance_capabilities.js
	@@ -0,0 +1,47 @@
	+import { defineStore } from 'pinia'
	+
	+const defaultState = {
	+ postFormats: [],
	+ mailerEnabled: false,
	+ safeDM: true,
	+ shoutAvailable: false,
	+ pleromaExtensionsAvailable: true,
	+ pleromaChatMessagesAvailable: false,
	+ pleromaCustomEmojiReactionsAvailable: false,
	+ pleromaBookmarkFoldersAvailable: false,
	+ pleromaPublicFavouritesAvailable: true,
	+ statusNotificationTypeAvailable: true,
	+ gopherAvailable: false,
	+ editingAvailable: false,
	+ mediaProxyAvailable: false,
	+ suggestionsEnabled: false,
	+ suggestionsWeb: '',
	+ quotingAvailable: false,
	+ groupActorAvailable: false,
	+ blockExpiration: false,
	+ tagPolicyAvailable: false,
	+ pollsAvailable: false,
	+ localBubble: false, // Akkoma
	+}
	+
	+export const useInstanceCapabilitiesStore = defineStore(
	+ 'instance-capabilities',
	+ {
	+ state: () => ({ ...defaultState }),
	+ actions: {
	+ set(capability, value) {
	+ if (!Object.hasOwn(defaultState, capability)) {
	+ console.error(
	+ `Unknown instance capability ${capability}, value: ${value}`,
	+ )
	+ }
	+
	+ this[capability] = value
	+
	+ if (capability === 'shoutAvailable') {
	+ window.vuex.dispatch('initializeSocket')
	+ }
	+ },
	+ },
	+ },
	+)

File Metadata

Mime Type: text/x-diff
Expires: Sun, Aug 30, 4:37 PM (1 d, 16 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1738069
Default Alt Text: (305 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions