No OneTemporary
Actions

Size

228 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.js b/src/App.js
	index 271e14913d..183b7cc0bb 100644
	--- a/src/App.js
	+++ b/src/App.js
	@@ -1,291 +1,292 @@
	import { throttle } from 'lodash'
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import DesktopNav from './components/desktop_nav/desktop_nav.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 SideDrawer from './components/side_drawer/side_drawer.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 { useEmojiStore } from 'src/stores/emoji.js'
	import { useI18nStore } from 'src/stores/i18n.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useShoutStore } from 'src/stores/shout.js'

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

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

	export default {
	name: 'app',
	components: {
	UserPanel,
	NavPanel,
	Notifications: defineAsyncComponent(
	() => import('./components/notifications/notifications.vue'),
	),
	InstanceSpecificPanel,
	FeaturesPanel,
	WhoToFollowPanel,
	ShoutPanel: defineAsyncComponent(
	() => import('src/components/shout_panel/shout_panel.vue'),
	),
	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: defineAsyncComponent(
	- () => import( './components/edit_status_modal/edit_status_modal.vue'),
	+ () => import('./components/edit_status_modal/edit_status_modal.vue'),
	),
	StatusHistoryModal: defineAsyncComponent(
	- () => import( './components/status_history_modal/status_history_modal.vue'),
	+ () =>
	+ import('./components/status_history_modal/status_history_modal.vue'),
	),
	GlobalNoticeList,
	},
	data: () => ({
	mobileActivePanel: 'timeline',
	}),
	provide() {
	return {
	allowNonSquareEmoji: useMergedConfigStore().mergedConfig.nonSquareEmoji,
	}
	},
	watch: {
	themeApplied() {
	this.removeSplash()
	},
	currentTheme() {
	this.setThemeBodyClass()
	},
	layoutType() {
	document.getElementById('modal').classList = ['-' + this.layoutType]
	},
	},
	created() {
	// Load the locale from the storage
	const value = useMergedConfigStore().mergedConfig.interfaceLanguage
	useI18nStore().setLanguage(value)
	useEmojiStore().loadUnicodeEmojiData(value)

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

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

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

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

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

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

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

	// remove old theme reference if there are any
	if (oldTheme.length) {
	document.body.classList.replace(oldTheme[0], newTheme)
	} else {
	document.body.classList.add(newTheme)
	}
	} else {
	// remove theme reference if non-V3 theme is used
	document.body.classList.remove(...oldTheme)
	}
	},
	removeSplash() {
	document.querySelector('#status').textContent = this.$t(
	'splash.fun_' + Math.ceil(Math.random() * 4),
	)
	const splashscreenRoot = document.querySelector('#splash')
	splashscreenRoot.addEventListener('transitionend', () => {
	splashscreenRoot.remove()
	})
	setTimeout(() => {
	splashscreenRoot.remove() // forcibly remove it, should fix my plasma browser widget t. HJ
	}, 600)
	splashscreenRoot.classList.add('hidden')
	document.querySelector('#app').classList.remove('hidden')
	},
	},
	}
	diff --git a/src/boot/routes.js b/src/boot/routes.js
	index b6ff1e193e..4a075e955c 100644
	--- a/src/boot/routes.js
	+++ b/src/boot/routes.js
	@@ -1,301 +1,308 @@
	+import { defineAsyncComponent } from 'vue'
	+
	import BookmarkTimeline from 'src/components/bookmark_timeline/bookmark_timeline.vue'
	import BubbleTimeline from 'src/components/bubble_timeline/bubble_timeline.vue'
	import ConversationPage from 'src/components/conversation-page/conversation-page.vue'
	import DMs from 'src/components/dm_timeline/dm_timeline.vue'
	import FriendsTimeline from 'src/components/friends_timeline/friends_timeline.vue'
	+import NavPanel from 'src/components/nav_panel/nav_panel.vue'
	import PublicAndExternalTimeline from 'src/components/public_and_external_timeline/public_and_external_timeline.vue'
	import PublicTimeline from 'src/components/public_timeline/public_timeline.vue'
	+import QuotesTimeline from 'src/components/quotes_timeline/quotes_timeline.vue'
	import RemoteUserResolver from 'src/components/remote_user_resolver/remote_user_resolver.vue'
	import TagTimeline from 'src/components/tag_timeline/tag_timeline.vue'
	-import { defineAsyncComponent } from 'vue'
	-
	-import NavPanel from 'src/components/nav_panel/nav_panel.vue'
	-import QuotesTimeline from 'src/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: defineAsyncComponent(
	() => import('src/components/user_profile/user_profile.vue'),
	),
	},
	{
	name: 'interactions',
	path: '/users/:username/interactions',
	component: defineAsyncComponent(
	() => import('src/components/interactions/interactions.vue'),
	),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'dms',
	path: '/users/:username/dms',
	component: DMs,
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'registration',
	path: '/registration',
	component: defineAsyncComponent(
	() => import('src/components/registration/registration.vue'),
	),
	},
	{
	name: 'password-reset',
	path: '/password-reset',
	component: defineAsyncComponent(
	() => import('src/components/password_reset/password_reset.vue'),
	),
	props: true,
	},
	{
	name: 'registration-token',
	path: '/registration/:token',
	component: defineAsyncComponent(
	() => import('src/components/registration/registration.vue'),
	),
	},
	{
	name: 'friend-requests',
	path: '/friend-requests',
	component: defineAsyncComponent(
	() => import('src/components/follow_requests/follow_requests.vue'),
	),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'notifications',
	path: '/:username/notifications',
	component: defineAsyncComponent(
	() => import('src/components/notifications/notifications.vue'),
	),
	props: () => ({ disableTeleport: true }),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'login',
	path: '/login',
	component: defineAsyncComponent(
	- () => import( 'src/components/auth_form/auth_form.js'),
	+ () => import('src/components/auth_form/auth_form.js'),
	),
	},
	{
	name: 'shout-panel',
	path: '/shout-panel',
	component: defineAsyncComponent(
	- () => import( 'src/components/shout_panel/shout_panel.vue'),
	+ () => import('src/components/shout_panel/shout_panel.vue'),
	),
	props: () => ({ floating: false }),
	},
	{
	name: 'oauth-callback',
	path: '/oauth-callback',
	component: defineAsyncComponent(
	() => import('src/components/oauth_callback/oauth_callback.vue'),
	),
	props: (route) => ({ code: route.query.code }),
	},
	{
	name: 'search',
	path: '/search',
	component: defineAsyncComponent(
	- () => import( 'src/components/search/search.vue'),
	+ () => import('src/components/search/search.vue'),
	),
	props: (route) => ({ query: route.query.query }),
	},
	{
	name: 'who-to-follow',
	path: '/who-to-follow',
	component: defineAsyncComponent(
	- () => import( 'src/components/who_to_follow/who_to_follow.vue'),
	+ () => import('src/components/who_to_follow/who_to_follow.vue'),
	),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'about',
	path: '/about',
	component: defineAsyncComponent(
	- () => import( 'src/components/about/about.vue'),
	+ () => import('src/components/about/about.vue'),
	),
	},
	{
	name: 'announcements',
	path: '/announcements',
	component: defineAsyncComponent(
	- () => import( 'src/components/announcements_page/announcements_page.vue'),
	+ () =>
	+ import('src/components/announcements_page/announcements_page.vue'),
	),
	},
	{
	name: 'drafts',
	path: '/drafts',
	component: defineAsyncComponent(
	- () => import( 'src/components/drafts/drafts.vue'),
	+ () => import('src/components/drafts/drafts.vue'),
	),
	},
	{
	name: 'user-profile',
	path: '/users/:name',
	component: defineAsyncComponent(
	() => import('src/components/user_profile/user_profile.vue'),
	),
	},
	{
	name: 'legacy-user-profile',
	path: '/:name',
	component: defineAsyncComponent(
	() => import('src/components/user_profile/user_profile.vue'),
	),
	},
	{
	name: 'lists',
	path: '/lists',
	component: defineAsyncComponent(
	- () => import( 'src/components/lists/lists.vue'),
	+ () => import('src/components/lists/lists.vue'),
	),
	},
	{
	name: 'lists-timeline',
	path: '/lists/:id',
	component: defineAsyncComponent(
	- () => import( 'src/components/lists_timeline/lists_timeline.vue'),
	+ () => import('src/components/lists_timeline/lists_timeline.vue'),
	),
	},
	{
	name: 'lists-edit',
	path: '/lists/:id/edit',
	component: defineAsyncComponent(
	- () => import( 'src/components/lists_edit/lists_edit.vue'),
	+ () => import('src/components/lists_edit/lists_edit.vue'),
	),
	},
	{
	name: 'lists-new',
	path: '/lists/new',
	component: defineAsyncComponent(
	- () => import( 'src/components/lists_edit/lists_edit.vue'),
	+ () => import('src/components/lists_edit/lists_edit.vue'),
	),
	},
	{
	name: 'edit-navigation',
	path: '/nav-edit',
	component: NavPanel,
	props: () => ({ forceExpand: true, forceEditMode: true }),
	beforeEnter: validateAuthenticatedRoute,
	},
	{
	name: 'bookmark-folders',
	path: '/bookmark_folders',
	component: defineAsyncComponent(
	- () => import( 'src/components/bookmark_folders/bookmark_folders.vue'),
	+ () => import('src/components/bookmark_folders/bookmark_folders.vue'),
	),
	},
	{
	name: 'bookmark-folder-new',
	path: '/bookmarks/new-folder',
	component: defineAsyncComponent(
	- () => import( 'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'),
	+ () =>
	+ import(
	+ 'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'
	+ ),
	),
	},
	{
	name: 'bookmark-folder',
	path: '/bookmarks/:id',
	component: BookmarkTimeline,
	},
	{
	name: 'bookmark-folder-edit',
	path: '/bookmarks/:id/edit',
	component: defineAsyncComponent(
	- () => import( 'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'),
	+ () =>
	+ import(
	+ 'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'
	+ ),
	),
	},
	]

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

	return routes
	}
	diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
	index f204adbdea..2f8f707649 100644
	--- a/src/components/account_actions/account_actions.js
	+++ b/src/components/account_actions/account_actions.js
	@@ -1,105 +1,108 @@
	import { mapState } from 'pinia'
	+import { defineAsyncComponent } from 'vue'

	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 { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.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,
	+ ConfirmModal: defineAsyncComponent(
	+ () => import('src/components/confirm_modal/confirm_modal.vue'),
	+ ),
	+
	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 useMergedConfigStore().mergedConfig.modalOnBlock
	},
	shouldConfirmRemoveUserFromFollowers() {
	return useMergedConfigStore().mergedConfig.modalOnRemoveUserFromFollowers
	},
	...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 94cb91ee0e..0c93872de6 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
	+ <ConfirmModal
	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>
	+ </ConfirmModal>
	</teleport>
	<teleport to="#modal">
	- <confirm-modal
	+ <ConfirmModal
	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>
	+ </ConfirmModal>
	<UserTimedFilterModal
	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 610a5494b3..1aaee85a10 100644
	--- a/src/components/attachment/attachment.js
	+++ b/src/components/attachment/attachment.js
	@@ -1,221 +1,219 @@
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import nsfwImage from '../../assets/nsfw.png'
	import Popover from '../popover/popover.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 { useMergedConfigStore } from 'src/stores/merged_config.js'

	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: useMergedConfigStore().mergedConfig.hideNsfw,
	preloadImage: useMergedConfigStore().mergedConfig.preloadImage,
	loading: false,
	img: this.attachment.type === 'image' && document.createElement('img'),
	modalOpen: false,
	showHidden: false,
	flashLoaded: false,
	}
	},
	components: {
	- Flash: defineAsyncComponent(
	- () => import( 'src/components/flash/flash.vue'),
	- ),
	+ Flash: defineAsyncComponent(() => import('src/components/flash/flash.vue')),
	StillImage,
	VideoAttachment: defineAsyncComponent(
	- () => import( 'src/components/video_attachment/video_attachment.vue'),
	+ () => import('src/components/video_attachment/video_attachment.vue'),
	),
	Popover,
	},
	computed: {
	classNames() {
	return [
	{
	'-loading': this.loading,
	'-nsfw-placeholder': this.hidden,
	'-editable': this.edit !== undefined,
	'-compact': this.compact,
	},
	'-type-' + this.attachment.type,
	this.size && '-size-' + this.size,
	`-${this.useContainFit ? 'contain' : 'cover'}-fit`,
	]
	},
	usePlaceholder() {
	return this.size === 'hide'
	},
	useContainFit() {
	return this.mergedConfig.useContainFit
	},
	placeholderName() {
	if (this.attachment.description === '' \|\| !this.attachment.description) {
	return this.attachment.type.toUpperCase()
	}
	return this.attachment.description
	},
	placeholderIconClass() {
	if (this.attachment.type === 'image') return 'image'
	if (this.attachment.type === 'video') return 'video'
	if (this.attachment.type === 'audio') return 'music'
	return 'file'
	},
	referrerpolicy() {
	return useInstanceCapabilitiesStore().mediaProxyAvailable
	? ''
	: 'no-referrer'
	},
	hidden() {
	return this.nsfw && this.hideNsfwLocal && !this.showHidden
	},
	isEmpty() {
	return this.attachment.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.attachment.type)
	},
	videoTag() {
	return this.useModal ? 'button' : 'span'
	},
	...mapState(useMergedConfigStore, ['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.attachment.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
	},
	toggleHidden(event) {
	if (
	this.mergedConfig.useOneClickNsfw &&
	!this.showHidden &&
	(this.attachment.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/confirm_modal/mute_confirm.js b/src/components/confirm_modal/mute_confirm.js
	index ffd3a3076e..c2f5ff8882 100644
	--- a/src/components/confirm_modal/mute_confirm.js
	+++ b/src/components/confirm_modal/mute_confirm.js
	@@ -1,89 +1,92 @@
	import { mapState } from 'pinia'
	+import { defineAsyncComponent } from 'vue'

	import Select from 'src/components/select/select.vue'
	-import ConfirmModal from './confirm_modal.vue'

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

	export default {
	props: ['type', 'user', 'status'],
	emits: ['hide', 'show', 'muted'],
	data: () => ({
	showing: false,
	}),
	components: {
	- ConfirmModal,
	+ ConfirmModal: defineAsyncComponent(
	+ () => import('src/components/confirm_modal/confirm_modal.vue'),
	+ ),
	+
	Select,
	},
	computed: {
	domain() {
	return this.user.fqn.split('@')[1]
	},
	keypath() {
	if (this.type === 'domain') {
	return 'user_card.mute_domain_confirm'
	} else if (this.type === 'conversation') {
	return 'user_card.mute_conversation_confirm'
	}
	},
	conversationIsMuted() {
	return this.status.conversation_muted
	},
	domainIsMuted() {
	return new Set(this.$store.state.users.currentUser.domainMutes).has(
	this.domain,
	)
	},
	shouldConfirm() {
	switch (this.type) {
	case 'domain': {
	return this.mergedConfig.modalOnMuteDomain
	}
	default: {
	// conversation
	return this.mergedConfig.modalOnMuteConversation
	}
	}
	},
	...mapState(useMergedConfigStore, ['mergedConfig']),
	},
	methods: {
	optionallyPrompt() {
	if (this.shouldConfirm) {
	this.show()
	} else {
	this.doMute()
	}
	},
	show() {
	this.showing = true
	this.$emit('show')
	},
	hide() {
	this.showing = false
	this.$emit('hide')
	},
	doMute() {
	switch (this.type) {
	case 'domain': {
	if (!this.domainIsMuted) {
	this.$store.dispatch('muteDomain', this.domain)
	} else {
	this.$store.dispatch('unmuteDomain', this.domain)
	}
	break
	}
	case 'conversation': {
	if (!this.conversationIsMuted) {
	this.$store.dispatch('muteConversation', { id: this.status.id })
	} else {
	this.$store.dispatch('unmuteConversation', { id: this.status.id })
	}
	break
	}
	}
	this.$emit('muted')
	this.hide()
	},
	},
	}
	diff --git a/src/components/confirm_modal/mute_confirm.vue b/src/components/confirm_modal/mute_confirm.vue
	index 7c754b0068..108a724771 100644
	--- a/src/components/confirm_modal/mute_confirm.vue
	+++ b/src/components/confirm_modal/mute_confirm.vue
	@@ -1,31 +1,31 @@
	<template>
	- <confirm-modal
	+ <ConfirmModal
	v-if="showing"
	:title="$t('user_card.mute_confirm_title')"
	:confirm-text="$t('user_card.mute_confirm_accept_button')"
	:cancel-text="$t('user_card.mute_confirm_cancel_button')"
	@accepted="doMute"
	@cancelled="hide"
	>
	<i18n-t
	:keypath="keypath"
	tag="div"
	>
	<template #domain>
	<span v-text="domain" />
	</template>
	<template #user>
	<span v-text="user.screen_name_ui" />
	</template>
	</i18n-t>
	- </confirm-modal>
	+ </ConfirmModal>
	</template>

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

	<style lang="scss">
	.expiry-amount {
	width: 4em;
	text-align: right;
	}
	</style>
	diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
	index 3382413a0a..df855500ac 100644
	--- a/src/components/desktop_nav/desktop_nav.js
	+++ b/src/components/desktop_nav/desktop_nav.js
	@@ -1,130 +1,131 @@
	import SearchBar from 'components/search_bar/search_bar.vue'
	import { mapActions, mapState } from 'pinia'
	-
	-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	+import { defineAsyncComponent } from 'vue'

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

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

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

	export default {
	components: {
	SearchBar,
	- ConfirmModal,
	+ ConfirmModal: defineAsyncComponent(
	+ () => import('src/components/confirm_modal/confirm_modal.vue'),
	+ ),
	},
	data: () => ({
	searchBarHidden: true,
	supportsMask:
	window.CSS &&
	window.CSS.supports &&
	(window.CSS.supports('mask-size', 'contain') \|\|
	window.CSS.supports('-webkit-mask-size', 'contain') \|\|
	window.CSS.supports('-moz-mask-size', 'contain') \|\|
	window.CSS.supports('-ms-mask-size', 'contain') \|\|
	window.CSS.supports('-o-mask-size', 'contain')),
	showingConfirmLogout: false,
	}),
	computed: {
	enableMask() {
	return this.supportsMask && this.logoMask
	},
	logoStyle() {
	return {
	visibility: this.enableMask ? 'hidden' : 'visible',
	}
	},
	logoMaskStyle() {
	return this.enableMask
	? {
	'mask-image': `url(${this.logo})`,
	}
	: {
	'background-color': this.enableMask ? '' : 'transparent',
	}
	},
	logoBgStyle() {
	return Object.assign(
	{
	margin: `${this.logoMargin} 0`,
	opacity: this.searchBarHidden ? 1 : 0,
	},
	this.enableMask
	? {}
	: {
	'background-color': this.enableMask ? '' : 'transparent',
	},
	)
	},
	...mapState(useInstanceStore, ['privateMode']),
	...mapState(useInstanceStore, {
	logoMask: (store) => store.instanceIdentity.logoMask,
	logo: (store) => store.instanceIdentity.logo,
	logoLeft: (store) => store.instanceIdentity.logoLeft,
	logoMargin: (store) => store.instanceIdentity.logoMargin,
	sitename: (store) => store.instanceIdentity.name,
	hideSitename: (store) => store.instanceIdentity.hideSitename,
	}),
	currentUser() {
	return this.$store.state.users.currentUser
	},
	shouldConfirmLogout() {
	return useMergedConfigStore().mergedConfig.modalOnLogout
	},
	},
	methods: {
	scrollToTop() {
	window.scrollTo(0, 0)
	},
	showConfirmLogout() {
	this.showingConfirmLogout = true
	},
	hideConfirmLogout() {
	this.showingConfirmLogout = false
	},
	logout() {
	if (!this.shouldConfirmLogout) {
	this.doLogout()
	} else {
	this.showConfirmLogout()
	}
	},
	doLogout() {
	this.$router.replace('/main/public')
	this.$store.dispatch('logout')
	this.hideConfirmLogout()
	},
	onSearchBarToggled(hidden) {
	this.searchBarHidden = hidden
	},
	...mapActions(useInterfaceStore, ['openSettingsModal']),
	},
	}
	diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
	index 8c7f589b68..477a7634dc 100644
	--- a/src/components/desktop_nav/desktop_nav.vue
	+++ b/src/components/desktop_nav/desktop_nav.vue
	@@ -1,98 +1,98 @@
	<template>
	<nav
	id="nav"
	class="DesktopNav"
	:class="{ '-logoLeft': logoLeft }"
	@click="scrollToTop()"
	>
	<div class="inner-nav">
	<div class="item sitename">
	<router-link
	v-if="!hideSitename"
	class="site-name"
	:to="{ name: 'root' }"
	active-class="home"
	>
	{{ sitename }}
	</router-link>
	</div>
	<router-link
	class="logo"
	:to="{ name: 'root' }"
	:style="logoBgStyle"
	:title="sitename"
	>
	<div
	class="mask"
	:style="logoMaskStyle"
	/>
	<img
	:src="logo"
	:style="logoStyle"
	>
	</router-link>
	<div class="item right actions">
	<SearchBar
	v-if="currentUser \|\| !privateMode"
	@toggled="onSearchBarToggled"
	@click.stop
	/>
	<template v-if="searchBarHidden">
	<button
	class="button-unstyled nav-icon"
	:title="$t('nav.preferences')"
	@click.stop="openSettingsModal('user')"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="cog"
	/>
	</button>
	<button
	v-if="currentUser && currentUser.role === 'admin'"
	class="button-unstyled nav-icon"
	target="_blank"
	:title="$t('nav.administration')"
	@click.stop="openSettingsModal('admin')"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="tachometer-alt"
	/>
	</button>
	<span class="spacer" />
	<button
	v-if="currentUser"
	class="button-unstyled nav-icon"
	:title="$t('login.logout')"
	@click.stop.prevent="logout"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="sign-out-alt"
	/>
	</button>
	</template>
	</div>
	</div>
	<teleport to="#modal">
	- <confirm-modal
	+ <ConfirmModal
	v-if="showingConfirmLogout"
	:title="$t('login.logout_confirm_title')"
	:confirm-danger="true"
	:confirm-text="$t('login.logout_confirm_accept_button')"
	:cancel-text="$t('login.logout_confirm_cancel_button')"
	@accepted="doLogout"
	@cancelled="hideConfirmLogout"
	>
	{{ $t('login.logout_confirm') }}
	- </confirm-modal>
	+ </ConfirmModal>
	</teleport>
	</nav>
	</template>
	<script src="./desktop_nav.js"></script>

	<style src="./desktop_nav.scss" lang="scss"></style>
	diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
	index 182b3caa48..50758c7310 100644
	--- a/src/components/draft/draft.js
	+++ b/src/components/draft/draft.js
	@@ -1,110 +1,112 @@
	import { cloneDeep } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
	import Gallery from 'src/components/gallery/gallery.vue'
	import StatusContent from 'src/components/status_content/status_content.vue'

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

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

	library.add(faPollH)

	const Draft = {
	components: {
	PostStatusForm: defineAsyncComponent(
	() => import('src/components/post_status_form/post_status_form.vue'),
	),
	EditStatusForm: defineAsyncComponent(
	() => import('src/components/edit_status_form/edit_status_form.vue'),
	),
	- ConfirmModal,
	+ ConfirmModal: defineAsyncComponent(
	+ () => import('src/components/confirm_modal/confirm_modal.vue'),
	+ ),
	+
	StatusContent,
	Gallery,
	},
	props: {
	draft: {
	type: Object,
	required: true,
	},
	},
	data() {
	return {
	referenceDraft: cloneDeep(this.draft),
	editing: false,
	showingConfirmDialog: false,
	}
	},
	computed: {
	relAttrs() {
	if (this.draft.type === 'edit') {
	return { statusId: this.draft.refId }
	} else if (this.draft.type === 'reply') {
	return { replyTo: this.draft.refId }
	} else {
	return {}
	}
	},
	safeToSave() {
	return (
	this.draft.status \|\|
	this.draft.files?.length \|\|
	this.draft.hasPoll \|\|
	this.draft.hasQuote
	)
	},
	postStatusFormProps() {
	return {
	draftId: this.draft.id,
	...this.relAttrs,
	}
	},
	refStatus() {
	return this.draft.refId
	? this.$store.state.statuses.allStatusesObject[this.draft.refId]
	: undefined
	},
	localCollapseSubjectDefault() {
	return useMergedConfigStore().mergedConfig.collapseMessageWithSubject
	},
	nsfwClickthrough() {
	if (!this.draft.nsfw) {
	return false
	}
	if (this.draft.summary && this.localCollapseSubjectDefault) {
	return false
	}
	return true
	},
	},
	watch: {
	editing(newVal) {
	if (newVal) return
	if (this.safeToSave) {
	this.$store.dispatch('addOrSaveDraft', { draft: this.draft })
	} else {
	this.$store.dispatch('addOrSaveDraft', { draft: this.referenceDraft })
	}
	},
	},
	methods: {
	toggleEditing() {
	this.editing = !this.editing
	},
	abandon() {
	this.showingConfirmDialog = true
	},
	doAbandon() {
	this.$store.dispatch('abandonDraft', { id: this.draft.id }).then(() => {
	this.hideConfirmDialog()
	})
	},
	hideConfirmDialog() {
	this.showingConfirmDialog = false
	},
	},
	}

	export default Draft
	diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
	index 433ebae316..c8d72f821e 100644
	--- a/src/components/draft/draft.vue
	+++ b/src/components/draft/draft.vue
	@@ -1,168 +1,168 @@
	<template>
	<article class="Draft">
	<div
	v-if="!editing"
	class="status-content"
	>
	<div>
	<i18n-t
	v-if="draft.type === 'reply' \|\| draft.type === 'edit'"
	tag="span"
	:keypath="draft.type === 'reply' ? 'drafts.replying' : 'drafts.editing'"
	>
	<template #statusLink>
	<router-link
	class="faint-link"
	:to="{ name: 'conversation', params: { id: draft.refId } }"
	>
	{{ refStatus ? refStatus.external_url : $t('drafts.unavailable') }}
	</router-link>
	</template>
	</i18n-t>
	<StatusContent
	v-if="draft.refId && refStatus"
	class="status-content"
	:status="refStatus"
	:compact="true"
	/>
	</div>
	<div class="status-preview">
	<span class="status_content">
	<p v-if="draft.spoilerText">
	<i>
	{{ draft.spoilerText }}:
	</i>
	</p>
	<p v-if="draft.status">{{ draft.status }}</p>
	<p
	v-else
	class="faint"
	>{{ $t('drafts.empty') }}</p>
	</span>
	<gallery
	v-if="draft.files?.length !== 0"
	class="attachments media-body"
	:compact="true"
	:nsfw="nsfwClickthrough"
	:attachments="draft.files"
	:limit="1"
	size="small"
	@play="$emit('mediaplay', attachment.id)"
	@pause="$emit('mediapause', attachment.id)"
	/>
	<div
	v-if="draft.poll.options"
	class="poll-indicator-container"
	:title="$t('drafts.poll_tooltip')"
	>
	<div class="poll-indicator">
	<FAIcon
	icon="poll-h"
	size="3x"
	/>
	</div>
	</div>
	</div>
	</div>
	<div v-if="editing">
	<PostStatusForm
	v-if="draft.type !== 'edit'"
	:hide-draft="true"
	v-bind="postStatusFormProps"
	/>
	<EditStatusForm
	v-else
	:hide-draft="true"
	:params="postStatusFormProps"
	/>
	</div>
	<teleport to="#modal">
	- <confirm-modal
	+ <ConfirmModal
	v-if="showingConfirmDialog"
	:title="$t('drafts.abandon_confirm_title')"
	:confirm-text="$t('drafts.abandon_confirm_accept_button')"
	:cancel-text="$t('drafts.abandon_confirm_cancel_button')"
	@accepted="doAbandon"
	@cancelled="hideConfirmDialog"
	>
	{{ $t('drafts.abandon_confirm') }}
	- </confirm-modal>
	+ </ConfirmModal>
	</teleport>
	<div class="actions">
	<button
	class="btn button-default"
	:aria-expanded="editing"
	@click.prevent.stop="toggleEditing"
	>
	{{ editing ? $t('drafts.save') : $t('drafts.continue') }}
	</button>
	<button
	class="btn button-default"
	@click.prevent.stop="abandon"
	>
	{{ $t('drafts.abandon') }}
	</button>
	</div>
	</article>
	</template>

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

	<style lang="scss">
	.Draft {
	position: relative;

	.status-content {
	padding: 0.5em;
	margin: 0.5em 0;
	}

	.status-preview {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-columns: 10em;
	grid-auto-flow: column;
	grid-gap: 0.5em;
	align-items: start;
	max-width: 100%;

	p {
	white-space: normal;
	overflow-x: hidden;
	}

	.poll-indicator-container {
	border-radius: var(--roundness);
	display: grid;
	place-items: center center;
	align-self: start;
	height: 0;
	padding-bottom: 62.5%;
	position: relative;
	}

	.poll-indicator {
	box-sizing: border-box;
	border: 1px solid var(--border);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center center;
	width: 100%;
	height: 100%;
	}
	}

	.actions {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;

	.btn {
	flex: 1;
	margin-left: 1em;
	margin-right: 1em;
	}
	}
	}
	</style>
	diff --git a/src/components/drafts/drafts.js b/src/components/drafts/drafts.js
	index 87c22138bc..3d93edb144 100644
	--- a/src/components/drafts/drafts.js
	+++ b/src/components/drafts/drafts.js
	@@ -1,36 +1,39 @@
	-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
	+import { defineAsyncComponent } from 'vue'
	+
	import Draft from 'src/components/draft/draft.vue'
	import List from 'src/components/list/list.vue'

	const Drafts = {
	components: {
	Draft,
	List,
	- ConfirmModal,
	+ ConfirmModal: defineAsyncComponent(
	+ () => import('src/components/confirm_modal/confirm_modal.vue'),
	+ ),
	},
	data() {
	return {
	showingConfirmDialog: false,
	}
	},
	computed: {
	drafts() {
	return this.$store.getters.draftsArray
	},
	},
	methods: {
	abandonAll() {
	this.showingConfirmDialog = true
	},
	doAbandonAll() {
	this.$store
	.dispatch('abandonAllDrafts')
	.then(() => this.hideConfirmDialog())
	},
	hideConfirmDialog() {
	this.showingConfirmDialog = false
	},
	},
	}

	export default Drafts
	diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
	index 644f95f859..3fecc025f0 100644
	--- a/src/components/follow_button/follow_button.js
	+++ b/src/components/follow_button/follow_button.js
	@@ -1,89 +1,92 @@
	+import { defineAsyncComponent } from 'vue'
	+
	import {
	requestFollow,
	requestUnfollow,
	} from '../../services/follow_manipulate/follow_manipulate'
	-import ConfirmModal from '../confirm_modal/confirm_modal.vue'

	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	export default {
	props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
	components: {
	- ConfirmModal,
	+ ConfirmModal: defineAsyncComponent(
	+ () => import('src/components/confirm_modal/confirm_modal.vue'),
	+ ),
	},
	data() {
	return {
	inProgress: false,
	showingConfirmUnfollow: false,
	}
	},
	computed: {
	shouldConfirmUnfollow() {
	return useMergedConfigStore().mergedConfig.modalOnUnfollow
	},
	isPressed() {
	return this.inProgress \|\| this.relationship.following
	},
	title() {
	if (this.inProgress \|\| this.relationship.following) {
	return this.$t('user_card.follow_unfollow')
	} else if (this.relationship.requested) {
	return this.$t('user_card.follow_cancel')
	} else {
	return this.$t('user_card.follow')
	}
	},
	label() {
	if (this.inProgress) {
	return this.$t('user_card.follow_progress')
	} else if (this.relationship.following) {
	return this.labelFollowing \|\| this.$t('user_card.following')
	} else if (this.relationship.requested) {
	return this.$t('user_card.follow_sent')
	} else {
	return this.$t('user_card.follow')
	}
	},
	disabled() {
	return this.inProgress \|\| this.user.deactivated
	},
	},
	methods: {
	showConfirmUnfollow() {
	this.showingConfirmUnfollow = true
	},
	hideConfirmUnfollow() {
	this.showingConfirmUnfollow = false
	},
	onClick() {
	this.relationship.following \|\| this.relationship.requested
	? this.unfollow()
	: this.follow()
	},
	follow() {
	this.inProgress = true
	requestFollow(this.relationship.id, this.$store).then(() => {
	this.inProgress = false
	})
	},
	unfollow() {
	if (this.shouldConfirmUnfollow) {
	this.showConfirmUnfollow()
	} else {
	this.doUnfollow()
	}
	},
	doUnfollow() {
	const store = this.$store
	this.inProgress = true
	requestUnfollow(this.relationship.id, store).then(() => {
	this.inProgress = false
	store.commit('removeStatus', {
	timeline: 'friends',
	userId: this.relationship.id,
	})
	})

	this.hideConfirmUnfollow()
	},
	},
	}
	diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
	index 3606b68be8..ba0cda46dd 100644
	--- a/src/components/follow_button/follow_button.vue
	+++ b/src/components/follow_button/follow_button.vue
	@@ -1,35 +1,35 @@
	<template>
	<button
	class="btn button-default follow-button"
	:class="{ toggled: isPressed }"
	:disabled="disabled"
	:title="title"
	@click="onClick"
	>
	{{ label }}
	<teleport to="#modal">
	- <confirm-modal
	+ <ConfirmModal
	v-if="showingConfirmUnfollow"
	:title="$t('user_card.unfollow_confirm_title')"
	:confirm-text="$t('user_card.unfollow_confirm_accept_button')"
	:cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
	@accepted="doUnfollow"
	@cancelled="hideConfirmUnfollow"
	>
	<i18n-t
	scope="global"
	keypath="user_card.unfollow_confirm"
	tag="span"
	>
	<template #user>
	<span
	v-text="user.screen_name_ui"
	/>
	</template>
	</i18n-t>
	- </confirm-modal>
	+ </ConfirmModal>
	</teleport>
	</button>
	</template>

	<script src="./follow_button.js"></script>
	diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js
	index a6ffcd28be..44658e985c 100644
	--- a/src/components/follow_request_card/follow_request_card.js
	+++ b/src/components/follow_request_card/follow_request_card.js
	@@ -1,92 +1,95 @@
	+import { defineAsyncComponent } from 'vue'
	+
	import { notificationsFromStore } from '../../services/notification_utils/notification_utils.js'
	import BasicUserCard from '../basic_user_card/basic_user_card.vue'
	-import ConfirmModal from '../confirm_modal/confirm_modal.vue'

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

	const FollowRequestCard = {
	props: ['user'],
	components: {
	BasicUserCard,
	- ConfirmModal,
	+ ConfirmModal: defineAsyncComponent(
	+ () => import('src/components/confirm_modal/confirm_modal.vue'),
	+ ),
	},
	data() {
	return {
	showingApproveConfirmDialog: false,
	showingDenyConfirmDialog: false,
	}
	},
	methods: {
	findFollowRequestNotificationId() {
	const notif = notificationsFromStore(this.$store).find(
	(notif) =>
	notif.from_profile.id === this.user.id &&
	notif.type === 'follow_request',
	)
	return notif && notif.id
	},
	showApproveConfirmDialog() {
	this.showingApproveConfirmDialog = true
	},
	hideApproveConfirmDialog() {
	this.showingApproveConfirmDialog = false
	},
	showDenyConfirmDialog() {
	this.showingDenyConfirmDialog = true
	},
	hideDenyConfirmDialog() {
	this.showingDenyConfirmDialog = false
	},
	approveUser() {
	if (this.shouldConfirmApprove) {
	this.showApproveConfirmDialog()
	} else {
	this.doApprove()
	}
	},
	doApprove() {
	this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
	this.$store.dispatch('removeFollowRequest', this.user)

	const notifId = this.findFollowRequestNotificationId()
	this.$store.dispatch('markSingleNotificationAsSeen', { id: notifId })
	this.$store.dispatch('updateNotification', {
	id: notifId,
	updater: (notification) => {
	notification.type = 'follow'
	},
	})
	this.hideApproveConfirmDialog()
	},
	denyUser() {
	if (this.shouldConfirmDeny) {
	this.showDenyConfirmDialog()
	} else {
	this.doDeny()
	}
	},
	doDeny() {
	const notifId = this.findFollowRequestNotificationId()
	this.$store.state.api.backendInteractor
	.denyUser({ id: this.user.id })
	.then(() => {
	this.$store.dispatch('dismissNotificationLocal', { id: notifId })
	this.$store.dispatch('removeFollowRequest', this.user)
	})
	this.hideDenyConfirmDialog()
	},
	},
	computed: {
	mergedConfig() {
	return useMergedConfigStore().mergedConfig
	},
	shouldConfirmApprove() {
	return this.mergedConfig.modalOnApproveFollow
	},
	shouldConfirmDeny() {
	return this.mergedConfig.modalOnDenyFollow
	},
	},
	}

	export default FollowRequestCard
	diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
	index 55b651120b..64b1850943 100644
	--- a/src/components/follow_request_card/follow_request_card.vue
	+++ b/src/components/follow_request_card/follow_request_card.vue
	@@ -1,61 +1,61 @@
	<template>
	<basic-user-card :user="user">
	<div class="follow-request-card-content-container">
	<button
	class="btn button-default"
	@click="approveUser"
	>
	{{ $t('user_card.approve') }}
	</button>
	<button
	class="btn button-default"
	@click="denyUser"
	>
	{{ $t('user_card.deny') }}
	</button>
	</div>
	<teleport to="#modal">
	- <confirm-modal
	+ <ConfirmModal
	v-if="showingApproveConfirmDialog"
	:title="$t('user_card.approve_confirm_title')"
	:confirm-text="$t('user_card.approve_confirm_accept_button')"
	:cancel-text="$t('user_card.approve_confirm_cancel_button')"
	@accepted="doApprove"
	@cancelled="hideApproveConfirmDialog"
	>
	{{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
	- </confirm-modal>
	- <confirm-modal
	+ </ConfirmModal>
	+ <ConfirmModal
	v-if="showingDenyConfirmDialog"
	:title="$t('user_card.deny_confirm_title')"
	:confirm-text="$t('user_card.deny_confirm_accept_button')"
	:cancel-text="$t('user_card.deny_confirm_cancel_button')"
	@accepted="doDeny"
	@cancelled="hideDenyConfirmDialog"
	>
	{{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
	- </confirm-modal>
	+ </ConfirmModal>
	</teleport>
	</basic-user-card>
	</template>

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

	<style lang="scss">
	.follow-request-card-content-container {
	display: flex;
	flex-flow: row wrap;

	button {
	margin-top: 0.5em;
	margin-right: 0.5em;
	flex: 1 1;
	max-width: 12em;
	min-width: 8em;

	&:last-child {
	margin-right: 0;
	}
	}
	}
	</style>
	diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
	index 0723fa2036..2994cb5310 100644
	--- a/src/components/media_modal/media_modal.js
	+++ b/src/components/media_modal/media_modal.js
	@@ -1,163 +1,161 @@
	-import GestureService from '../../services/gesture_service/gesture_service'
	-
	-import { useMediaViewerStore } from 'src/stores/media_viewer.js'
	import { defineAsyncComponent } from 'vue'

	import Modal from 'src/components/modal/modal.vue'
	import StillImage from 'src/components/still-image/still-image.vue'
	+import GestureService from '../../services/gesture_service/gesture_service'
	+
	+import { useMediaViewerStore } from 'src/stores/media_viewer.js'

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

	library.add(faChevronLeft, faChevronRight, faCircleNotch, faTimes)

	const MediaModal = {
	components: {
	StillImage,
	VideoAttachment: defineAsyncComponent(
	- () => import( 'src/components/video_attachment/video_attachment.vue'),
	+ () => import('src/components/video_attachment/video_attachment.vue'),
	),
	PinchZoom: defineAsyncComponent(
	- () => import( 'src/components/pinch_zoom/pinch_zoom.vue'),
	+ () => import('src/components/pinch_zoom/pinch_zoom.vue'),
	),
	SwipeClick: defineAsyncComponent(
	- () => import( 'src/components/swipe_click/swipe_click.vue'),
	+ () => import('src/components/swipe_click/swipe_click.vue'),
	),
	Modal,
	- Flash: defineAsyncComponent(
	- () => import( 'src/components/flash/flash.vue'),
	- ),
	+ Flash: defineAsyncComponent(() => import('src/components/flash/flash.vue')),
	},
	data() {
	return {
	loading: false,
	swipeDirection: GestureService.DIRECTION_LEFT,
	swipeThreshold: () => {
	const considerableMoveRatio = 1 / 4
	return window.innerWidth * considerableMoveRatio
	},
	pinchZoomMinScale: 1,
	pinchZoomScaleResetLimit: 1.2,
	}
	},
	computed: {
	showing() {
	return useMediaViewerStore().activated
	},
	media() {
	return useMediaViewerStore().media
	},
	description() {
	return this.currentMedia.description
	},
	currentIndex() {
	return useMediaViewerStore().currentIndex
	},
	currentMedia() {
	return this.media[this.currentIndex]
	},
	canNavigate() {
	return this.media.length > 1
	},
	swipeDisableClickThreshold() {
	// If there is only one media, allow more mouse movements to close the modal
	// because there is less chance that the user wants to switch to another image
	return () => (this.canNavigate ? 1 : 30)
	},
	},
	methods: {
	hide() {
	// HACK: Closing immediately via a touch will cause the click
	// to be processed on the content below the overlay
	const transitionTime = 100 // ms
	setTimeout(() => {
	useMediaViewerStore().closeMediaViewer()
	}, transitionTime)
	},
	hideIfNotSwiped(event) {
	// If we have swiped over SwipeClick, do not trigger hide
	const comp = this.$refs.swipeClick
	if (!comp) {
	this.hide()
	} else {
	comp.$gesture.click(event)
	}
	},
	goPrev() {
	if (this.canNavigate) {
	const prevIndex =
	this.currentIndex === 0
	? this.media.length - 1
	: this.currentIndex - 1
	const newMedia = this.media[prevIndex]
	if (newMedia.type === 'image') {
	this.loading = true
	}
	useMediaViewerStore().setCurrentMedia(newMedia)
	}
	},
	goNext() {
	if (this.canNavigate) {
	const nextIndex =
	this.currentIndex === this.media.length - 1
	? 0
	: this.currentIndex + 1
	const newMedia = this.media[nextIndex]
	if (newMedia.type === 'image') {
	this.loading = true
	}
	useMediaViewerStore().setCurrentMedia(newMedia)
	}
	},
	onImageLoaded() {
	this.loading = false
	},
	handleSwipePreview(offsets) {
	this.$refs.pinchZoom.setTransform({ scale: 1, x: offsets[0], y: 0 })
	},
	handleSwipeEnd(sign) {
	this.$refs.pinchZoom.setTransform({ scale: 1, x: 0, y: 0 })
	if (sign > 0) {
	this.goNext()
	} else if (sign < 0) {
	this.goPrev()
	}
	},
	handleKeyupEvent(e) {
	if (this.showing && e.keyCode === 27) {
	// escape
	this.hide()
	}
	},
	handleKeydownEvent(e) {
	if (!this.showing) {
	return
	}

	if (e.keyCode === 39) {
	// arrow right
	this.goNext()
	} else if (e.keyCode === 37) {
	// arrow left
	this.goPrev()
	}
	},
	},
	mounted() {
	window.addEventListener('popstate', this.hide)
	document.addEventListener('keyup', this.handleKeyupEvent)
	document.addEventListener('keydown', this.handleKeydownEvent)
	},
	unmounted() {
	window.removeEventListener('popstate', this.hide)
	document.removeEventListener('keyup', this.handleKeyupEvent)
	document.removeEventListener('keydown', this.handleKeydownEvent)
	},
	}

	export default MediaModal
	diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
	index 8aafd2709d..fc77b0b129 100644
	--- a/src/components/mobile_nav/mobile_nav.js
	+++ b/src/components/mobile_nav/mobile_nav.js
	@@ -1,167 +1,168 @@
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'
	import { mapGetters } from 'vuex'

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

	import { useAnnouncementsStore } from 'src/stores/announcements.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'

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

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

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

	export default MobileNav
	diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
	index 0eb8c986ef..09009782aa 100644
	--- a/src/components/mobile_nav/mobile_nav.vue
	+++ b/src/components/mobile_nav/mobile_nav.vue
	@@ -1,259 +1,259 @@
	<template>
	<div
	class="MobileNav"
	>
	<nav
	id="nav"
	class="mobile-nav"
	@click="scrollToTop()"
	>
	<div class="item">
	<button
	class="button-unstyled mobile-nav-button"
	:title="$t('nav.mobile_sidebar')"
	:aria-expanaded="$refs.sideDrawer && !$refs.sideDrawer.closed"
	@click.stop.prevent="toggleMobileSidebar()"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="bars"
	/>
	<div
	v-if="(unreadChatCount && !chatsPinned) \|\| unreadAnnouncementCount"
	class="badge -dot -notification"
	/>
	</button>
	<NavigationPins class="pins" />
	</div> <div class="item right">
	<button
	v-if="currentUser"
	class="button-unstyled mobile-nav-button"
	:title="unseenNotificationsCount ? $t('nav.mobile_notifications_unread_active') : $t('nav.mobile_notifications')"
	@click.stop.prevent="openMobileNotifications()"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="bell"
	/>
	<div
	v-if="unseenNotificationsCount"
	class="badge -dot -notification"
	/>
	</button>
	</div>
	</nav>
	<aside
	v-if="currentUser"
	class="mobile-notifications-drawer mobile-drawer"
	:class="{ '-closed': !notificationsOpen }"
	@touchstart.stop="notificationsTouchStart"
	@touchmove.stop="notificationsTouchMove"
	>
	<div class="panel-heading mobile-notifications-header">
	<h1 class="title">
	{{ $t('notifications.notifications') }}
	<span
	v-if="unseenCountBadgeText"
	class="badge -notification unseen-count"
	>{{ unseenCountBadgeText }}</span>
	</h1>
	<span class="spacer" />
	<button
	v-if="notificationsAtTop"
	class="button-unstyled mobile-nav-button"
	:title="$t('general.scroll_to_top')"
	@click.stop.prevent="scrollMobileNotificationsToTop"
	>
	<FALayers class="fa-scale-110 fa-old-padding-layer">
	<FAIcon icon="arrow-up" />
	<FAIcon
	icon="minus"
	transform="up-7"
	/>
	</FALayers>
	</button>
	<button
	v-if="!closingDrawerMarksAsSeen"
	class="button-unstyled mobile-nav-button"
	:title="$t('nav.mobile_notifications_mark_as_seen')"
	@click.stop.prevent="markNotificationsAsSeen()"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="check-double"
	/>
	</button>
	<button
	class="button-unstyled mobile-nav-button"
	:title="$t('nav.mobile_notifications_close')"
	@click.stop.prevent="closeMobileNotifications(true)"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</button>
	</div>
	<div
	id="mobile-notifications"
	ref="mobileNotifications"
	class="mobile-notifications"
	@scroll="onScroll"
	/>
	</aside>
	<SideDrawer
	ref="sideDrawer"
	:logout="logout"
	/>
	<teleport to="#modal">
	- <confirm-modal
	+ <ConfirmModal
	v-if="showingConfirmLogout"
	:title="$t('login.logout_confirm_title')"
	:confirm-danger="true"
	:confirm-text="$t('login.logout_confirm_accept_button')"
	:cancel-text="$t('login.logout_confirm_cancel_button')"
	@accepted="doLogout"
	@cancelled="hideConfirmLogout"
	>
	{{ $t('login.logout_confirm') }}
	- </confirm-modal>
	+ </ConfirmModal>
	</teleport>
	</div>
	</template>

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

	<style lang="scss">
	.MobileNav {
	z-index: var(--ZI_navbar);

	.mobile-nav {
	display: grid;
	line-height: var(--navbar-height);
	grid-template-rows: var(--navbar-height);
	grid-template-columns: 2fr auto;
	width: 100%;
	box-sizing: border-box;

	a {
	color: var(--link);
	}
	}

	.mobile-inner-nav {
	width: 100%;
	display: flex;
	align-items: center;
	}

	.mobile-nav-button {
	display: inline-block;
	text-align: center;
	padding: 0 1em;
	position: relative;
	cursor: pointer;
	}

	.site-name {
	padding: 0 0.3em;
	display: inline-block;
	}

	.item {
	/* moslty just to get rid of extra whitespaces */
	display: flex;
	}

	.mobile-notifications-drawer {
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
	position: fixed;
	top: 0;
	left: 0;
	box-shadow: var(--shadow);
	transition-property: transform;
	transition-duration: 0.25s;
	transform: translateX(0);
	z-index: var(--ZI_navbar);
	-webkit-overflow-scrolling: touch;
	background: var(--background);

	&.-closed {
	transform: translateX(100%);
	box-shadow: none;
	}
	}

	.mobile-notifications-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: calc(var(--ZI_navbar) + 100);
	width: 100%;
	height: 3.5em;
	line-height: 3.5em;
	position: absolute;
	box-shadow: var(--shadow);

	.spacer {
	flex: 1;
	}

	.title {
	font-size: 1.3em;
	margin-left: 0.6em;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
	}
	}

	.pins {
	flex: 1;

	.pinned-item {
	flex-grow: 1;
	}
	}

	.mobile-notifications {
	margin-top: 3.5em;
	width: 100vw;
	height: calc(100vh - var(--navbar-height));
	overflow: hidden scroll;

	.notifications {
	padding: 0;
	border-radius: 0;
	box-shadow: none;

	.panel {
	border-radius: 0;
	margin: 0;
	box-shadow: none;
	}

	.panel::after {
	border-radius: 0;
	}

	.panel .panel-heading {
	border-radius: 0;
	box-shadow: none;
	}
	}
	}

	.confirm-modal.dark-overlay {
	&::before {
	z-index: 3000;
	}

	.dialog-modal.panel {
	z-index: 3001;
	}
	}
	}

	</style>
	diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
	index f302d06e2a..c1b6c14412 100644
	--- a/src/components/notification/notification.js
	+++ b/src/components/notification/notification.js
	@@ -1,226 +1,228 @@
	+import { defineAsyncComponent } from 'vue'
	import { mapState } from 'vuex'

	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
	import {
	highlightClass,
	highlightStyle,
	} from '../../services/user_highlighter/user_highlighter.js'
	-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	import Report from '../report/report.vue'
	import Status from '../status/status.vue'
	import StatusContent from '../status_content/status_content.vue'
	import Timeago from '../timeago/timeago.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import UserLink from '../user_link/user_link.vue'
	import UserPopover from '../user_popover/user_popover.vue'

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

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

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

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

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

	export default Notification
	diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
	index fbe45eceb1..39bd154263 100644
	--- a/src/components/notification/notification.vue
	+++ b/src/components/notification/notification.vue
	@@ -1,295 +1,295 @@
	<template>
	<article
	v-if="notification.type === 'mention' \|\| notification.type === 'status'"
	ref="root"
	>
	<Status
	class="Notification"
	:compact="true"
	:statusoid="notification.status"
	@click="interacted"
	/>
	</article>
	<article
	v-else
	ref="root"
	class="NotificationParent"
	:class="{ '-expandable': expandable }"
	>
	<div
	v-if="needMute && !unmuted"
	:id="'notif-' +notification.id"
	:aria-expanded="statusExpanded"
	:aria-controls="'notif-' +notification.id"
	class="Notification container -muted"
	>
	<small>
	<user-link
	:user="notification.from_profile"
	:at="false"
	/>
	</small>
	<button
	class="button-unstyled unmute"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</div>
	<div
	v-else
	class="Notification non-mention"
	:class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
	:style="[ userStyle ]"
	>
	<a
	class="avatar-container"
	:href="$router.resolve(userProfileLink).href"
	@click.prevent
	>
	<UserPopover
	:user-id="notification.from_profile.id"
	:overlay-centers="true"
	>
	<UserAvatar
	class="post-avatar"
	:compact="true"
	:user="notification.from_profile"
	/>
	</UserPopover>
	</a>
	<div class="notification-right">
	<span class="notification-details">
	<div class="name-and-action">
	<!-- eslint-disable vue/no-v-html -->
	<bdi v-if="!!notification.from_profile.name_html">
	<RichContent
	class="username"
	:title="'@'+notification.from_profile.screen_name_ui"
	:html="notification.from_profile.name_html"
	:emoji="notification.from_profile.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	:is-local="notification.from_profile.is_local"
	/>
	</bdi>
	<!-- eslint-enable vue/no-v-html -->
	<span
	v-else
	class="username"
	:title="'@'+notification.from_profile.screen_name_ui"
	>
	{{ notification.from_profile.name }}
	</span>
	{{ ' ' }}
	<span v-if="notification.type === 'like'">
	<FAIcon
	class="type-icon"
	icon="star"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.favorited_you') }}</small>
	</span>
	<span v-if="notification.type === 'repeat'">
	<FAIcon
	class="type-icon"
	icon="retweet"
	:title="$t('tool_tip.repeat')"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.repeated_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow'">
	<FAIcon
	class="type-icon"
	icon="user-plus"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.followed_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow_request'">
	<FAIcon
	class="type-icon"
	icon="user"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.follow_request') }}</small>
	</span>
	<span v-if="notification.type === 'move'">
	<FAIcon
	class="type-icon"
	icon="suitcase-rolling"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.migrated_to') }}</small>
	</span>
	<span v-if="notification.type === 'pleroma:emoji_reaction'">
	<small>
	<i18n-t
	scope="global"
	keypath="notifications.reacted_with"
	>
	<img
	v-if="notification.emoji_url"
	class="emoji-reaction-emoji emoji-reaction-emoji-image"
	:src="notification.emoji_url"
	:alt="notification.emoji"
	:title="notification.emoji"
	:class="{ ['-wide']: allowNonSquareEmoji }"
	>
	<span
	v-else
	class="emoji-reaction-emoji"
	>{{ notification.emoji }}</span>
	</i18n-t>
	</small>
	</span>
	<span v-if="notification.type === 'pleroma:report'">
	<small>{{ $t('notifications.submitted_report') }}</small>
	</span>
	<span v-if="notification.type === 'poll'">
	<FAIcon
	class="type-icon"
	icon="poll-h"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.poll_ended') }}</small>
	</span>
	</div>
	<div
	v-if="isStatusNotification"
	class="timeago"
	>
	<router-link
	v-if="notification.status"
	:to="{ name: 'conversation', params: { id: notification.status.id } }"
	class="timeago-link faint"
	>
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</router-link>
	<button
	class="button-unstyled expand-icon"
	:title="$t('tool_tip.toggle_expand')"
	:aria-expanded="statusExpanded"
	@click.prevent="toggleStatusExpanded"
	>
	<FAIcon
	class="fa-scale-110"
	fixed-width
	:icon="statusExpanded ? 'compress-alt' : 'expand-alt'"
	/>
	</button>
	</div>
	<div
	v-else
	class="timeago"
	>
	<span class="faint">
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</span>
	</div>
	<button
	v-if="needMute"
	class="button-unstyled"
	:title="$t('tool_tip.toggle_mute')"
	:aria-expanded="!unmuted"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</span>
	<div
	v-if="notification.type === 'follow' \|\| notification.type === 'follow_request'"
	class="follow-text"
	>
	<user-link
	class="follow-name"
	:user="notification.from_profile"
	/>
	<div
	v-if="notification.type === 'follow_request'"
	style="white-space: nowrap;"
	>
	<button
	class="button-unstyled"
	:title="$t('tool_tip.accept_follow_request')"
	@click="approveUser()"
	>
	<FAIcon
	icon="check"
	class="fa-scale-110 fa-old-padding follow-request-accept"
	/>
	</button>
	<button
	class="button-unstyled"
	:title="$t('tool_tip.reject_follow_request')"
	@click="denyUser()"
	>
	<FAIcon
	icon="times"
	class="fa-scale-110 fa-old-padding follow-request-reject"
	/>
	</button>
	</div>
	</div>
	<div
	v-else-if="notification.type === 'move'"
	class="move-text"
	>
	<user-link
	:user="notification.target"
	/>
	</div>
	<Report
	v-else-if="notification.type === 'pleroma:report'"
	:report-id="notification.report.id"
	/>
	<template v-else>
	<StatusContent
	class="status-content"
	:compact="!statusExpanded"
	:status="notification.status"
	:collapse="!statusExpanded"
	@click="onContentClick"
	/>
	</template>
	</div>
	</div>
	<teleport to="#modal">
	- <confirm-modal
	+ <ConfirmModal
	v-if="showingApproveConfirmDialog"
	:title="$t('user_card.approve_confirm_title')"
	:confirm-text="$t('user_card.approve_confirm_accept_button')"
	:cancel-text="$t('user_card.approve_confirm_cancel_button')"
	@accepted="doApprove"
	@cancelled="hideApproveConfirmDialog"
	>
	{{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
	- </confirm-modal>
	- <confirm-modal
	+ </ConfirmModal>
	+ <ConfirmModal
	v-if="showingDenyConfirmDialog"
	:title="$t('user_card.deny_confirm_title')"
	:confirm-text="$t('user_card.deny_confirm_accept_button')"
	:cancel-text="$t('user_card.deny_confirm_cancel_button')"
	@accepted="doDeny"
	@cancelled="hideDenyConfirmDialog"
	>
	{{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
	- </confirm-modal>
	+ </ConfirmModal>
	</teleport>
	</article>
	</template>

	<script src="./notification.js"></script>
	<style src="./notification.scss" lang="scss"></style>
	diff --git a/src/components/quote/quote.js b/src/components/quote/quote.js
	index 14860dc9f7..9525ddff26 100644
	--- a/src/components/quote/quote.js
	+++ b/src/components/quote/quote.js
	@@ -1,102 +1,103 @@
	import { defineAsyncComponent } from 'vue'

	import Status from '../status/status.vue'
	+
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'

	library.add(faCircleNotch)

	export default {
	components: {
	Status,
	},
	name: 'Quote',
	props: {
	visible: {
	type: Boolean,
	},
	loading: {
	type: Boolean,
	},
	statusId: {
	type: String,
	},
	statusUrl: {
	type: String,
	},
	statusVisible: {
	type: Boolean,
	},
	initiallyExpanded: {
	type: Boolean,
	},
	},
	data() {
	return {
	displayQuote: this.initiallyExpanded,
	fetchAttempted: false,
	fetching: false,
	error: null,
	}
	},
	created() {
	this.maybeFetchStatus()
	},
	watch: {
	statusId() {
	this.maybeFetchStatus()
	},
	},
	computed: {
	quotedStatus() {
	return this.statusId
	? this.$store.state.statuses.allStatusesObject[this.statusId]
	: undefined
	},
	shouldDisplayQuote() {
	return this.displayQuote && this.quotedStatus
	},
	hasVisibleQuote() {
	return (
	this.statusUrl &&
	this.statusVisible &&
	(this.showSpinner \|\| this.quotedStatus)
	)
	},
	hasInvisibleQuote() {
	return this.statusUrl && !this.statusVisible
	},
	showSpinner() {
	return this.loading \|\| this.fetching
	},
	},
	methods: {
	toggleDisplayQuote() {
	this.displayQuote = !this.displayQuote
	this.maybeFetchStatus()
	},
	maybeFetchStatus() {
	if (this.statusId && this.displayQuote && !this.quotedStatus) {
	this.fetchStatus()
	}
	},
	fetchStatus() {
	this.fetchAttempted = true
	this.fetching = true
	this.$emit('loading', true)
	this.$store
	.dispatch('fetchStatus', this.statusId)
	.then(() => {
	this.displayQuote = true
	})
	.catch((error) => {
	this.error = error
	this.$emit('error', error)
	})
	.finally(() => {
	this.fetching = false
	this.$emit('loading', false)
	})
	},
	},
	}
	diff --git a/src/components/remove_follower_button/remove_follower_button.js b/src/components/remove_follower_button/remove_follower_button.js
	index bd5aa6d5b4..cbe92dce16 100644
	--- a/src/components/remove_follower_button/remove_follower_button.js
	+++ b/src/components/remove_follower_button/remove_follower_button.js
	@@ -1,52 +1,54 @@
	-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
	+import { defineAsyncComponent } from 'vue'

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

	export default {
	props: ['user', 'relationship'],
	data() {
	return {
	inProgress: false,
	showingConfirmRemoveFollower: false,
	}
	},
	components: {
	- ConfirmModal,
	+ ConfirmModal: defineAsyncComponent(
	+ () => import('src/components/confirm_modal/confirm_modal.vue'),
	+ ),
	},
	computed: {
	label() {
	if (this.inProgress) {
	return this.$t('user_card.follow_progress')
	} else {
	return this.$t('user_card.remove_follower')
	}
	},
	shouldConfirmRemoveUserFromFollowers() {
	return useMergedConfigStore().mergedConfig.modalOnRemoveUserFromFollowers
	},
	},
	methods: {
	showConfirmRemoveUserFromFollowers() {
	this.showingConfirmRemoveFollower = true
	},
	hideConfirmRemoveUserFromFollowers() {
	this.showingConfirmRemoveFollower = false
	},
	onClick() {
	if (!this.shouldConfirmRemoveUserFromFollowers) {
	this.doRemoveUserFromFollowers()
	} else {
	this.showConfirmRemoveUserFromFollowers()
	}
	},
	doRemoveUserFromFollowers() {
	this.inProgress = true
	this.$store
	.dispatch('removeUserFromFollowers', this.relationship.id)
	.then(() => {
	this.inProgress = false
	})
	this.hideConfirmRemoveUserFromFollowers()
	},
	},
	}
	diff --git a/src/components/remove_follower_button/remove_follower_button.vue b/src/components/remove_follower_button/remove_follower_button.vue
	index 3054770d9b..93eaf66c49 100644
	--- a/src/components/remove_follower_button/remove_follower_button.vue
	+++ b/src/components/remove_follower_button/remove_follower_button.vue
	@@ -1,35 +1,35 @@
	<template>
	<button
	class="btn button-default follow-button"
	:class="{ toggled: inProgress }"
	:disabled="inProgress"
	:title="$t('user_card.remove_follower')"
	@click="onClick"
	>
	{{ label }}
	<teleport to="#modal">
	- <confirm-modal
	+ <ConfirmModal
	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
	scope="global"
	keypath="user_card.remove_follower_confirm"
	tag="span"
	>
	<template #user>
	<span
	v-text="user.screen_name_ui"
	/>
	</template>
	</i18n-t>
	- </confirm-modal>
	+ </ConfirmModal>
	</teleport>
	</button>
	</template>

	<script src="./remove_follower_button.js"></script>
	diff --git a/src/components/search/search.js b/src/components/search/search.js
	index 23710b3906..e160514a14 100644
	--- a/src/components/search/search.js
	+++ b/src/components/search/search.js
	@@ -1,131 +1,131 @@
	-import { uniqBy, map } from 'lodash'
	+import { map, uniqBy } from 'lodash'

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

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

	library.add(faCircleNotch, faSearch)

	const Search = {
	components: {
	FollowCard,
	Conversation,
	Status,
	TabSwitcher,
	},
	props: ['query'],
	data() {
	return {
	loaded: false,
	loading: false,
	searchTerm: this.query \|\| '',
	userIds: [],
	statuses: [],
	hashtags: [],
	currenResultTab: 'statuses',

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

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

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

	this.statusesOffset = 0
	this.lastStatusFetchCount = 0
	}

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

	const oldLength = this.statuses.length

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

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

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

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

	export default Search
	diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
	index 78f71934bb..98c0cb4674 100644
	--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
	+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
	@@ -1,314 +1,317 @@
	import Checkbox from 'components/checkbox/checkbox.vue'
	-import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
	import Popover from 'components/popover/popover.vue'
	import Select from 'components/select/select.vue'
	import StillImage from 'components/still-image/still-image.vue'
	import { assign, clone } from 'lodash'
	+import { defineAsyncComponent } from 'vue'

	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	import EmojiEditingPopover from '../helpers/emoji_editing_popover.vue'
	import ModifiedIndicator from '../helpers/modified_indicator.vue'
	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import StringSetting from '../helpers/string_setting.vue'

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

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faArrowsRotate,
	faDownload,
	faFolderOpen,
	faServer,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faArrowsRotate, faFolderOpen, faDownload, faServer)

	const EmojiTab = {
	components: {
	TabSwitcher,
	StringSetting,
	Checkbox,
	StillImage,
	Select,
	Popover,
	- ConfirmModal,
	+ ConfirmModal: defineAsyncComponent(
	+ () => import('src/components/confirm_modal/confirm_modal.vue'),
	+ ),
	+
	ModifiedIndicator,
	EmojiEditingPopover,
	},

	data() {
	return {
	knownLocalPacks: {},
	knownRemotePacks: {},
	editedMetadata: {},
	packName: '',
	newPackName: '',
	deleteModalVisible: false,
	remotePackInstance: '',
	remotePackDownloadAs: '',

	remotePackURL: '',
	remotePackFile: null,
	}
	},

	provide() {
	return { emojiAddr: this.emojiAddr }
	},

	computed: {
	...SharedComputedObject(),
	pack() {
	return this.packName !== '' ? this.knownPacks[this.packName] : undefined
	},
	packMeta() {
	if (this.packName === '') return {}
	if (this.editedMetadata[this.packName] === undefined) {
	this.editedMetadata[this.packName] = clone(this.pack.pack)
	}

	return this.editedMetadata[this.packName]
	},
	knownPacks() {
	// Copy the object itself but not the children, so they are still passed by reference and modified
	const result = clone(this.knownLocalPacks)
	for (const instName in this.knownRemotePacks) {
	for (const instPack in this.knownRemotePacks[instName]) {
	result[`${instPack}@${instName}`] =
	this.knownRemotePacks[instName][instPack]
	}
	}

	return result
	},
	downloadWillReplaceLocal() {
	return (
	(this.remotePackDownloadAs.trim() === '' &&
	this.pack.remote &&
	this.pack.remote.baseName in this.knownLocalPacks) \|\|
	this.remotePackDownloadAs in this.knownLocalPacks
	)
	},
	},

	methods: {
	reloadEmoji() {
	this.$store.state.api.backendInteractor.reloadEmoji()
	},
	importFromFS() {
	this.$store.state.api.backendInteractor.importEmojiFromFS()
	},
	emojiAddr(name) {
	if (this.pack.remote !== undefined) {
	// Remote pack
	return `${this.pack.remote.instance}/emoji/${encodeURIComponent(this.pack.remote.baseName)}/${name}`
	} else {
	return `${useInstanceStore().server}/emoji/${encodeURIComponent(this.packName)}/${name}`
	}
	},

	createEmojiPack() {
	this.$store.state.api.backendInteractor
	.createEmojiPack({ name: this.newPackName })
	.then((resp) => resp.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	return Promise.reject(resp)
	}
	})
	.then(() => {
	this.packName = this.newPackName
	this.newPackName = ''
	})
	},
	deleteEmojiPack() {
	this.$store.state.api.backendInteractor
	.deleteEmojiPack({ name: this.packName })
	.then((resp) => resp.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	return Promise.reject(resp)
	}
	})
	.then(() => {
	delete this.editedMetadata[this.packName]

	this.deleteModalVisible = false
	this.packName = ''
	})
	},

	metaEdited(prop) {
	if (!this.pack) return

	const def = this.pack.pack[prop] \|\| ''
	const edited = this.packMeta[prop] \|\| ''
	return edited !== def
	},
	savePackMetadata() {
	this.$store.state.api.backendInteractor
	.saveEmojiPackMetadata({ name: this.packName, newData: this.packMeta })
	.then((resp) => resp.json())
	.then((resp) => {
	if (resp.error !== undefined) {
	this.displayError(resp.error)
	return
	}

	// Update actual pack data
	this.pack.pack = resp
	// Delete edited pack data, should auto-update itself
	delete this.editedMetadata[this.packName]
	})
	},

	updatePackFiles(newFiles, packName) {
	this.knownPacks[packName].files = newFiles
	this.sortPackFiles(packName)
	},

	refreshPackList() {
	useEmojiStore()
	.getAdminPacks(
	this.remotePackInstance,
	this.$store.state.api.backendInteractor.listEmojiPacks,
	)
	.then((allPacks) => {
	this.knownLocalPacks = allPacks
	for (const name of Object.keys(this.knownLocalPacks)) {
	this.sortPackFiles(name)
	}
	})
	},
	listRemotePacks() {
	useEmojiStore()
	.getAdminPacks(
	this.remotePackInstance,
	this.$store.state.api.backendInteractor.listRemoteEmojiPacks,
	)
	.then((allPacks) => {
	let inst = this.remotePackInstance
	if (!inst.startsWith('http')) {
	inst = 'https://' + inst
	}
	const instUrl = new URL(inst)
	inst = instUrl.host

	for (const packName in allPacks) {
	allPacks[packName].remote = {
	baseName: packName,
	instance: instUrl.origin,
	}
	}

	this.knownRemotePacks[inst] = allPacks
	for (const pack in this.knownRemotePacks[inst]) {
	this.sortPackFiles(`${pack}@${inst}`)
	}
	})
	.catch((data) => {
	this.displayError(data)
	})
	},
	downloadRemotePack() {
	if (this.remotePackDownloadAs.trim() === '') {
	this.remotePackDownloadAs = this.pack.remote.baseName
	}

	this.$store.state.api.backendInteractor
	.downloadRemoteEmojiPack({
	instance: this.pack.remote.instance,
	packName: this.pack.remote.baseName,
	as: this.remotePackDownloadAs,
	})
	.then((data) => data.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	return Promise.reject(resp)
	}
	})
	.then(() => {
	this.packName = this.remotePackDownloadAs
	this.remotePackDownloadAs = ''
	})
	},
	downloadRemoteURLPack() {
	this.$store.state.api.backendInteractor
	.downloadRemoteEmojiPackZIP({
	url: this.remotePackURL,
	packName: this.newPackName,
	})
	.then((data) => data.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	return Promise.reject(resp)
	}
	})
	.then(() => {
	this.packName = this.newPackName
	this.newPackName = ''
	this.remotePackURL = ''
	})
	},
	downloadRemoteFilePack() {
	this.$store.state.api.backendInteractor
	.downloadRemoteEmojiPackZIP({
	file: this.remotePackFile[0],
	packName: this.newPackName,
	})
	.then((data) => data.json())
	.then((resp) => {
	if (resp === 'ok') {
	return this.refreshPackList()
	} else {
	this.displayError(resp.error)
	return Promise.reject(resp)
	}
	})
	.then(() => {
	this.packName = this.newPackName
	this.newPackName = ''
	this.remotePackURL = ''
	})
	},

	displayError(msg) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'admin_dash.emoji.error',
	messageArgs: [msg],
	level: 'error',
	})
	},
	sortPackFiles(nameOfPack) {
	// Sort by key
	const sorted = Object.keys(this.knownPacks[nameOfPack].files)
	.sort()
	.reduce((acc, key) => {
	if (key.length === 0) return acc
	acc[key] = this.knownPacks[nameOfPack].files[key]
	return acc
	}, {})
	this.knownPacks[nameOfPack].files = sorted
	},
	},

	mounted() {
	this.refreshPackList()
	},
	}

	export default EmojiTab
	diff --git a/src/components/settings_modal/helpers/emoji_editing_popover.vue b/src/components/settings_modal/helpers/emoji_editing_popover.vue
	index 9fdcdd2338..cd422b160b 100644
	--- a/src/components/settings_modal/helpers/emoji_editing_popover.vue
	+++ b/src/components/settings_modal/helpers/emoji_editing_popover.vue
	@@ -1,333 +1,341 @@
	<template>
	<Popover
	ref="emojiPopover"
	trigger="click"
	:placement="placement"
	bound-to-selector=".emoji-list"
	popover-class="emoji-tab-edit-popover popover-default"
	:bound-to="{ x: 'container' }"
	:offset="{ y: 5 }"
	:class="{'emoji-unsaved': isEdited}"
	>
	<template #trigger>
	<slot name="trigger" />
	</template>
	<template #content>
	<h3>
	{{ title }}
	</h3>

	<StillImage
	v-if="emojiPreview"
	class="emoji"
	:src="emojiPreview"
	/>
	<div
	v-else
	class="emoji"
	/>

	<div
	v-if="newUpload"
	class="emoji-tab-popover-new-upload"
	>
	<h4>{{ $t('admin_dash.emoji.emoji_source') }}</h4>

	<div class="emoji-tab-popover-input">
	<input
	type="file"
	accept="image/*"
	class="emoji-tab-popover-file input"
	@change="uploadFile = $event.target.files"
	>
	</div>
	<div class="emoji-tab-popover-input ">
	<input
	v-model="uploadURL"
	:placeholder="$t('admin_dash.emoji.upload_url')"
	class="emoji-data-input input"
	>
	</div>
	</div>

	<div>
	<div class="emoji-tab-popover-input">
	<label>
	{{ $t('admin_dash.emoji.shortcode') }}
	<input
	v-model="editedShortcode"
	class="emoji-data-input input"
	:placeholder="$t('admin_dash.emoji.new_shortcode')"
	>
	</label>
	</div>

	<div class="emoji-tab-popover-input">
	<label>
	{{ $t('admin_dash.emoji.filename') }}

	<input
	v-model="editedFile"
	class="emoji-data-input input"
	:placeholder="$t('admin_dash.emoji.new_filename')"
	>
	</label>
	</div>

	<div
	v-if="remote !== undefined"
	class="emoji-tab-popover-input"
	>
	<label>
	{{ $t('admin_dash.emoji.copy_to') }}

	<SelectComponent
	v-model="copyToPack"
	class="form-control"
	>
	<option
	value=""
	disabled
	hidden
	>
	{{ $t('admin_dash.emoji.emoji_pack') }}
	</option>
	<option
	v-for="(pack, listPackName) in knownLocalPacks"
	:key="listPackName"
	:label="listPackName"
	>
	{{ listPackName }}
	</option>
	</SelectComponent>
	</label>
	</div>

	<!--
	For local emojis, disable the button if nothing was edited.
	For remote emojis, also disable it if a local pack is not selected.
	Remote emojis are processed by the same function that uploads new ones, as that is effectively what it does
	-->
	<button
	class="button button-default btn"
	type="button"
	:disabled="saveButtonDisabled"
	@click="(newUpload \|\| remote !== undefined) ? uploadEmoji() : saveEditedEmoji()"
	>
	{{ $t('admin_dash.emoji.save') }}
	</button>

	<template v-if="!newUpload && remote === undefined">
	<button
	class="button button-default btn emoji-tab-popover-button"
	type="button"
	@click="deleteModalVisible = true"
	>
	{{ $t('admin_dash.emoji.delete') }}
	</button>
	<button
	class="button button-default btn emoji-tab-popover-button"
	type="button"
	@click="revertEmoji"
	>
	{{ $t('admin_dash.emoji.revert') }}
	</button>
	<ConfirmModal
	v-if="deleteModalVisible"
	:title="$t('admin_dash.emoji.delete_title')"
	:cancel-text="$t('status.delete_confirm_cancel_button')"
	:confirm-text="$t('status.delete_confirm_accept_button')"
	@cancelled="deleteModalVisible = false"
	@accepted="deleteEmoji"
	>
	{{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
	</ConfirmModal>
	</template>
	</div>
	</template>
	</Popover>
	</template>

	<script>
	-import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
	import Popover from 'components/popover/popover.vue'
	import SelectComponent from 'components/select/select.vue'
	import StillImage from 'components/still-image/still-image.vue'
	+import { defineAsyncComponent } from 'vue'

	export default {
	- components: { Popover, ConfirmModal, StillImage, SelectComponent },
	+ components: {
	+ Popover,
	+ ConfirmModal: defineAsyncComponent(
	+ () => import('src/components/confirm_modal/confirm_modal.vue'),
	+ ),
	+ StillImage,
	+ SelectComponent,
	+ },
	+
	inject: ['emojiAddr'],
	props: {
	placement: {
	type: String,
	required: true,
	},

	newUpload: Boolean,

	title: {
	type: String,
	required: true,
	},
	packName: {
	type: String,
	required: true,
	},
	shortcode: {
	type: String,
	// Only exists when this is not a new upload
	default: '',
	},
	file: {
	type: String,
	// Only exists when this is not a new upload
	default: '',
	},

	// Only exists for emojis from remote packs
	remote: {
	type: Object,
	default: undefined,
	},
	knownLocalPacks: {
	type: Object,
	default: undefined,
	},
	},
	emits: ['updatePackFiles', 'displayError'],
	data() {
	return {
	uploadFile: [],
	uploadURL: '',
	editedShortcode: this.shortcode,
	editedFile: this.file,
	deleteModalVisible: false,
	copyToPack: '',
	}
	},
	computed: {
	emojiPreview() {
	if (this.newUpload && this.uploadFile.length > 0) {
	return URL.createObjectURL(this.uploadFile[0])
	} else if (this.newUpload && this.uploadURL !== '') {
	return this.uploadURL
	} else if (!this.newUpload) {
	return this.emojiAddr(this.file)
	}

	return null
	},
	isEdited() {
	return (
	!this.newUpload &&
	(this.editedShortcode !== this.shortcode \|\|
	this.editedFile !== this.file)
	)
	},
	saveButtonDisabled() {
	if (this.remote === undefined)
	return this.newUpload
	? this.uploadURL === '' && this.uploadFile.length == 0
	: !this.isEdited
	else return this.copyToPack === ''
	},
	},
	methods: {
	saveEditedEmoji() {
	if (!this.isEdited) return

	this.$store.state.api.backendInteractor
	.updateEmojiFile({
	packName: this.packName,
	shortcode: this.shortcode,
	newShortcode: this.editedShortcode,
	newFilename: this.editedFile,
	force: false,
	})
	.then((resp) => {
	if (resp.error !== undefined) {
	this.$emit('displayError', resp.error)
	return Promise.reject(resp.error)
	}

	return resp.json()
	})
	.then((resp) => this.$emit('updatePackFiles', resp))
	},
	uploadEmoji() {
	let packName = this.remote === undefined ? this.packName : this.copyToPack
	this.$store.state.api.backendInteractor
	.addNewEmojiFile({
	packName: packName,
	file:
	this.remote === undefined
	? this.uploadURL !== ''
	? this.uploadURL
	: this.uploadFile[0]
	: this.emojiAddr(this.file),
	shortcode: this.editedShortcode,
	filename: this.editedFile,
	})
	.then((resp) => resp.json())
	.then((resp) => {
	if (resp.error !== undefined) {
	this.$emit('displayError', resp.error)
	return
	}

	this.$emit('updatePackFiles', resp, packName)
	this.$refs.emojiPopover.hidePopover()

	this.editedFile = ''
	this.editedShortcode = ''
	this.uploadFile = []
	})
	},
	revertEmoji() {
	this.editedFile = this.file
	this.editedShortcode = this.shortcode
	},
	deleteEmoji() {
	this.deleteModalVisible = false

	this.$store.state.api.backendInteractor
	.deleteEmojiFile({ packName: this.packName, shortcode: this.shortcode })
	.then((resp) => resp.json())
	.then((resp) => {
	if (resp.error !== undefined) {
	this.$emit('displayError', resp.error)
	return
	}

	this.$emit('updatePackFiles', resp, this.packName)
	})
	},
	},
	}
	</script>

	<style lang="scss">
	.emoji-tab-edit-popover {
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.5em;

	.emoji-tab-popover-new-upload {
	margin-bottom: 2em;
	}

	.emoji {
	width: 2.3em;
	height: 2.3em;
	}

	.Select {
	display: inline-block;
	}

	h4 {
	margin-bottom: 1em;
	margin-top: 1em;
	}
	}
	</style>
	diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
	index 5c157e068b..e41f098b41 100644
	--- a/src/components/settings_modal/settings_modal.js
	+++ b/src/components/settings_modal/settings_modal.js
	@@ -1,272 +1,275 @@
	import { cloneDeep, isEqual } from 'lodash'
	import { mapActions, mapState } from 'pinia'
	+import { defineAsyncComponent } from 'vue'

	import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
	import Modal from 'src/components/modal/modal.vue'
	import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
	import Popover from '../popover/popover.vue'

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

	import {
	LOCAL_ONLY_KEYS,
	ROOT_CONFIG,
	ROOT_CONFIG_DEFINITIONS,
	validateSetting,
	} from 'src/modules/default_config_state.js'
	import {
	newExporter,
	newImporter,
	} from 'src/services/export_import/export_import.js'
	import getResettableAsyncComponent from 'src/services/resettable_async_component.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faWindowMinimize } from '@fortawesome/free-regular-svg-icons'
	import {
	faChevronDown,
	faFileDownload,
	faFileUpload,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	const PLEROMAFE_SETTINGS_MAJOR_VERSION = 1
	const PLEROMAFE_SETTINGS_MINOR_VERSION = 0

	library.add(
	faTimes,
	faWindowMinimize,
	faFileUpload,
	faFileDownload,
	faChevronDown,
	)

	const SettingsModal = {
	data() {
	return {
	dataImporter: newImporter({
	validator: this.importValidator,
	onImport: this.onImport,
	onImportFailure: this.onImportFailure,
	}),
	dataThemeExporter: newExporter({
	filename: 'pleromafe_settings.full',
	getExportedObject: () => this.generateExport(true),
	}),
	dataExporter: newExporter({
	filename: 'pleromafe_settings',
	getExportedObject: () => this.generateExport(),
	}),
	}
	},
	components: {
	Modal,
	Popover,
	Checkbox,
	- ConfirmModal,
	+ ConfirmModal: defineAsyncComponent(
	+ () => import('src/components/confirm_modal/confirm_modal.vue'),
	+ ),
	+
	SettingsModalUserContent: getResettableAsyncComponent(
	() => import('./settings_modal_user_content.vue'),
	{
	loadingComponent: PanelLoading,
	errorComponent: AsyncComponentError,
	delay: 0,
	},
	),
	SettingsModalAdminContent: getResettableAsyncComponent(
	() => import('./settings_modal_admin_content.vue'),
	{
	loadingComponent: PanelLoading,
	errorComponent: AsyncComponentError,
	delay: 0,
	},
	),
	},
	methods: {
	closeModal() {
	useInterfaceStore().closeSettingsModal()
	},
	peekModal() {
	useInterfaceStore().togglePeekSettingsModal()
	},
	importValidator(data) {
	if (!Array.isArray(data._pleroma_settings_version)) {
	return {
	messageKey: 'settings.file_import_export.invalid_file',
	}
	}

	const [major, minor] = data._pleroma_settings_version

	if (major > PLEROMAFE_SETTINGS_MAJOR_VERSION) {
	return {
	messageKey: 'settings.file_export_import.errors.file_too_new',
	messageArgs: {
	fileMajor: major,
	feMajor: PLEROMAFE_SETTINGS_MAJOR_VERSION,
	},
	}
	}

	if (major < PLEROMAFE_SETTINGS_MAJOR_VERSION) {
	return {
	messageKey: 'settings.file_export_import.errors.file_too_old',
	messageArgs: {
	fileMajor: major,
	feMajor: PLEROMAFE_SETTINGS_MAJOR_VERSION,
	},
	}
	}

	if (minor > PLEROMAFE_SETTINGS_MINOR_VERSION) {
	useInterfaceStore().pushGlobalNotice({
	level: 'warning',
	messageKey: 'settings.file_export_import.errors.file_slightly_new',
	})
	}

	return true
	},
	onImportFailure(result) {
	if (result.error) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'settings.invalid_settings_imported',
	level: 'error',
	})
	} else {
	useInterfaceStore().pushGlobalNotice({
	...result.validationResult,
	level: 'error',
	})
	}
	},
	onImport(input) {
	if (!input) return
	const { _pleroma_settings_version, ...data } = input

	Object.entries(data).forEach(([path, value]) => {
	const definition = ROOT_CONFIG_DEFINITIONS[path]

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

	if (finalValue === undefined) return

	if (LOCAL_ONLY_KEYS.has(path)) {
	useLocalConfigStore().set({ path, value: finalValue })
	} else {
	if (path.startsWith('muteFilters')) {
	Object.keys(
	useMergedConfigStore().mergedConfig.muteFilters,
	).forEach((key) => {
	useSyncConfigStore().unsetPreference({
	path: `simple.${path}.${key}`,
	})
	})

	Object.entries(value).forEach(([key, filter]) => {
	useSyncConfigStore().setPreference({
	path: `simple.${path}.${key}`,
	value: filter,
	})
	})
	} else {
	if (finalValue !== undefined) {
	useSyncConfigStore().setPreference({
	path: `simple.${path}`,
	value: finalValue,
	})
	}
	}
	}
	})
	useSyncConfigStore().pushSyncConfig()
	},
	restore() {
	this.dataImporter.importData()
	},
	backup() {
	this.dataExporter.exportData()
	},
	backupWithTheme() {
	this.dataThemeExporter.exportData()
	},
	generateExport(theme = false) {
	const config = useMergedConfigStore().mergedConfigWithoutDefaults
	let sample = config
	if (!theme) {
	const ignoreList = new Set([
	'theme',
	'customTheme',
	'customThemeSource',
	'colors',
	'style',
	'styleCustomData',
	'palette',
	'paletteCustomData',
	'themeChecksum',
	])

	sample = Object.fromEntries(
	Object.entries(sample).filter(
	([key, value]) => !ignoreList.has(key) && value !== undefined,
	),
	)
	}
	const clone = cloneDeep(sample)
	clone._pleroma_settings_version = [
	PLEROMAFE_SETTINGS_MAJOR_VERSION,
	PLEROMAFE_SETTINGS_MINOR_VERSION,
	]
	return clone
	},
	resetAdminDraft() {
	this.$store.commit('resetAdminDraft')
	},
	pushAdminDraft() {
	this.$store.dispatch('pushAdminDraft')
	},
	...mapActions(useInterfaceStore, [
	'temporaryChangesRevert',
	'temporaryChangesConfirm',
	]),
	},
	computed: {
	...mapState(useInterfaceStore, {
	temporaryChangesCountdown: (store) => store.temporaryChangesCountdown,
	currentSaveStateNotice: (store) => store.settings.currentSaveStateNotice,
	modalActivated: (store) => store.settingsModalState !== 'hidden',
	modalMode: (store) => store.settingsModalMode,
	modalOpenedOnceUser: (store) => store.settingsModalLoadedUser,
	modalOpenedOnceAdmin: (store) => store.settingsModalLoadedAdmin,
	modalPeeked: (store) => store.settingsModalState === 'minimized',
	}),
	expertLevel: {
	get() {
	return useMergedConfigStore().mergedConfig.expertLevel > 0
	},
	set(value) {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'expertLevel',
	value: value ? 1 : 0,
	})
	},
	},
	adminDraftAny() {
	return !isEqual(
	this.$store.state.adminSettings.config,
	this.$store.state.adminSettings.draft,
	)
	},
	},
	}

	export default SettingsModal
	diff --git a/src/components/staff_panel/staff_panel.js b/src/components/staff_panel/staff_panel.js
	index b659b3b75b..818e2efd02 100644
	--- a/src/components/staff_panel/staff_panel.js
	+++ b/src/components/staff_panel/staff_panel.js
	@@ -1,37 +1,37 @@
	-import { map, groupBy } from 'lodash'
	+import { groupBy, map } from 'lodash'
	import { mapGetters, mapState } from 'vuex'

	import BasicUserCard from '../basic_user_card/basic_user_card.vue'

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

	const StaffPanel = {
	created() {
	const nicknames = useInstanceStore().staffAccounts
	nicknames.forEach((nickname) =>
	this.$store.dispatch('fetchUserIfMissing', nickname),
	)
	},
	components: {
	BasicUserCard,
	},
	computed: {
	groupedStaffAccounts() {
	const staffAccounts = map(this.staffAccounts, this.findUserByName).filter(
	(_) => _,
	)
	const groupedStaffAccounts = groupBy(staffAccounts, 'role')

	return [
	{ role: 'admin', users: groupedStaffAccounts.admin },
	{ role: 'moderator', users: groupedStaffAccounts.moderator },
	].filter((group) => group.users)
	},
	...mapGetters(['findUserByName']),
	...mapState({
	staffAccounts: (state) => useInstanceStore().staffAccounts,
	}),
	},
	}

	export default StaffPanel
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index af177d2981..4e4447f243 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,671 +1,669 @@
	import { unescape as ldUnescape, uniqBy } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	+import AvatarList from 'src/components/avatar_list/avatar_list.vue'
	+import EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue'
	import MentionLink from 'src/components/mention_link/mention_link.vue'
	import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
	import 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 'src/components/avatar_list/avatar_list.vue'
	-import EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue'
	import StatusContent from 'src/components/status_content/status_content.vue'
	import Timeago from 'src/components/timeago/timeago.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserLink from 'src/components/user_link/user_link.vue'
	import UserListPopover from 'src/components/user_list_popover/user_list_popover.vue'
	import UserPopover from 'src/components/user_popover/user_popover.vue'
	+import { muteFilterHits } from '../../services/status_parser/status_parser.js'
	+import {
	+ highlightClass,
	+ highlightStyle,
	+} from '../../services/user_highlighter/user_highlighter.js'

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

	import 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: defineAsyncComponent(
	() => import('src/components/post_status_form/post_status_form.vue'),
	),
	UserAvatar,
	AvatarList,
	Timeago,
	StatusPopover: defineAsyncComponent(
	- () => import( 'src/components/status_popover/status_popover.vue')
	+ () => import('src/components/status_popover/status_popover.vue'),
	),
	UserListPopover,
	EmojiReactions,
	StatusContent,
	RichContent,
	MentionLink,
	MentionsLine,
	UserPopover,
	UserLink,
	- Quote: defineAsyncComponent(
	- () => import('src/components/quote/quote.vue')
	- ),
	+ Quote: defineAsyncComponent(() => import('src/components/quote/quote.vue')),
	StatusActionButtons,
	},
	props: [
	'statusoid',
	'replies',

	'expandable',
	'focused',
	'highlight',
	'compact',
	'isPreview',
	'noHeading',
	'inlineExpanded',
	'showPinned',
	'inProfile',
	'inConversation',
	'inQuote',
	'profileUserId',
	'simpleTree',
	'showOtherRepliesAsButton',
	'dive',
	'ignoreMute',

	'controlledThreadDisplayStatus',
	'controlledToggleThreadDisplay',
	'controlledShowingTall',
	'controlledToggleShowingTall',
	'controlledExpandingSubject',
	'controlledToggleExpandingSubject',
	'controlledShowingLongSubject',
	'controlledToggleShowingLongSubject',
	'controlledReplying',
	'controlledToggleReplying',
	'controlledMediaPlaying',
	'controlledSetMediaPlaying',
	],
	emits: ['goto', 'toggleExpanded'],
	data() {
	return {
	uncontrolledReplying: false,
	unmuted: false,
	userExpanded: false,
	uncontrolledMediaPlaying: [],
	suspendable: true,
	error: null,
	headTailLinks: null,
	}
	},
	computed: {
	...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
	showReasonMutedThread() {
	return (
	(this.status.thread_muted \|\|
	(this.status.reblog && this.status.reblog.thread_muted)) &&
	!this.inConversation
	)
	},
	allowNonSquareEmoji() {
	return this.mergedConfig.nonSquareEmoji
	},
	repeaterClass() {
	const user = this.statusoid.user
	return highlightClass(user)
	},
	userClass() {
	const user = this.retweet
	? this.statusoid.retweeted_status.user
	: this.statusoid.user
	return highlightClass(user)
	},
	deleted() {
	return this.statusoid.deleted
	},
	repeaterStyle() {
	const user = this.statusoid.user
	return highlightStyle(useUserHighlightStore().get(user.screen_name))
	},
	userStyle() {
	if (this.noHeading) return
	const user = this.retweet
	? this.statusoid.retweeted_status.user
	: this.statusoid.user
	return highlightStyle(useUserHighlightStore().get(user.screen_name))
	},
	userProfileLink() {
	return this.generateUserProfileLink(
	this.status.user.id,
	this.status.user.screen_name,
	)
	},
	replyProfileLink() {
	if (this.isReply) {
	const user = this.$store.getters.findUser(
	this.status.in_reply_to_user_id,
	)
	// FIXME Why user not found sometimes???
	return user ? user.statusnet_profile_url : 'NOT_FOUND'
	}
	},
	retweet() {
	return !!this.statusoid.retweeted_status
	},
	retweeterUser() {
	return this.statusoid.user
	},
	retweeter() {
	return this.statusoid.user.name \|\| this.statusoid.user.screen_name_ui
	},
	retweeterHtml() {
	return this.statusoid.user.name
	},
	retweeterProfileLink() {
	return this.generateUserProfileLink(
	this.statusoid.user.id,
	this.statusoid.user.screen_name,
	)
	},
	status() {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	statusFromGlobalRepository() {
	// NOTE: Consider to replace status with statusFromGlobalRepository
	return this.$store.state.statuses.allStatusesObject[this.status.id]
	},
	loggedIn() {
	return !!this.currentUser
	},
	muteFilterHits() {
	return muteFilterHits(
	Object.values(useSyncConfigStore().prefsStorage.simple.muteFilters),
	this.status,
	)
	},
	botStatus() {
	return this.status.user.actor_type === 'Service'
	},
	showActorTypeIndicator() {
	return !this.hideBotIndication
	},
	sensitiveStatus() {
	return this.status.nsfw
	},
	mentionsLine() {
	if (!this.headTailLinks) return []
	const writtenSet = new Set(
	this.headTailLinks.writtenMentions.map((_) => _.url),
	)
	return this.status.attentions
	.filter((attn) => {
	// no reply user
	return (
	attn.id !== this.status.in_reply_to_user_id &&
	// no self-replies
	attn.statusnet_profile_url !==
	this.status.user.statusnet_profile_url &&
	// don't include if mentions is written
	!writtenSet.has(attn.statusnet_profile_url)
	)
	})
	.map((attn) => ({
	url: attn.statusnet_profile_url,
	content: attn.screen_name,
	userId: attn.id,
	}))
	},
	hasMentionsLine() {
	return this.mentionsLine.length > 0
	},
	muteReasons() {
	return [
	this.userIsMuted ? 'user' : null,
	this.status.thread_muted ? 'thread' : null,
	this.muteFilterHits.length > 0 ? 'filtered' : null,
	this.muteBotStatuses && this.botStatus ? 'bot' : null,
	this.muteSensitiveStatuses && this.sensitiveStatus ? 'nsfw' : null,
	].filter((_) => _)
	},
	muteLocalized() {
	if (this.muteReasons.length === 0) return null
	const mainReason = () => {
	switch (this.muteReasons[0]) {
	case 'user':
	return this.$t('status.muted_user')
	case 'thread':
	return this.$t('status.thread_muted')
	case 'filtered':
	return this.$t(
	'status.muted_filters',
	{
	name: this.muteFilterHits[0].name,
	filterMore: this.muteFilterHits.length - 1,
	},
	this.muteFilterHits.length,
	)
	case 'bot':
	return this.$t('status.bot_muted')
	case 'nsfw':
	return this.$t('status.sensitive_muted')
	}
	}
	if (this.muteReasons.length > 1) {
	return this.$t(
	'status.multi_reason_mute',
	{
	main: mainReason(),
	numReasonsMore: this.muteReasons.length - 1,
	},
	this.muteReasons.length - 1,
	)
	} else {
	return mainReason()
	}
	},
	muted() {
	if (this.ignoreMute) return false
	if (this.statusoid.user.id === this.currentUser.id) return false
	return !this.unmuted && !this.shouldNotMute && this.muteReasons.length > 0
	},
	userIsMuted() {
	if (this.statusoid.user.id === this.currentUser.id) return false
	const { status } = this
	const { reblog } = status
	const relationship = this.$store.getters.relationship(status.user.id)
	const 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.ignoreMute) return true
	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 useMergedConfigStore().mergedConfig
	},
	isSuspendable() {
	return !this.replying && this.mediaPlaying.length === 0
	},
	inThreadForest() {
	return !!this.controlledThreadDisplayStatus
	},
	threadShowing() {
	return this.controlledThreadDisplayStatus === 'showing'
	},
	visibilityLocalized() {
	return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
	},
	isEdited() {
	return this.status.edited_at !== null
	},
	editingAvailable() {
	return useInstanceCapabilitiesStore().editingAvailable
	},
	quoteId() {
	return this.status.quote_id
	},
	quoteUrl() {
	return this.status.quote_url
	},
	quoteVisible() {
	return this.status.quote_visible
	},
	quoteExpanded() {
	return !this.inQuote
	},
	scrobblePresent() {
	if (this.mergedConfig.hideScrobbles) return false
	if (!this.status.user?.latestScrobble) return false
	const value = this.mergedConfig.hideScrobblesAfter.match(/\d+/gs)[0]
	const unit = this.mergedConfig.hideScrobblesAfter.match(/\D+/gs)[0]
	let multiplier = 60 * 1000 // minutes is smallest unit
	switch (unit) {
	case 'm':
	break
	case 'h':
	multiplier *= 60 // hour
	break
	case 'd':
	multiplier *= 60 // hour
	multiplier *= 24 // day
	break
	}
	const maxAge = Number(value) * multiplier
	const createdAt = Date.parse(this.status.user.latestScrobble.created_at)
	const age = Date.now() - createdAt
	if (age > maxAge) return false
	return this.status.user.latestScrobble.artist
	},
	scrobble() {
	return this.status.user?.latestScrobble
	},
	},
	methods: {
	visibilityIcon(visibility) {
	switch (visibility) {
	case 'private':
	return 'lock'
	case 'unlisted':
	return 'lock-open'
	case 'direct':
	return 'envelope'
	case 'local':
	return 'igloo'
	default:
	return 'globe'
	}
	},
	showError(error) {
	this.error = error
	},
	clearError() {
	this.error = undefined
	},
	toggleReplying() {
	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)
	}
	}
	},
	},
	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/action_button.js b/src/components/status_action_buttons/action_button.js
	index 2abf2f941a..ab5add506c 100644
	--- a/src/components/status_action_buttons/action_button.js
	+++ b/src/components/status_action_buttons/action_button.js
	@@ -1,165 +1,169 @@
	+import { defineAsyncComponent } from 'vue'
	+
	import Popover from 'src/components/popover/popover.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	-import { defineAsyncComponent } from 'vue'

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

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

	faChevronRight,
	faChevronDown,

	faReply,
	faRetweet,
	faStar,
	faStarRegular,
	faFaceSmileBeam,

	faBookmark,
	faBookmarkRegular,
	faEyeSlash,
	faThumbtack,
	faShareAlt,
	faExternalLinkAlt,
	faHistory,
	)

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

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

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

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

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

	library.add(faEllipsisH)

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

	export default StatusActionButtons
	diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
	index bdb95e83b4..e0432048a9 100644
	--- a/src/components/status_action_buttons/status_action_buttons.vue
	+++ b/src/components/status_action_buttons/status_action_buttons.vue
	@@ -1,135 +1,135 @@
	<template>
	<div class="StatusActionButtons">
	<span
	class="quick-action-buttons"
	:class="{ '-pin': showPin }"
	>
	<span
	v-for="button in quickButtons"
	:key="button.name"
	class="quick-action"
	:class="{ '-pin': showPin, '-toggle': button.dropdown?.(), '-with-extra': button.name === 'bookmark' }"
	>
	<ActionButtonContainer
	:class="{ '-pin': showPin }"
	:button="button"
	:status="status"
	:extra="false"
	:func-arg="funcArg"
	:get-class="getClass"
	:get-component="getComponent"
	:close="() => { /* no-op */ }"
	:do-action="doAction"
	@emoji-picker-shown="onEmojiPickerShown"
	/>
	<button
	v-if="showPin && currentUser"
	type="button"
	class="button-unstyled pin-action-button"
	:title="$t('general.unpin')"
	:aria-pressed="true"
	@click.stop.prevent="unpin(button)"
	>
	<FAIcon
	v-if="showPin && currentUser"
	fixed-width
	icon="thumbtack"
	/>
	</button>
	</span>
	<Popover
	trigger="click"
	:trigger-attrs="triggerAttrs"
	class="quick-action"
	:tabindex="0"
	placement="bottom"
	:offset="{ y: 5 }"
	remove-padding
	@close="onExtraClose"
	>
	<template #trigger>
	<FAIcon
	class="action-button-inner"
	icon="ellipsis-h"
	/>
	</template>
	<template #content="{close, resize}">
	<div
	:id="`popup-menu-${randomSeed}`"
	class="dropdown-menu extra-action-buttons"
	role="menu"
	>
	<div
	v-for="button in extraButtons"
	:key="button.name"
	class="menu-item dropdown-item extra-action -icon"
	:disabled="getClass(button).disabled"
	:class="{ disabled: getClass(button).disabled }"
	>
	<ActionButtonContainer
	:button="button"
	:status="status"
	:extra="true"
	:func-arg="funcArg"
	:get-class="getClass"
	:get-component="getComponent"
	:outer-close="close"
	:do-action="doAction"
	/>
	<button
	v-if="showPin && currentUser"
	type="button"
	class="button-unstyled pin-action-button extra-button"
	:title="$t('general.pin')"
	:aria-pressed="false"
	@click.stop.prevent="pin(button)"
	>
	<FAIcon
	v-if="showPin && currentUser"
	fixed-width
	class="fa-scale-110"
	transform="rotate-45"
	icon="thumbtack"
	/>
	</button>
	</div>
	<div
	v-if="currentUser"
	class="menu-item dropdown-item extra-action -icon"
	>
	<button
	class="main-button"
	role="menuitem"
	:tabindex="0"
	@click.stop="() => { resize(); showPin = !showPin }"
	>
	<FAIcon
	class="fa-scale-110"
	fixed-width
	icon="wrench"
	/><span>{{ $t('nav.edit_pinned') }}</span>
	</button>
	</div>
	</div>
	</template>
	</Popover>
	</span>

	<teleport to="#modal">
	- <confirm-modal
	+ <ConfirmModal
	v-if="showingConfirmDialog"
	:title="currentConfirmTitle"
	:confirm-text="currentConfirmOkText"
	:cancel-text="currentConfirmCancelText"
	@accepted="currentConfirmAction"
	@cancelled="showingConfirmDialog = false"
	>
	{{ currentConfirmBody }}
	- </confirm-modal>
	+ </ConfirmModal>
	</teleport>
	</div>
	</template>

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

	<style lang="scss" src="./status_action_buttons.scss"></style>
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index d7a9d44037..477df383a0 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,600 +1,605 @@
	-import { escape as ldEscape, isEqual, merge, unescape as ldUnescape } from 'lodash'
	+import {
	+ isEqual,
	+ escape as ldEscape,
	+ unescape as ldUnescape,
	+ merge,
	+} from 'lodash'
	import { mapState } from 'pinia'

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

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

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

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

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

	export default {
	props: {
	// Enables all the options for profile editing, used in settings -> profile tab
	editable: {
	required: false,
	default: false,
	type: Boolean,
	},
	// ID of user to show data of
	userId: {
	required: true,
	type: String,
	},
	// Use a compact layout that hides bio, stats etc.
	hideBio: {
	required: false,
	default: false,
	type: Boolean,
	},
	// default - open profile, 'zoom' - zoom, function - call function
	avatarAction: {
	required: false,
	type: String,
	default: 'default',
	},
	// Show note editor if supported
	hasNoteEditor: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Show close icon (for popovers)
	showClose: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Show close icon (for popovers)
	showExpand: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Disable forced 3:1 aspect ratio
	compact: {
	required: false,
	type: Boolean,
	default: false,
	},
	},
	components: {
	DialogModal,
	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: {
	escapedNewBio() {
	return ldEscape(this.newBio).replace(/\n/g, '<br>')
	},
	somethingToSave() {
	if (this.newName !== this.user.name_unescaped) return true
	if (this.newBio !== ldUnescape(this.user.description)) return true
	if (this.newAvatar !== null) return true
	if (this.newBanner !== null) return true
	if (this.newActorType !== this.user.actor_type) return true
	if (this.newBirthday !== this.user.birthday) return true
	if (this.newShowBirthday !== this.user.show_birthday) return true
	if (this.newShowRole !== this.user.show_role) return true
	if (
	!isEqual(
	this.newFields,
	this.user.fields?.map((field) => ({
	name: field.name,
	value: field.value,
	})),
	)
	)
	return true
	return false
	},
	groupActorAvailable() {
	return useInstanceCapabilitiesStore().groupActorAvailable
	},
	availableActorTypes() {
	return this.groupActorAvailable
	? ['Person', 'Service', 'Group']
	: ['Person', 'Service']
	},
	user() {
	return this.$store.getters.findUser(this.userId)
	},
	role() {
	return this.user.role
	},
	relationship() {
	return this.$store.getters.relationship(this.userId)
	},
	isOtherUser() {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl() {
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn() {
	return this.$store.state.users.currentUser
	},
	dailyAvg() {
	const days = Math.ceil(
	(new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000),
	)
	return Math.round(this.user.statuses_count / days)
	},
	emoji() {
	return useEmojiStore().customEmoji.map((e) => ({
	shortcode: e.displayText,
	static_url: e.imageUrl,
	url: e.imageUrl,
	}))
	},
	userHighlightType: {
	get() {
	return useUserHighlightStore().get(this.user.screen_name).type
	},
	set(type) {
	if (type !== 'disabled') {
	useUserHighlightStore().setAndSave({
	user: this.user.screen_name,
	value: { type },
	})
	} else {
	useUserHighlightStore().unsetAndSave({ user: this.user.screen_name })
	}
	},
	},
	userHighlightColor: {
	get() {
	return useUserHighlightStore().get(this.user.screen_name).color
	},
	set(color) {
	useUserHighlightStore().setAndSave({
	user: this.user.screen_name,
	value: { color },
	})
	},
	},
	visibleRole() {
	if (!this.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' },
	)
	)
	},
	formattedJoinDate() {
	const browserLocale = localeService.internalToBrowserLocale(
	this.$i18n.locale,
	)
	return (
	this.user.created_at &&
	new Date(Date.parse(this.user.created_at)).toLocaleDateString(
	browserLocale,
	{ timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' },
	)
	)
	},

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

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

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

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

	this.editImage = false
	}

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

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

	this.newAvatar = null
	this.newAvatarFile = null

	this.newBanner = null
	this.newBannerFile = null

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

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

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

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

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

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

	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_timed_filter_modal/user_timed_filter_modal.js b/src/components/user_timed_filter_modal/user_timed_filter_modal.js
	index 528f92ddfe..f0c1509991 100644
	--- a/src/components/user_timed_filter_modal/user_timed_filter_modal.js
	+++ b/src/components/user_timed_filter_modal/user_timed_filter_modal.js
	@@ -1,112 +1,116 @@
	+import { defineAsyncComponent } from 'vue'
	+
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
	import Select from 'src/components/select/select.vue'

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

	import { durationStrToMs } from 'src/services/date_utils/date_utils.js'

	const UserTimedFilterModal = {
	data() {
	const action = this.isMute
	? useMergedConfigStore().mergedConfig.onMuteDefaultAction
	: useMergedConfigStore().mergedConfig.onBlockDefaultAction
	const doAsk = action === 'ask'
	const defaultValues = {}

	if (doAsk \|\| action === 'forever') {
	defaultValues.expiration = 14
	defaultValues.expirationUnit = 'd'
	if (action === 'forever') {
	defaultValues.forever = true
	}
	} else {
	const unit = action.replace(/[0-9,.]+/, '')
	const value = action.replace(/[^0-9,.]+/, '')
	defaultValues.expiration = value
	defaultValues.expirationUnit = unit
	}

	return {
	showing: false,
	forever: false,
	dontAskAgain: false,
	...defaultValues,
	}
	},
	components: {
	- ConfirmModal,
	+ ConfirmModal: defineAsyncComponent(
	+ () => import('src/components/confirm_modal/confirm_modal.vue'),
	+ ),
	+
	Select,
	Checkbox,
	},
	props: {
	isMute: Boolean,
	user: Object,
	},
	computed: {
	shouldConfirm() {
	if (this.isMute) {
	return useMergedConfigStore().mergedConfig.onMuteDefaultAction === 'ask'
	} else {
	return (
	useMergedConfigStore().mergedConfig.onBlockDefaultAction === 'ask'
	)
	}
	},
	expiryString() {
	return this.expiration.toString() + this.expirationUnit
	},
	expirySeconds() {
	return Math.floor(durationStrToMs(this.expiryString) / 1000)
	},
	requestBody() {
	const object = { id: this.user.id }
	if (!this.forever) {
	object.expiresIn = this.expirySeconds
	}
	return object
	},
	},
	watch: {
	expiration(newVal) {
	if (newVal <= 0) {
	this.expiration = 1
	}
	},
	},
	methods: {
	optionallyPrompt() {
	if (this.shouldConfirm) {
	this.showing = true
	} else {
	this.accept()
	}
	},
	accept() {
	if (this.isMute) {
	this.$store.dispatch('muteUser', this.requestBody)
	if (this.dontAskAgain) {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'onMuteDefaultAction',
	value: this.expiryString,
	})
	}
	} else {
	this.$store.dispatch('blockUser', this.requestBody)
	if (this.dontAskAgain) {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'onBlockDefaultAction',
	value: this.expiryString,
	})
	}
	}
	this.showing = false
	},
	cancel() {
	this.showing = false
	},
	},
	}

	export default UserTimedFilterModal
	diff --git a/src/components/user_timed_filter_modal/user_timed_filter_modal.vue b/src/components/user_timed_filter_modal/user_timed_filter_modal.vue
	index 0ccf2812c7..055c2f7f40 100644
	--- a/src/components/user_timed_filter_modal/user_timed_filter_modal.vue
	+++ b/src/components/user_timed_filter_modal/user_timed_filter_modal.vue
	@@ -1,88 +1,88 @@
	<template>
	- <confirm-modal
	+ <ConfirmModal
	v-if="showing"
	class="UserTimedFilterModal"
	:title="$t(isMute ? $t('user_card.mute') : $t('user_card.block'))"
	:confirm-text="$t(isMute ? 'user_card.mute_confirm_accept_button' : 'user_card.block_confirm_accept_button')"
	:cancel-text="$t(isMute ? 'user_card.mute_confirm_cancel_button' : 'user_card.block_confirm_cancel_button')"
	@accepted="accept"
	@cancelled="cancel"
	>
	<p>
	{{ $t(isMute ? 'user_card.expire_mute_message' : 'user_card.expire_block_message', [user.screen_name]) }}
	</p>
	<div>
	{{ $t('user_card.expire_in') }}
	<span class="expirationTime">
	<input
	id="userFilterExpires"
	v-model="expiration"
	class="input input-expire-in"
	:class="{ disabled: forever }"
	:disabled="forever"
	min="1"
	type="number"
	>
	<Select
	id="userFilterExpiresUnit"
	v-model="expirationUnit"
	class="input unit-input unstyled"
	:disabled="forever"
	>
	<option
	key="s"
	value="s"
	>
	{{ $t('time.unit.seconds_suffix') }}
	</option>
	<option
	key="m"
	value="m"
	>
	{{ $t('time.unit.minutes_suffix') }}
	</option>
	<option
	key="h"
	value="h"
	>
	{{ $t('time.unit.hours_suffix') }}
	</option>
	<option
	key="d"
	value="d"
	>
	{{ $t('time.unit.days_suffix') }}
	</option>
	</Select>
	</span>

	{{ $t('user_card.mute_or') }}

	<Checkbox
	id="forever"
	v-model="forever"
	name="forever"
	class="input-forever"
	>
	{{ $t('user_card.mute_block_never') }}
	</Checkbox>
	</div>

	<template #footerLeft>
	<div class="footer-left-checkbox">
	<Checkbox
	id="dontAskAgain"
	v-model="dontAskAgain"
	name="dontAskAgain"
	class="input-dont-ask-again"
	>
	{{ $t(isMute ? 'user_card.dont_ask_again_mute' : 'user_card.dont_ask_again_block') }}
	</Checkbox>
	</div>
	</template>
	- </confirm-modal>
	+ </ConfirmModal>
	</template>

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

	<style lang="scss" src="./user_timed_filter_modal.scss" />
	diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
	index 2f8892f277..f6375dfede 100644
	--- a/src/lib/persisted_state.js
	+++ b/src/lib/persisted_state.js
	@@ -1,264 +1,264 @@
	-import { cloneDeep, each, get, set, merge } from 'lodash'
	+import { cloneDeep, each, get, merge, set } from 'lodash'

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

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

	let loaded = false

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

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

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

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

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

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

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

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

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

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

	return {}
	}

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

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

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

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

	loadedGuard.loaded = true
	resolveLoaded()

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

	return {
	$persistLoaded: loadedPromise,
	}
	}
	diff --git a/src/services/chat_service/chat_service.js b/src/services/chat_service/chat_service.js
	index 314f9bb0ce..eec267dde7 100644
	--- a/src/services/chat_service/chat_service.js
	+++ b/src/services/chat_service/chat_service.js
	@@ -1,255 +1,251 @@
	-import { maxBy, minBy } from 'lodash'
	+import { maxBy, minBy, orderBy, sortBy, uniqueId } from 'lodash'

	const empty = (chatId) => {
	return {
	idIndex: {},
	idempotencyKeyIndex: {},
	messages: [],
	newMessageCount: 0,
	lastSeenMessageId: '0',
	chatId,
	minId: undefined,
	maxId: undefined,
	}
	}

	const clear = (storage) => {
	const failedMessageIds = []

	for (const message of storage.messages) {
	if (message.error) {
	failedMessageIds.push(message.id)
	} else {
	delete storage.idIndex[message.id]
	delete storage.idempotencyKeyIndex[message.idempotency_key]
	}
	}

	storage.messages = storage.messages.filter((m) =>
	failedMessageIds.includes(m.id),
	)
	storage.newMessageCount = 0
	storage.lastSeenMessageId = '0'
	storage.minId = undefined
	storage.maxId = undefined
	}

	const deleteMessage = (storage, messageId) => {
	if (!storage) {
	return
	}
	storage.messages = storage.messages.filter((m) => m.id !== messageId)
	delete storage.idIndex[messageId]

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

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

	const cullOlderMessages = (storage) => {
	const maxIndex = storage.messages.length
	const minIndex = maxIndex - 50
	if (maxIndex <= 50) return

	- storage.messages = _.sortBy(storage.messages, ['id'])
	+ storage.messages = sortBy(storage.messages, ['id'])
	storage.minId = storage.messages[minIndex].id
	for (const message of storage.messages) {
	if (message.id < storage.minId) {
	delete storage.idIndex[message.id]
	delete storage.idempotencyKeyIndex[message.idempotency_key]
	}
	}
	storage.messages = storage.messages.slice(minIndex, maxIndex)
	}

	const handleMessageError = (storage, fakeId, isRetry) => {
	if (!storage) {
	return
	}
	const fakeMessage = storage.idIndex[fakeId]
	if (fakeMessage) {
	fakeMessage.error = true
	fakeMessage.pending = false
	if (!isRetry) {
	// Ensure the failed message doesn't stay at the bottom of the list.
	- const lastPersistedMessage = _.orderBy(
	+ const lastPersistedMessage = orderBy(
	storage.messages,
	['pending', 'id'],
	['asc', 'desc'],
	)[0]
	if (lastPersistedMessage) {
	const oldId = fakeMessage.id
	fakeMessage.id = `${lastPersistedMessage.id}-${new Date().getTime()}`
	storage.idIndex[fakeMessage.id] = fakeMessage
	delete storage.idIndex[oldId]
	}
	}
	}
	}

	const add = (storage, { messages: newMessages, updateMaxId = true }) => {
	if (!storage) {
	return
	}
	for (let i = 0; i < newMessages.length; i++) {
	const message = newMessages[i]

	// sanity check
	if (message.chat_id !== storage.chatId) {
	return
	}

	if (message.fakeId) {
	const fakeMessage = storage.idIndex[message.fakeId]
	if (fakeMessage) {
	// In case the same id exists (chat update before POST response)
	// make sure to remove the older duplicate message.
	if (storage.idIndex[message.id]) {
	delete storage.idIndex[message.id]
	storage.messages = storage.messages.filter(
	(msg) => msg.id !== message.id,
	)
	}
	Object.assign(fakeMessage, message, { error: false })
	delete fakeMessage.fakeId
	storage.idIndex[fakeMessage.id] = fakeMessage
	delete storage.idIndex[message.fakeId]

	return
	}
	}

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

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

	if (!storage.idIndex[message.id] && !isConfirmation(storage, message)) {
	if (storage.lastSeenMessageId < message.id) {
	storage.newMessageCount++
	}
	storage.idIndex[message.id] = message
	storage.messages.push(storage.idIndex[message.id])
	storage.idempotencyKeyIndex[message.idempotency_key] = true
	}
	}
	}

	const isConfirmation = (storage, message) => {
	if (!message.idempotency_key) return
	return storage.idempotencyKeyIndex[message.idempotency_key]
	}

	const resetNewMessageCount = (storage) => {
	if (!storage) {
	return
	}
	storage.newMessageCount = 0
	storage.lastSeenMessageId = storage.maxId
	}

	// Inserts date separators and marks the head and tail if it's the chain of messages made by the same user
	const getView = (storage) => {
	if (!storage) {
	return []
	}

	const result = []
	- const messages = _.orderBy(
	- storage.messages,
	- ['pending', 'id'],
	- ['asc', 'asc'],
	- )
	+ const messages = orderBy(storage.messages, ['pending', 'id'], ['asc', 'asc'])
	const firstMessage = messages[0]
	let previousMessage = messages[messages.length - 1]
	let currentMessageChainId

	if (firstMessage) {
	const date = new Date(firstMessage.created_at)
	date.setHours(0, 0, 0, 0)
	result.push({
	type: 'date',
	date,
	id: date.getTime().toString(),
	})
	}

	let afterDate = false

	for (let i = 0; i < messages.length; i++) {
	const message = messages[i]
	const nextMessage = messages[i + 1]

	const date = new Date(message.created_at)
	date.setHours(0, 0, 0, 0)

	// insert date separator and start a new message chain
	if (previousMessage && previousMessage.date < date) {
	result.push({
	type: 'date',
	date,
	id: date.getTime().toString(),
	})

	previousMessage.isTail = true
	currentMessageChainId = undefined
	afterDate = true
	}

	const object = {
	type: 'message',
	data: message,
	date,
	id: message.id,
	messageChainId: currentMessageChainId,
	}

	// end a message chian
	if ((nextMessage && nextMessage.account_id) !== message.account_id) {
	object.isTail = true
	currentMessageChainId = undefined
	}

	// start a new message chain
	if (
	(previousMessage &&
	previousMessage.data &&
	previousMessage.data.account_id) !== message.account_id \|\|
	afterDate
	) {
	- currentMessageChainId = _.uniqueId()
	+ currentMessageChainId = uniqueId()
	object.isHead = true
	object.messageChainId = currentMessageChainId
	}

	result.push(object)
	previousMessage = object
	afterDate = false
	}

	return result
	}

	const ChatService = {
	add,
	empty,
	getView,
	deleteMessage,
	cullOlderMessages,
	resetNewMessageCount,
	clear,
	handleMessageError,
	}

	export default ChatService
	diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
	index 1149d7b9be..e7987146a8 100644
	--- a/src/services/notification_utils/notification_utils.js
	+++ b/src/services/notification_utils/notification_utils.js
	@@ -1,214 +1,215 @@
	import { showDesktopNotification } from '../desktop_notification_utils/desktop_notification_utils.js'
	import { muteFilterHits } from '../status_parser/status_parser.js'

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

	import FaviconService from 'src/services/favicon_service/favicon_service.js'

	export const ACTIONABLE_NOTIFICATION_TYPES = new Set([
	'mention',
	'pleroma:report',
	'follow_request',
	])

	let cachedBadgeUrl = null

	export const notificationsFromStore = (store) => store.state.notifications.data

	const visibleTypes = (notificationVisibility) => {
	return [
	notificationVisibility.likes && 'like',
	notificationVisibility.mentions && 'mention',
	notificationVisibility.statuses && 'status',
	notificationVisibility.repeats && 'repeat',
	notificationVisibility.follows && 'follow',
	notificationVisibility.followRequest && 'follow_request',
	notificationVisibility.moves && 'move',
	notificationVisibility.emojiReactions && 'pleroma:emoji_reaction',
	notificationVisibility.reports && 'pleroma:report',
	notificationVisibility.polls && 'poll',
	].filter((_) => _)
	}

	const statusNotifications = new Set([
	'like',
	'mention',
	'status',
	'repeat',
	'pleroma:emoji_reaction',
	'poll',
	])

	export const isStatusNotification = (type) => statusNotifications.has(type)

	export const isValidNotification = (notification) => {
	if (isStatusNotification(notification.type) && !notification.status) {
	return false
	}
	return true
	}

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

	const isMutedNotification = (muteFilters, notification) => {
	if (!notification.status) return false
	if (notification.status.muted) return true
	return muteFilterHits(muteFilters, notification.status).length > 0
	}

	export const maybeShowNotification = (
	store,
	notificationVisibility,
	muteFilters,
	notification,
	i18n,
	) => {
	const rootState = store.rootState \|\| store.state

	if (notification.seen) return
	if (!visibleTypes(notificationVisibility).includes(notification.type)) return
	if (
	notification.type === 'mention' &&
	isMutedNotification(muteFilters, notification)
	)
	return

	- const notificationObject = prepareNotificationObject(
	- notification,
	- i18n,
	- )
	+ const notificationObject = prepareNotificationObject(notification, i18n)
	showDesktopNotification(rootState, notificationObject)
	}

	export const filteredNotificationsFromStore = (
	store,
	notificationVisibility,
	types,
	) => {
	// map is just to clone the array since sort mutates it and it causes some issues
	const sortedNotifications = notificationsFromStore(store)
	.map((_) => _)
	.sort(sortById)
	// TODO implement sorting elsewhere and make it optional
	return sortedNotifications.filter((notification) =>
	(types \|\| visibleTypes(notificationVisibility)).includes(notification.type),
	)
	}

	export const unseenNotificationsFromStore = (
	store,
	notificationVisibility,
	ignoreInactionableSeen,
	) => {
	return filteredNotificationsFromStore(store, notificationVisibility).filter(
	({ seen, type }) => {
	if (!ignoreInactionableSeen) return !seen
	if (seen) return false
	return ACTIONABLE_NOTIFICATION_TYPES.has(type)
	},
	)
	}

	export const prepareNotificationObject = (notification, i18n) => {
	if (cachedBadgeUrl === null) {
	const favicons = FaviconService.getOriginalFavicons()
	const favicon = favicons[favicons.length - 1]
	if (!favicon) {
	cachedBadgeUrl = 'about:blank'
	} else {
	cachedBadgeUrl = favicon.favimg.src
	}
	}

	const notifObj = {
	tag: notification.id,
	type: notification.type,
	badge: cachedBadgeUrl,
	}
	const status = notification.status
	const title = notification.from_profile.name
	notifObj.title = title
	notifObj.icon = notification.from_profile.profile_image_url
	let i18nString
	switch (notification.type) {
	case 'like':
	i18nString = 'favorited_you'
	break
	case 'status':
	i18nString = 'subscribed_status'
	break
	case 'repeat':
	i18nString = 'repeated_you'
	break
	case 'follow':
	i18nString = 'followed_you'
	break
	case 'move':
	i18nString = 'migrated_to'
	break
	case 'follow_request':
	i18nString = 'follow_request'
	break
	case 'pleroma:report':
	i18nString = 'submitted_report'
	break
	case 'poll':
	i18nString = 'poll_ended'
	break
	}

	if (notification.type === 'pleroma:emoji_reaction') {
	notifObj.body = i18n.t('notifications.reacted_with', [notification.emoji])
	} else if (i18nString) {
	notifObj.body = i18n.t('notifications.' + i18nString)
	} else if (isStatusNotification(notification.type)) {
	notifObj.body = notification.status.text
	}

	// Shows first attached non-nsfw image, if any. Should add configuration for this somehow...
	if (
	status &&
	status.attachments &&
	status.attachments.length > 0 &&
	!status.nsfw &&
	status.attachments[0].mimetype.startsWith('image/')
	) {
	notifObj.image = status.attachments[0].url
	}

	return notifObj
	}

	-export const countExtraNotifications = (store, mergedConfig, unreadAnnouncementCount) => {
	+export const countExtraNotifications = (
	+ store,
	+ mergedConfig,
	+ unreadAnnouncementCount,
	+) => {
	const rootGetters = store.rootGetters \|\| store.getters

	if (!mergedConfig.showExtraNotifications) {
	return 0
	}

	return [
	mergedConfig.showChatsInExtraNotifications
	? rootGetters.unreadChatCount
	: 0,
	mergedConfig.showAnnouncementsInExtraNotifications
	? unreadAnnouncementCount
	: 0,
	mergedConfig.showFollowRequestsInExtraNotifications
	? rootGetters.followRequestCount
	: 0,
	].reduce((a, c) => a + c, 0)
	}
	diff --git a/src/services/sw/sw.js b/src/services/sw/sw.js
	index 797f4c4487..e744e37aac 100644
	--- a/src/services/sw/sw.js
	+++ b/src/services/sw/sw.js
	@@ -1,188 +1,187 @@
	/* global process */
	function urlBase64ToUint8Array(base64String) {
	const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
	const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')

	const rawData = window.atob(base64)
	return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)))
	}

	export function isSWSupported() {
	return 'serviceWorker' in navigator
	}

	function isPushSupported() {
	return 'PushManager' in window
	}

	function getOrCreateServiceWorker() {
	if (!isSWSupported()) return
	const swType = process.env.HAS_MODULE_SERVICE_WORKER ? 'module' : 'classic'
	- return navigator
	- .serviceWorker
	+ return navigator.serviceWorker
	.register('/sw-pleroma.js', { type: swType })
	.catch((err) =>
	console.error('Unable to get or create a service worker.', err),
	)
	}

	function subscribePush(registration, isEnabled, vapidPublicKey) {
	if (!isEnabled)
	return Promise.reject(new Error('Web Push is disabled in config'))
	if (!vapidPublicKey)
	return Promise.reject(new Error('VAPID public key is not found'))

	const subscribeOptions = {
	userVisibleOnly: false,
	applicationServerKey: urlBase64ToUint8Array(vapidPublicKey),
	}
	return registration.pushManager.subscribe(subscribeOptions)
	}

	function unsubscribePush(registration) {
	return registration.pushManager.getSubscription().then((subscription) => {
	if (subscription === null) {
	return Promise.resolve('No subscription')
	}
	return subscription.unsubscribe()
	})
	}

	function deleteSubscriptionFromBackEnd(token) {
	return fetch('/api/v1/push/subscription/', {
	method: 'DELETE',
	headers: {
	'Content-Type': 'application/json',
	Authorization: `Bearer ${token}`,
	},
	}).then((response) => {
	if (!response.ok) throw new Error('Bad status code from server.')
	return response
	})
	}

	function sendSubscriptionToBackEnd(
	subscription,
	token,
	notificationVisibility,
	) {
	return window
	.fetch('/api/v1/push/subscription/', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	Authorization: `Bearer ${token}`,
	},
	body: JSON.stringify({
	subscription,
	data: {
	alerts: {
	follow: notificationVisibility.follows,
	favourite: notificationVisibility.likes,
	mention: notificationVisibility.mentions,
	reblog: notificationVisibility.repeats,
	move: notificationVisibility.moves,
	},
	},
	}),
	})
	.then((response) => {
	if (!response.ok) throw new Error('Bad status code from server.')
	return response.json()
	})
	.then((responseData) => {
	if (!responseData.id) throw new Error('Bad response from server.')
	return responseData
	})
	}
	export async function initServiceWorker(store) {
	if (!isSWSupported()) return
	await getOrCreateServiceWorker()
	navigator.serviceWorker.addEventListener('message', (event) => {
	const { dispatch } = store
	const { type, ...rest } = event.data

	switch (type) {
	case 'notificationClicked':
	dispatch('notificationClicked', { id: rest.id })
	}
	})
	}

	export async function showDesktopNotification(content) {
	if (!isSWSupported) return
	const { active: sw } =
	(await window.navigator.serviceWorker.getRegistration()) \|\| {}
	if (!sw) return console.error('No serviceworker found!')
	sw.postMessage({ type: 'desktopNotification', content })
	}

	export async function closeDesktopNotification({ id }) {
	if (!isSWSupported) return
	const { active: sw } =
	(await window.navigator.serviceWorker.getRegistration()) \|\| {}
	if (!sw) return console.error('No serviceworker found!')
	if (id >= 0) {
	sw.postMessage({ type: 'desktopNotificationClose', content: { id } })
	} else {
	sw.postMessage({ type: 'desktopNotificationClose', content: { all: true } })
	}
	}

	export async function updateFocus() {
	if (!isSWSupported) return
	const { active: sw } =
	(await window.navigator.serviceWorker.getRegistration()) \|\| {}
	if (!sw) return console.error('No serviceworker found!')
	sw.postMessage({ type: 'updateFocus' })
	}

	export function registerPushNotifications(
	isEnabled,
	vapidPublicKey,
	token,
	notificationVisibility,
	) {
	if (isPushSupported()) {
	getOrCreateServiceWorker()
	.then((registration) =>
	subscribePush(registration, isEnabled, vapidPublicKey),
	)
	.then((subscription) =>
	sendSubscriptionToBackEnd(subscription, token, notificationVisibility),
	)
	.catch((e) =>
	console.warn(`Failed to setup Web Push Notifications: ${e.message}`),
	)
	}
	}

	export function unregisterPushNotifications(token) {
	if (isPushSupported()) {
	getOrCreateServiceWorker()
	.then((registration) => {
	return unsubscribePush(registration).then((result) => [
	registration,
	result,
	])
	})
	.then(([, unsubResult]) => {
	if (unsubResult === 'No subscription') return
	if (!unsubResult) {
	console.warn("Push subscription cancellation wasn't successful")
	}
	return deleteSubscriptionFromBackEnd(token)
	})
	.catch((e) => {
	console.warn(`Failed to disable Web Push Notifications: ${e.message}`)
	})
	}
	}

	export const shouldCache = process.env.NODE_ENV === 'production'
	export const cacheKey = 'pleroma-fe'
	export const emojiCacheKey = 'pleroma-fe-emoji'

	export const clearCache = (key) => caches.delete(key)

	export { getOrCreateServiceWorker }
	diff --git a/vite.config.js b/vite.config.js
	index fec18577e4..3ffc5e816a 100644
	--- a/vite.config.js
	+++ b/vite.config.js
	@@ -1,267 +1,266 @@
	import { dirname, resolve } from 'node:path'
	import { fileURLToPath } from 'node:url'
	+import { DevTools } from '@vitejs/devtools'
	import vue from '@vitejs/plugin-vue'
	import vueJsx from '@vitejs/plugin-vue-jsx'
	import { defineConfig } from 'vite'
	-import { DevTools } from '@vitejs/devtools'
	-
	import eslint from 'vite-plugin-eslint2'
	import stylelint from 'vite-plugin-stylelint'
	import { configDefaults } from 'vitest/config'

	import { getCommitHash } from './build/commit_hash.js'
	import copyPlugin from './build/copy_plugin.js'
	import emojisPlugin from './build/emojis_plugin.js'
	import mswPlugin from './build/msw_plugin.js'
	import {
	buildSwPlugin,
	devSwPlugin,
	swMessagesPlugin,
	} from './build/sw_plugin.js'

	const localConfigPath = '<projectRoot>/config/local.json'
	const normalizeTarget = (target) => {
	if (!target \|\| typeof target !== 'string') return target
	return target.endsWith('/') ? target.replace(/\/$/, '') : target
	}

	const getLocalDevSettings = async () => {
	const envTarget = normalizeTarget(process.env.VITE_PROXY_TARGET)
	const envOrigin = normalizeTarget(process.env.VITE_PROXY_ORIGIN)
	try {
	const settings = (await import('./config/local.json')).default
	settings.target = normalizeTarget(settings.target)
	settings.origin = normalizeTarget(settings.origin)
	if (envTarget) settings.target = envTarget
	if (envOrigin) settings.origin = envOrigin
	console.info(`Using local dev server settings (${localConfigPath}):`)
	console.info(JSON.stringify(settings, null, 2))
	return settings
	} catch (e) {
	if (!envTarget && !envOrigin) {
	console.info(
	`Local dev server settings not found (${localConfigPath}), using default`,
	e,
	)
	return {}
	}
	const settings = { target: envTarget, origin: envOrigin }
	console.info(
	'Using dev server settings from VITE_PROXY_TARGET/VITE_PROXY_ORIGIN:',
	)
	console.info(JSON.stringify(settings, null, 2))
	return settings
	}
	}

	const projectRoot = dirname(fileURLToPath(import.meta.url))

	const getTransformSWSettings = (settings) => {
	if ('transformSW' in settings) {
	return settings.transformSW
	} else {
	console.info(
	'`transformSW` is not present in your local settings.\n' +
	'This option controls whether the service worker should be bundled and transformed into iife (immediately-invoked function expression) during development.\n' +
	'If set to false, the service worker will be served as-is, as an ES Module.\n' +
	'Some browsers (e.g. Firefox) does not support ESM service workers.\n' +
	'To avoid surprises, it is defaulted to true, but this can be slow.\n' +
	'If you are using a browser that supports ESM service workers, you can set this option to false.\n' +
	`No matter your choice, you can set the transformSW option in ${localConfigPath} in to disable this message.`,
	)
	return true
	}
	}

	export default defineConfig(async ({ mode, command }) => {
	const settings = await getLocalDevSettings()
	const target = settings.target \|\| 'http://localhost:4000/'
	const origin = settings.origin \|\| target
	const transformSW = getTransformSWSettings(settings)
	const proxy = {
	'/api': {
	target,
	changeOrigin: true,
	cookieDomainRewrite: 'localhost',
	ws: true,
	},
	'/nodeinfo': {
	target,
	changeOrigin: true,
	cookieDomainRewrite: 'localhost',
	},
	'/instance': {
	target,
	changeOrigin: true,
	cookieDomainRewrite: 'localhost',
	},
	'/socket': {
	target,
	changeOrigin: true,
	cookieDomainRewrite: 'localhost',
	ws: true,
	headers: {
	Origin: origin,
	},
	},
	'/oauth': {
	target,
	changeOrigin: true,
	cookieDomainRewrite: 'localhost',
	},
	}

	const swSrc = 'src/sw.js'
	const swDest = 'sw-pleroma.js'
	const alias = {
	src: '/src',
	components: '/src/components',
	...(mode === 'test' ? { vue: 'vue/dist/vue.esm-bundler.js' } : {}),
	}

	return {
	plugins: [
	vue({
	template: {
	compilerOptions: {
	isCustomElement(tag) {
	if (tag === 'pinch-zoom') {
	return true
	}
	if (tag.startsWith('cropper-')) {
	return true
	}
	return false
	},
	},
	},
	}),
	vueJsx(),
	DevTools({
	build: {
	withApp: true, // generate DevTools output during `vite build`
	// outDir: 'custom-dir', // optional, defaults to Vite's build.outDir
	},
	}),
	devSwPlugin({ swSrc, swDest, transformSW, alias }),
	buildSwPlugin({ swSrc, swDest }),
	swMessagesPlugin(),
	emojisPlugin(),
	copyPlugin({
	inUrl: '/static/ruffle',
	inFs: resolve(projectRoot, 'node_modules/@ruffle-rs/ruffle'),
	}),
	eslint({
	lintInWorker: true,
	lintOnStart: true,
	cacheLocation: resolve(projectRoot, 'node_modules/.cache/eslintcache'),
	}),
	stylelint({
	lintInWorker: true,
	lintOnStart: true,
	cacheLocation: resolve(
	projectRoot,
	'node_modules/.cache/stylelintcache',
	),
	}),
	...(mode === 'test' ? [mswPlugin()] : []),
	],
	optimizeDeps: {
	// For unknown reasons, during vitest, vite will re-optimize the following
	// deps, causing the test to reload, so add them here so that it will not
	// reload during tests
	include: [
	'custom-event-polyfill',
	'vue-i18n',
	'@ungap/event-target',
	'lodash.merge',
	'body-scroll-lock',
	'@kazvmoe-infra/pinch-zoom-element',
	],
	},
	css: {
	devSourcemap: true,
	},
	resolve: {
	alias,
	},
	define: {
	'process.env': JSON.stringify({
	NODE_ENV:
	mode === 'test'
	? 'testing'
	: command === 'serve'
	? 'development'
	: 'production',
	HAS_MODULE_SERVICE_WORKER: command === 'serve' && !transformSW,
	}),
	COMMIT_HASH: JSON.stringify(
	command === 'serve' ? 'DEV' : getCommitHash(),
	),
	DEV_OVERRIDES: JSON.stringify(command === 'serve' ? settings : undefined),
	__VUE_OPTIONS_API__: true,
	__VUE_PROD_DEVTOOLS__: false,
	__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
	},
	build: {
	sourcemap: true,
	rolldownOptions: {
	devtools: {}, // enable devtools mode
	input: {
	main: 'index.html',
	},
	output: {
	inlineDynamicImports: false,
	entryFileNames(chunkInfo) {
	const id = chunkInfo.facadeModuleId
	if (id.endsWith(swSrc)) {
	return swDest
	} else {
	return 'static/js/[name].[hash].js'
	}
	},
	chunkFileNames(chunkInfo) {
	if (chunkInfo.facadeModuleId) {
	if (
	chunkInfo.facadeModuleId.includes(
	'node_modules/@kazvmoe-infra/unicode-emoji-json/annotations/',
	)
	) {
	return 'static/js/emoji-annotations/[name].[hash].js'
	} else if (chunkInfo.facadeModuleId.includes('src/i18n/')) {
	return 'static/js/i18n/[name].[hash].js'
	}
	}
	return 'static/js/[name].[hash].js'
	},
	assetFileNames(assetInfo) {
	const name = assetInfo.names?.[0] \|\| ''
	if (/\.(png\|jpe?g\|gif\|svg)(\?.*)?$/.test(name)) {
	return 'static/img/[name].[hash][extname]'
	} else if (/\.css$/.test(name)) {
	return 'static/css/[name].[hash][extname]'
	} else {
	return 'static/misc/[name].[hash][extname]'
	}
	},
	},
	},
	},
	server: {
	...(mode === 'test' ? {} : { proxy }),
	port: Number(process.env.PORT) \|\| 8080,
	},
	preview: {
	proxy,
	},
	test: {
	globals: true,
	exclude: [...configDefaults.exclude, 'test/e2e-playwright/**'],
	browser: {
	enabled: true,
	provider: 'playwright',
	instances: [{ browser: 'firefox' }],
	},
	},
	}
	})

File Metadata

Mime Type: text/x-diff
Expires: Sat, Sep 19, 5:19 AM (1 d, 8 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1768936
Default Alt Text: (228 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions