No OneTemporary
Actions

Authored By

Unknown

Size

281 KB

Referenced Files

None

Subscribers

None

View Options

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

	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index a3d8701e57..8e008aef26 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,622 +1,629 @@
	/* global process */

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

	+import Status from 'src/components/status/status.vue'
	+import RichContent from 'src/components/rich_content/rich_content.jsx'
	+import StillImage from 'src/components/still-image/still-image.vue'
	+
	import { config } from '@fortawesome/fontawesome-svg-core'
	import {
	FontAwesomeIcon,
	FontAwesomeLayers,
	} from '@fortawesome/vue-fontawesome'

	config.autoAddCss = false

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

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

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

	let staticInitialResults = null

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

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

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

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

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

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

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

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

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

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

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

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

	useAuthFlowStore().setInitialStrategy(config.loginMethod)
	}

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

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

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

	const getAppSecret = async ({ store }) => {
	const oauth = useOAuthStore()
	if (oauth.userToken) {
	store.commit(
	'setBackendInteractor',
	backendInteractorService(oauth.getToken),
	)
	}
	}

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

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

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

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

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

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

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

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

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

	const federation = metadata.federation

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

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

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

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

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

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

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

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

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

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

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

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

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

	FaviconService.initFaviconService()
	initServiceWorker(store)

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

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

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

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

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

	// Start fetching things that don't need to block the UI
	store.dispatch('fetchMutes')
	store.dispatch('loadDrafts')
	useAnnouncementsStore().startFetchingAnnouncements()
	getTOS({ store })
	getStickers({ store })

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

	useI18nStore().setI18n(i18n)

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

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

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

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

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

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

	export default afterStoreSetup
	diff --git a/src/components/announcement/announcement.js b/src/components/announcement/announcement.js
	index 13d55c159c..b6621264ca 100644
	--- a/src/components/announcement/announcement.js
	+++ b/src/components/announcement/announcement.js
	@@ -1,130 +1,130 @@
	import { mapState } from 'vuex'

	import localeService from '../../services/locale/locale.service.js'
	import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
	-import RichContent from '../rich_content/rich_content.jsx'
	+

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

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

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

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

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

	export default Announcement
	diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
	index 1aaee85a10..da776bf334 100644
	--- a/src/components/attachment/attachment.js
	+++ b/src/components/attachment/attachment.js
	@@ -1,219 +1,221 @@
	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')),
	- StillImage,
	+ Flash: defineAsyncComponent(
	+ () => import( 'src/components/flash/flash.vue'),
	+ ),
	+
	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/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
	index 722d459f33..964c60c564 100644
	--- a/src/components/basic_user_card/basic_user_card.js
	+++ b/src/components/basic_user_card/basic_user_card.js
	@@ -1,35 +1,35 @@
	-import RichContent from 'src/components/rich_content/rich_content.jsx'
	+
	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 generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

	const BasicUserCard = {
	props: ['user'],
	components: {
	UserPopover,
	UserAvatar,
	- RichContent,
	+
	UserLink,
	},
	methods: {
	userProfileLink(user) {
	return generateProfileLink(
	user.id,
	user.screen_name,
	useInstanceStore().restrictedNicknames,
	)
	},
	},
	computed: {
	allowNonSquareEmoji() {
	return useMergedConfigStore().mergedConfig.nonSquareEmoji
	},
	},
	}

	export default BasicUserCard
	diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
	index c6cff649a2..12a1478033 100644
	--- a/src/components/chat_message/chat_message.js
	+++ b/src/components/chat_message/chat_message.js
	@@ -1,118 +1,117 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapGetters, mapState } from 'vuex'
	import { defineAsyncComponent } from 'vue'

	import Attachment from 'src/components/attachment/attachment.vue'
	import ChatMessageDate from 'src/components/chat_message_date/chat_message_date.vue'
	import LinkPreview from 'src/components/link-preview/link-preview.vue'
	import Popover from 'src/components/popover/popover.vue'
	import StatusContent from 'src/components/status_content/status_content.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserPopover from 'src/components/user_popover/user_popover.vue'
	+import Gallery from 'src/components/gallery/gallery.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 { faEllipsisH, faTimes } from '@fortawesome/free-solid-svg-icons'

	library.add(faTimes, faEllipsisH)

	const ChatMessage = {
	name: 'ChatMessage',
	props: [
	'author',
	'edited',
	'noHeading',
	'chatViewItem',
	'hoveredMessageChain',
	],
	emits: ['hover'],
	components: {
	Popover,
	Attachment,
	StatusContent,
	UserAvatar,
	- Gallery: defineAsyncComponent(
	- () => import( 'src/components/gallery/gallery.vue'),
	- ),
	+ Gallery,
	LinkPreview,
	ChatMessageDate,
	UserPopover,
	},
	computed: {
	// Returns HH:MM (hours and minutes) in local time.
	createdAt() {
	const time = this.chatViewItem.data.created_at
	return time.toLocaleTimeString('en', {
	hour: '2-digit',
	minute: '2-digit',
	hour12: false,
	})
	},
	isCurrentUser() {
	return this.message.account_id === this.currentUser.id
	},
	message() {
	return this.chatViewItem.data
	},
	isMessage() {
	return this.chatViewItem.type === 'message'
	},
	messageForStatusContent() {
	return {
	summary: '',
	emojis: this.message.emojis,
	raw_html: this.message.content \|\| '',
	text: this.message.content \|\| '',
	attachments: this.message.attachments,
	}
	},
	hasAttachment() {
	return this.message.attachments.length > 0
	},
	...mapPiniaState(useInterfaceStore, {
	betterShadow: (store) => store.browserSupport.cssFilter,
	}),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	restrictedNicknames: (state) => useInstanceStore().restrictedNicknames,
	}),
	popoverMarginStyle() {
	if (this.isCurrentUser) {
	return {}
	} else {
	return { left: 50 }
	}
	},
	...mapPiniaState(useMergedConfigStore, ['mergedConfig', 'findUser']),
	},
	data() {
	return {
	hovered: false,
	menuOpened: false,
	}
	},
	methods: {
	onHover(bool) {
	this.$emit('hover', {
	isHovered: bool,
	messageChainId: this.chatViewItem.messageChainId,
	})
	},
	async deleteMessage() {
	const confirmed = window.confirm(this.$t('chats.delete_confirm'))
	if (confirmed) {
	await this.$store.dispatch('deleteChatMessage', {
	messageId: this.chatViewItem.data.id,
	chatId: this.chatViewItem.data.chat_id,
	})
	}
	this.hovered = false
	this.menuOpened = false
	},
	},
	}

	export default ChatMessage
	diff --git a/src/components/chat_title/chat_title.js b/src/components/chat_title/chat_title.js
	index b1d4d8b761..5a2b5d775e 100644
	--- a/src/components/chat_title/chat_title.js
	+++ b/src/components/chat_title/chat_title.js
	@@ -1,28 +1,28 @@
	import { defineAsyncComponent } from 'vue'

	-import RichContent from 'src/components/rich_content/rich_content.jsx'
	+
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserPopover from 'src/components/user_popover/user_popover.vue'

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

	export default {
	name: 'ChatTitle',
	components: {
	UserAvatar,
	- RichContent,
	+
	UserPopover,
	},
	props: ['user', 'withAvatar'],
	computed: {
	title() {
	return this.user ? this.user.screen_name_ui : ''
	},
	htmlTitle() {
	return this.user ? this.user.name_html : ''
	},
	allowNonSquareEmoji() {
	return useMergedConfigStore().mergedConfig.nonSquareEmoji
	},
	},
	}
	diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
	index b0d3a304cf..7ca166dbd2 100644
	--- a/src/components/conversation/conversation.js
	+++ b/src/components/conversation/conversation.js
	@@ -1,630 +1,629 @@
	import { clone, filter, findIndex, get, reduce } from 'lodash'
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	import { WSConnectionStatus } from '../../services/api/api.service.js'
	import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
	import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
	-import Status from '../status/status.vue'
	+
	import ThreadTree from '../thread_tree/thread_tree.vue'

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

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

	library.add(faAngleDoubleDown, faAngleDoubleLeft, faChevronLeft)

	const sortById = (a, b) => {
	const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
	const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id
	const seqA = Number(idA)
	const seqB = Number(idB)
	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 idA < idB ? -1 : 1
	}
	}

	const sortAndFilterConversation = (conversation, statusoid) => {
	if (statusoid.type === 'retweet') {
	conversation = filter(
	conversation,
	(status) =>
	status.type === 'retweet' \|\|
	status.id !== statusoid.retweeted_status.id,
	)
	} else {
	conversation = filter(conversation, (status) => status.type !== 'retweet')
	}
	return conversation.filter((_) => _).sort(sortById)
	}

	const conversation = {
	data() {
	return {
	highlight: null,
	expanded: false,
	threadDisplayStatusObject: {}, // id => 'showing' \| 'hidden'
	statusContentPropertiesObject: {},
	inlineDivePosition: null,
	loadStatusError: null,
	}
	},
	props: [
	'statusId',
	'collapsable',
	'isPage',
	'pinnedStatusIdsObject',
	'inProfile',
	'profileUserId',
	'virtualHidden',
	],
	created() {
	if (this.isPage) {
	this.fetchConversation()
	}
	},
	computed: {
	maxDepthToShowByDefault() {
	// maxDepthInThread = max number of depths that is visible
	// since our depth starts with 0 and "showing" means "showing children"
	// there is a -2 here
	const maxDepth = this.mergedConfig.maxDepthInThread - 2
	return maxDepth >= 1 ? maxDepth : 1
	},
	streamingEnabled() {
	return (
	this.mergedConfig.useStreamingApi &&
	this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	)
	},
	displayStyle() {
	return this.mergedConfig.conversationDisplay
	},
	isTreeView() {
	return !this.isLinearView
	},
	treeViewIsSimple() {
	return !this.mergedConfig.conversationTreeAdvanced
	},
	isLinearView() {
	return this.displayStyle === 'linear'
	},
	shouldFadeAncestors() {
	return this.mergedConfig.conversationTreeFadeAncestors
	},
	otherRepliesButtonPosition() {
	return this.mergedConfig.conversationOtherRepliesButton
	},
	showOtherRepliesButtonBelowStatus() {
	return this.otherRepliesButtonPosition === 'below'
	},
	showOtherRepliesButtonInsideStatus() {
	return this.otherRepliesButtonPosition === 'inside'
	},
	suspendable() {
	if (this.isTreeView) {
	return Object.entries(this.statusContentProperties).every(
	([, prop]) => !prop.replying && prop.mediaPlaying.length === 0,
	)
	}
	if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
	return this.$refs.statusComponent.every((s) => s.suspendable)
	} else {
	return true
	}
	},
	hideStatus() {
	return this.virtualHidden && this.suspendable
	},
	status() {
	return this.$store.state.statuses.allStatusesObject[this.statusId]
	},
	originalStatusId() {
	if (this.status.retweeted_status) {
	return this.status.retweeted_status.id
	} else {
	return this.statusId
	}
	},
	conversationId() {
	return this.getConversationId(this.statusId)
	},
	conversation() {
	if (!this.status) {
	return []
	}

	if (!this.isExpanded) {
	return [this.status]
	}

	const conversation = clone(
	this.$store.state.statuses.conversationsObject[this.conversationId],
	)
	const statusIndex = findIndex(conversation, { id: this.originalStatusId })
	if (statusIndex !== -1) {
	conversation[statusIndex] = this.status
	}

	return sortAndFilterConversation(conversation, this.status)
	},
	statusMap() {
	return this.conversation.reduce((res, s) => {
	res[s.id] = s
	return res
	}, {})
	},
	threadTree() {
	const reverseLookupTable = this.conversation.reduce(
	(table, status, index) => {
	table[status.id] = index
	return table
	},
	{},
	)

	const threads = this.conversation.reduce(
	(a, cur) => {
	const id = cur.id
	a.forest[id] = this.getReplies(id).map((s) => s.id)

	return a
	},
	{
	forest: {},
	},
	)

	const walk = (forest, topLevel, depth = 0, processed = {}) =>
	topLevel
	.map((id) => {
	if (processed[id]) {
	return []
	}

	processed[id] = true
	return [
	{
	status: this.conversation[reverseLookupTable[id]],
	id,
	depth,
	},
	walk(forest, forest[id], depth + 1, processed),
	].reduce((a, b) => a.concat(b), [])
	})
	.reduce((a, b) => a.concat(b), [])

	const linearized = walk(
	threads.forest,
	this.topLevel.map((k) => k.id),
	)

	return linearized
	},
	replyIds() {
	return this.conversation
	.map((k) => k.id)
	.reduce((res, id) => {
	res[id] = (this.replies[id] \|\| []).map((k) => k.id)
	return res
	}, {})
	},
	totalReplyCount() {
	const sizes = {}
	const subTreeSizeFor = (id) => {
	if (sizes[id]) {
	return sizes[id]
	}
	sizes[id] =
	1 +
	this.replyIds[id]
	.map((cid) => subTreeSizeFor(cid))
	.reduce((a, b) => a + b, 0)
	return sizes[id]
	}
	this.conversation.map((k) => k.id).map(subTreeSizeFor)
	return Object.keys(sizes).reduce((res, id) => {
	res[id] = sizes[id] - 1 // exclude itself
	return res
	}, {})
	},
	totalReplyDepth() {
	const depths = {}
	const subTreeDepthFor = (id) => {
	if (depths[id]) {
	return depths[id]
	}
	depths[id] =
	1 +
	this.replyIds[id]
	.map((cid) => subTreeDepthFor(cid))
	.reduce((a, b) => (a > b ? a : b), 0)
	return depths[id]
	}
	this.conversation.map((k) => k.id).map(subTreeDepthFor)
	return Object.keys(depths).reduce((res, id) => {
	res[id] = depths[id] - 1 // exclude itself
	return res
	}, {})
	},
	depths() {
	return this.threadTree.reduce((a, k) => {
	a[k.id] = k.depth
	return a
	}, {})
	},
	topLevel() {
	const topLevel = this.conversation.reduce(
	(tl, cur) =>
	tl.filter(
	(k) =>
	this.getReplies(cur.id)
	.map((v) => v.id)
	.indexOf(k.id) === -1,
	),
	this.conversation,
	)
	return topLevel
	},
	otherTopLevelCount() {
	return this.topLevel.length - 1
	},
	showingTopLevel() {
	if (this.canDive && this.diveRoot) {
	return [this.statusMap[this.diveRoot]]
	}
	return this.topLevel
	},
	diveRoot() {
	const statusId = this.inlineDivePosition \|\| this.statusId
	const isTopLevel = !this.parentOf(statusId)
	return isTopLevel ? null : statusId
	},
	diveDepth() {
	return this.canDive && this.diveRoot ? this.depths[this.diveRoot] : 0
	},
	diveMode() {
	return this.canDive && !!this.diveRoot
	},
	shouldShowAllConversationButton() {
	// The "show all conversation" button tells the user that there exist
	// other toplevel statuses, so do not show it if there is only a single root
	return (
	this.isTreeView &&
	this.isExpanded &&
	this.diveMode &&
	this.topLevel.length > 1
	)
	},
	shouldShowAncestors() {
	return (
	this.isTreeView &&
	this.isExpanded &&
	this.ancestorsOf(this.diveRoot).length
	)
	},
	replies() {
	let i = 1

	return reduce(
	this.conversation,
	(result, { id, in_reply_to_status_id: irid }) => {
	if (irid) {
	result[irid] = result[irid] \|\| []
	result[irid].push({
	name: `#${i}`,
	id,
	})
	}
	i++
	return result
	},
	{},
	)
	},
	isExpanded() {
	return !!(this.expanded \|\| this.isPage)
	},
	hiddenStyle() {
	const height = (this.status && this.status.virtualHeight) \|\| '120px'
	return this.virtualHidden ? { height } : {}
	},
	threadDisplayStatus() {
	return this.conversation.reduce((a, k) => {
	const id = k.id
	const depth = this.depths[id]
	const status = (() => {
	if (this.threadDisplayStatusObject[id]) {
	return this.threadDisplayStatusObject[id]
	}
	if (depth - this.diveDepth <= this.maxDepthToShowByDefault) {
	return 'showing'
	} else {
	return 'hidden'
	}
	})()

	a[id] = status
	return a
	}, {})
	},
	statusContentProperties() {
	return this.conversation.reduce((a, k) => {
	const id = k.id
	const props = (() => {
	const def = {
	showingTall: false,
	expandingSubject: false,
	showingLongSubject: false,
	isReplying: false,
	mediaPlaying: [],
	}

	if (this.statusContentPropertiesObject[id]) {
	return {
	...def,
	...this.statusContentPropertiesObject[id],
	}
	}
	return def
	})()

	a[id] = props
	return a
	}, {})
	},
	canDive() {
	return this.isTreeView && this.isExpanded
	},
	maybeHighlight() {
	return this.isExpanded ? this.highlight : null
	},
	...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	...mapState({
	mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
	}),
	...mapPiniaState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	},
	components: {
	- Status,
	ThreadTree,
	QuickFilterSettings,
	QuickViewSettings,
	},
	watch: {
	statusId(newVal, oldVal) {
	const newConversationId = this.getConversationId(newVal)
	const oldConversationId = this.getConversationId(oldVal)
	if (
	newConversationId &&
	oldConversationId &&
	newConversationId === oldConversationId
	) {
	this.setHighlight(this.originalStatusId)
	} else {
	this.fetchConversation()
	}
	},
	expanded(value) {
	if (value) {
	this.fetchConversation()
	} else {
	this.resetDisplayState()
	}
	},
	virtualHidden() {
	this.$store.dispatch('setVirtualHeight', {
	statusId: this.statusId,
	height: `${this.$el.clientHeight}px`,
	})
	},
	},
	methods: {
	fetchConversation() {
	if (this.status) {
	this.$store.state.api.backendInteractor
	.fetchConversation({ id: this.statusId })
	.then(({ ancestors, descendants }) => {
	this.$store.dispatch('addNewStatuses', { statuses: ancestors })
	this.$store.dispatch('addNewStatuses', { statuses: descendants })
	this.setHighlight(this.originalStatusId)
	})
	} else {
	this.loadStatusError = null
	this.$store.state.api.backendInteractor
	.fetchStatus({ id: this.statusId })
	.then((status) => {
	this.$store.dispatch('addNewStatuses', { statuses: [status] })
	this.fetchConversation()
	})
	.catch((error) => {
	this.loadStatusError = error
	})
	}
	},
	isFocused(id) {
	return this.isExpanded && id === this.highlight
	},
	getReplies(id) {
	return this.replies[id] \|\| []
	},
	getHighlight() {
	return this.isExpanded ? this.highlight : null
	},
	setHighlight(id) {
	if (!id) return
	this.highlight = id

	if (!this.streamingEnabled) {
	this.$store.dispatch('fetchStatus', id)
	}

	this.$store.dispatch('fetchFavsAndRepeats', id)
	this.$store.dispatch('fetchEmojiReactionsBy', id)
	},
	toggleExpanded() {
	this.expanded = !this.expanded
	},
	getConversationId(statusId) {
	const status = this.$store.state.statuses.allStatusesObject[statusId]
	return get(
	status,
	'retweeted_status.statusnet_conversation_id',
	get(status, 'statusnet_conversation_id'),
	)
	},
	setThreadDisplay(id, nextStatus) {
	this.threadDisplayStatusObject = {
	...this.threadDisplayStatusObject,
	[id]: nextStatus,
	}
	},
	toggleThreadDisplay(id) {
	const curStatus = this.threadDisplayStatus[id]
	const nextStatus = curStatus === 'showing' ? 'hidden' : 'showing'
	this.setThreadDisplay(id, nextStatus)
	},
	setThreadDisplayRecursively(id, nextStatus) {
	this.setThreadDisplay(id, nextStatus)
	this.getReplies(id)
	.map((k) => k.id)
	.map((id) => this.setThreadDisplayRecursively(id, nextStatus))
	},
	showThreadRecursively(id) {
	this.setThreadDisplayRecursively(id, 'showing')
	},
	setStatusContentProperty(id, name, value) {
	this.statusContentPropertiesObject = {
	...this.statusContentPropertiesObject,
	[id]: {
	...this.statusContentPropertiesObject[id],
	[name]: value,
	},
	}
	},
	toggleStatusContentProperty(id, name) {
	this.setStatusContentProperty(
	id,
	name,
	!this.statusContentProperties[id][name],
	)
	},
	leastVisibleAncestor(id) {
	let cur = id
	let parent = this.parentOf(cur)
	while (cur) {
	// if the parent is showing it means cur is visible
	if (this.threadDisplayStatus[parent] === 'showing') {
	return cur
	}
	parent = this.parentOf(parent)
	cur = this.parentOf(cur)
	}
	// nothing found, fall back to toplevel
	return this.topLevel[0] ? this.topLevel[0].id : undefined
	},
	diveIntoStatus(id) {
	this.tryScrollTo(id)
	},
	diveToTopLevel() {
	this.tryScrollTo(
	this.topLevelAncestorOrSelfId(this.diveRoot) \|\| this.topLevel[0].id,
	)
	},
	// only used when we are not on a page
	undive() {
	this.inlineDivePosition = null
	this.setHighlight(this.statusId)
	},
	tryScrollTo(id) {
	if (!id) {
	return
	}
	if (this.isPage) {
	// set statusId
	this.$router.push({ name: 'conversation', params: { id } })
	} else {
	this.inlineDivePosition = id
	}
	// Because the conversation can be unmounted when out of sight
	// and mounted again when it comes into sight,
	// the `mounted` or `created` function in `status` should not
	// contain scrolling calls, as we do not want the page to jump
	// when we scroll with an expanded conversation.
	//
	// Now the method is to rely solely on the `highlight` watcher
	// in `status` components.
	// In linear views, all statuses are rendered at all times, but
	// in tree views, it is possible that a change in active status
	// removes and adds status components (e.g. an originally child
	// status becomes an ancestor status, and thus they will be
	// different).
	// Here, let the components be rendered first, in order to trigger
	// the `highlight` watcher.
	this.$nextTick(() => {
	this.setHighlight(id)
	})
	},
	goToCurrent() {
	this.tryScrollTo(this.diveRoot \|\| this.topLevel[0].id)
	},
	statusById(id) {
	return this.statusMap[id]
	},
	parentOf(id) {
	const status = this.statusById(id)
	if (!status) {
	return undefined
	}
	const { in_reply_to_status_id: parentId } = status
	if (!this.statusMap[parentId]) {
	return undefined
	}
	return parentId
	},
	parentOrSelf(id) {
	return this.parentOf(id) \|\| id
	},
	// Ancestors of some status, from top to bottom
	ancestorsOf(id) {
	const ancestors = []
	let cur = this.parentOf(id)
	while (cur) {
	ancestors.unshift(this.statusMap[cur])
	cur = this.parentOf(cur)
	}
	return ancestors
	},
	topLevelAncestorOrSelfId(id) {
	let cur = id
	let parent = this.parentOf(id)
	while (parent) {
	cur = this.parentOf(cur)
	parent = this.parentOf(parent)
	}
	return cur
	},
	resetDisplayState() {
	this.undive()
	this.threadDisplayStatusObject = {}
	},
	},
	}

	export default conversation
	diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
	index 412a72d084..bfafd052f7 100644
	--- a/src/components/draft/draft.js
	+++ b/src/components/draft/draft.js
	@@ -1,111 +1,110 @@
	import { cloneDeep } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	import StatusContent from 'src/components/status_content/status_content.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	+import Gallery from 'src/components/gallery/gallery.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,
	EditStatusForm: defineAsyncComponent(
	() => import('src/components/edit_status_form/edit_status_form.vue'),
	),
	ConfirmModal: defineAsyncComponent(
	() => import('src/components/confirm_modal/confirm_modal.vue'),
	),
	StatusContent,
	- Gallery: defineAsyncComponent(
	- () => import( 'src/components/gallery/gallery.vue')
	- ),
	+ 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/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
	index 0ba717c0b6..3f52b175ff 100644
	--- a/src/components/emoji_picker/emoji_picker.js
	+++ b/src/components/emoji_picker/emoji_picker.js
	@@ -1,445 +1,445 @@
	import { chunk, debounce, trim } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	import Popover from 'src/components/popover/popover.vue'
	import { ensureFinalFallback } from '../../i18n/languages.js'
	import Checkbox from '../checkbox/checkbox.vue'
	-import StillImage from '../still-image/still-image.vue'
	+

	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBasketballBall,
	faBoxOpen,
	faBus,
	faCode,
	faFlag,
	faIceCream,
	faLightbulb,
	faPaw,
	faSmile,
	faSmileBeam,
	faStickyNote,
	faUser,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faBoxOpen,
	faStickyNote,
	faSmileBeam,
	faSmile,
	faUser,
	faPaw,
	faIceCream,
	faBus,
	faBasketballBall,
	faLightbulb,
	faCode,
	faFlag,
	)

	const UNICODE_EMOJI_GROUP_ICON = {
	'smileys-and-emotion': 'smile',
	'people-and-body': 'user',
	'animals-and-nature': 'paw',
	'food-and-drink': 'ice-cream',
	'travel-and-places': 'bus',
	activities: 'basketball-ball',
	objects: 'lightbulb',
	symbols: 'code',
	flags: 'flag',
	}

	const maybeLocalizedKeywords = (emoji, languages, nameLocalizer) => {
	const res = [emoji.displayText, nameLocalizer(emoji)]
	if (emoji.annotations) {
	languages.forEach((lang) => {
	const keywords = emoji.annotations[lang]?.keywords \|\| []
	const name = emoji.annotations[lang]?.name
	res.push(...keywords.concat([name]).filter((k) => k))
	})
	}
	return res
	}

	const filterByKeyword = (list, keyword = '', languages, nameLocalizer) => {
	if (keyword === '') return list

	const keywordLowercase = keyword.toLowerCase()
	const orderedEmojiList = []
	for (const emoji of list) {
	const indices = maybeLocalizedKeywords(emoji, languages, nameLocalizer)
	.map((k) => k.toLowerCase().indexOf(keywordLowercase))
	.filter((k) => k > -1)

	const indexOfKeyword = indices.length ? Math.min(...indices) : -1

	if (indexOfKeyword > -1) {
	if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
	orderedEmojiList[indexOfKeyword] = []
	}
	orderedEmojiList[indexOfKeyword].push(emoji)
	}
	}
	return orderedEmojiList.flat()
	}

	const getOffset = (elem) => {
	const style = elem.style.transform
	const res = /translateY$(\d+)px$/.exec(style)
	if (!res) {
	return 0
	}
	return res[1]
	}

	const toHeaderId = (id) => {
	return id.replace(/^row-\d+-/, '')
	}

	const EmojiPicker = {
	props: {
	enableStickerPicker: {
	required: false,
	type: Boolean,
	default: true,
	},
	hideCustomEmoji: {
	required: false,
	type: Boolean,
	default: false,
	},
	},
	inject: {
	popoversZLayer: {
	default: '',
	},
	},
	data() {
	return {
	keyword: '',
	activeGroup: 'custom',
	showingStickers: false,
	groupsScrolledClass: 'scrolled-top',
	keepOpen: false,
	customEmojiTimeout: null,
	hideCustomEmojiInPicker: false,
	// Lazy-load only after the first time `showing` becomes true.
	contentLoaded: false,
	popoverShown: false,
	groupRefs: {},
	emojiRefs: {},
	filteredEmojiGroups: [],
	emojiSize: 0,
	width: 0,
	}
	},
	components: {
	StickerPicker: defineAsyncComponent(
	() => import('src/components/sticker_picker/sticker_picker.vue'),
	),
	Checkbox,
	- StillImage,
	+
	Popover,
	},
	methods: {
	groupScroll(e) {
	e.currentTarget.scrollLeft += e.deltaY + e.deltaX
	},
	updateEmojiSize() {
	const css = window.getComputedStyle(this.$refs.popover.$el)
	const fontSize = css.getPropertyValue('font-size') \|\| '1rem'
	const emojiSize = css.getPropertyValue('--emojiSize') \|\| '2.2rem'

	const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '').trim()
	const fontSizeValue = Number(fontSize.replace(/[^0-9,.]+/, ''))

	const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '').trim()
	const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, ''))

	let fontSizeMultiplier
	if (fontSizeUnit.endsWith('em')) {
	fontSizeMultiplier = fontSizeValue
	} else {
	fontSizeMultiplier = fontSizeValue / 14
	}

	let emojiSizeReal
	if (emojiSizeUnit.endsWith('em')) {
	emojiSizeReal = emojiSizeValue * fontSizeMultiplier * 14
	} else {
	emojiSizeReal = emojiSizeValue
	}

	const fullEmojiSize = emojiSizeReal + 2 * 0.2 * fontSizeMultiplier * 14
	this.emojiSize = fullEmojiSize
	},
	togglePicker() {
	if (this.popoverShown) {
	this.hidePicker()
	} else {
	this.showPicker()
	}
	},
	showPicker() {
	this.$refs.popover.showPopover()
	this.$nextTick(() => {
	this.onShowing()
	})
	},
	hidePicker() {
	this.$refs.popover.hidePopover()
	},
	setAnchorEl(el) {
	this.$refs.popover.setAnchorEl(el)
	},
	setGroupRef(name) {
	return (el) => {
	this.groupRefs[name] = el
	}
	},
	onPopoverShown() {
	this.popoverShown = true
	},
	onPopoverClosed() {
	this.popoverShown = false
	},
	onStickerUploaded(e) {
	this.$emit('sticker-uploaded', e)
	},
	onStickerUploadFailed(e) {
	this.$emit('sticker-upload-failed', e)
	},
	onEmoji(emoji) {
	const value = emoji.imageUrl
	? `:${emoji.displayText}:`
	: emoji.replacement
	if (!this.keepOpen) {
	this.$refs.popover.hidePopover()
	}
	this.$emit('emoji', {
	insertion: value,
	insertionUrl: emoji.imageUrl,
	keepOpen: this.keepOpen,
	})
	},
	onScroll(startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
	const target = this.$refs['emoji-groups'].$el
	this.scrolledGroup(target, visibleStartIndex, visibleEndIndex)
	},
	scrolledGroup(target, start, end) {
	const top = target.scrollTop + 5
	this.$nextTick(() => {
	this.emojiItems.slice(start, end + 1).forEach((group) => {
	const headerId = toHeaderId(group.id)
	const ref = this.groupRefs['group-' + group.id]
	if (!ref) {
	return
	}
	const elem = ref.$el.parentElement
	if (!elem) {
	return
	}
	if (elem && getOffset(elem) <= top) {
	this.activeGroup = headerId
	}
	})
	this.scrollHeader()
	})
	},
	scrollHeader() {
	// Scroll the active tab's header into view
	const headerRef = this.groupRefs['group-header-' + this.activeGroup]
	const left = headerRef.offsetLeft
	const right = left + headerRef.offsetWidth
	const headerCont = this.$refs.header
	const currentScroll = headerCont.scrollLeft
	const currentScrollRight = currentScroll + headerCont.clientWidth
	const setScroll = (s) => {
	headerCont.scrollLeft = s
	}

	const margin = 7 // .emoji-tabs-item: padding
	if (left - margin < currentScroll) {
	setScroll(left - margin)
	} else if (right + margin > currentScrollRight) {
	setScroll(right + margin - headerCont.clientWidth)
	}
	},
	highlight(groupId) {
	this.setShowStickers(false)
	const indexInList = this.emojiItems.findIndex((k) => k.id === groupId)
	this.$refs['emoji-groups'].scrollToItem(indexInList)
	},
	updateScrolledClass(target) {
	if (target.scrollTop <= 5) {
	this.groupsScrolledClass = 'scrolled-top'
	} else if (target.scrollTop >= target.scrollTopMax - 5) {
	this.groupsScrolledClass = 'scrolled-bottom'
	} else {
	this.groupsScrolledClass = 'scrolled-middle'
	}
	},
	toggleStickers() {
	this.showingStickers = !this.showingStickers
	},
	setShowStickers(value) {
	this.showingStickers = value
	},
	filterByKeyword(list, keyword) {
	return filterByKeyword(
	list,
	keyword,
	this.languages,
	this.maybeLocalizedEmojiName,
	)
	},
	onShowing() {
	const oldContentLoaded = this.contentLoaded
	this.updateEmojiSize()
	this.recalculateItemPerRow()
	this.$nextTick(() => {
	this.$refs.search.focus()
	})
	this.contentLoaded = true
	this.filteredEmojiGroups = this.getFilteredEmojiGroups()
	if (!oldContentLoaded) {
	this.$nextTick(() => {
	if (this.defaultGroup) {
	this.highlight(this.defaultGroup)
	}
	})
	}
	},
	getFilteredEmojiGroups() {
	return this.allEmojiGroups
	.map((group) => ({
	...group,
	emojis: this.filterByKeyword(group.emojis, trim(this.keyword)),
	}))
	.filter((group) => group.emojis.length > 0)
	},
	recalculateItemPerRow() {
	this.$nextTick(() => {
	if (!this.$refs['emoji-groups']) {
	return
	}
	this.width = this.$refs['emoji-groups'].$el.clientWidth
	})
	},
	},
	watch: {
	keyword() {
	this.onScroll()
	this.debouncedHandleKeywordChange()
	},
	allCustomGroups() {
	this.filteredEmojiGroups = this.getFilteredEmojiGroups()
	},
	},
	computed: {
	minItemSize() {
	return this.emojiSize
	},
	// used to watch it
	fontSize() {
	this.$nextTick(() => {
	this.updateEmojiSize()
	})
	return useMergedConfigStore().mergedConfig.fontSize
	},
	emojiHeight() {
	return this.emojiSize
	},
	itemPerRow() {
	return this.width ? Math.floor(this.width / this.emojiSize) : 6
	},
	activeGroupView() {
	return this.showingStickers ? '' : this.activeGroup
	},
	stickersAvailable() {
	if (useEmojiStore().stickers) {
	return useEmojiStore().stickers.length > 0
	}
	return 0
	},
	allCustomGroups() {
	if (this.hideCustomEmoji \|\| this.hideCustomEmojiInPicker) {
	return {}
	}
	const emojis = useEmojiStore().groupedCustomEmojis
	if (emojis.unpacked) {
	emojis.unpacked.text = this.$t('emoji.unpacked')
	}
	return emojis
	},
	defaultGroup() {
	return Object.keys(this.allCustomGroups)[0]
	},
	unicodeEmojiGroups() {
	return useEmojiStore().standardEmojiGroupList.map((group) => ({
	id: `standard-${group.id}`,
	text: this.$t(`emoji.unicode_groups.${group.id}`),
	icon: UNICODE_EMOJI_GROUP_ICON[group.id],
	emojis: group.emojis,
	}))
	},
	allEmojiGroups() {
	return Object.entries(this.allCustomGroups)
	.map(([, v]) => v)
	.concat(this.unicodeEmojiGroups)
	},
	stickerPickerEnabled() {
	return (useEmojiStore().stickers \|\| []).length !== 0
	},
	debouncedHandleKeywordChange() {
	return debounce(() => {
	this.filteredEmojiGroups = this.getFilteredEmojiGroups()
	}, 500)
	},
	emojiItems() {
	return this.filteredEmojiGroups
	.map((group) =>
	chunk(group.emojis, this.itemPerRow).map((items, index) => ({
	...group,
	id: index === 0 ? group.id : `row-${index}-${group.id}`,
	emojis: items,
	isFirstRow: index === 0,
	})),
	)
	.reduce((a, c) => a.concat(c), [])
	},
	languages() {
	return ensureFinalFallback(
	useMergedConfigStore().mergedConfig.interfaceLanguage,
	)
	},
	maybeLocalizedEmojiName() {
	return (emoji) => {
	if (!emoji.annotations) {
	return emoji.displayText
	}

	if (emoji.displayTextI18n) {
	return this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args)
	}

	for (const lang of this.languages) {
	if (emoji.annotations[lang]?.name) {
	return emoji.annotations[lang].name
	}
	}

	return emoji.displayText
	}
	},
	isInModal() {
	return this.popoversZLayer === 'modals'
	},
	},
	}

	export default EmojiPicker
	diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
	index e22336138e..8d1045f518 100644
	--- a/src/components/emoji_reactions/emoji_reactions.js
	+++ b/src/components/emoji_reactions/emoji_reactions.js
	@@ -1,107 +1,107 @@
	-import StillImage from 'src/components/still-image/still-image.vue'
	+
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import UserListPopover from '../user_list_popover/user_list_popover.vue'

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

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

	library.add(faPlus, faMinus, faCheck)

	const EMOJI_REACTION_COUNT_CUTOFF = 12

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

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

	export default EmojiReactions
	diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
	index 2994cb5310..d649b6425a 100644
	--- a/src/components/media_modal/media_modal.js
	+++ b/src/components/media_modal/media_modal.js
	@@ -1,161 +1,163 @@
	+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/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
	index 85f6fafeeb..120bcfa7b4 100644
	--- a/src/components/navigation/navigation_pins.js
	+++ b/src/components/navigation/navigation_pins.js
	@@ -1,130 +1,130 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

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

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

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

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

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

	export default NavPanel
	diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
	index c1b6c14412..176ad3c9d4 100644
	--- a/src/components/notification/notification.js
	+++ b/src/components/notification/notification.js
	@@ -1,228 +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 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 { defineAsyncComponent } from 'vue'
	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: defineAsyncComponent(
	- () => import('src/components/confirm_modal/confirm_modal.vue'),
	- ),
	+ 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/poll/poll.js b/src/components/poll/poll.js
	index 5033726f39..6f82f94e88 100644
	--- a/src/components/poll/poll.js
	+++ b/src/components/poll/poll.js
	@@ -1,124 +1,124 @@
	import Checkbox from 'components/checkbox/checkbox.vue'
	-import RichContent from 'components/rich_content/rich_content.jsx'
	+
	import Timeago from 'components/timeago/timeago.vue'

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

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

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

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

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

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

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

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

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

	allAttentions.unshift(user)

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

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

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

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

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

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

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

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

	const { scopeCopy } = useMergedConfigStore().mergedConfig

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

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

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

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

	const { postContentType: contentType, sensitiveByDefault } =
	useMergedConfigStore().mergedConfig

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

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

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

	return this.disableQuotes !== true
	},
	isReply() {
	return this.newStatus.type === 'reply'
	},
	quotable() {
	return this.quotingAvailable && this.replyTo
	},
	quoteThreadToggled: {
	get() {
	return this.newStatus.hasQuote && this.newStatus.quote.thread
	},
	set(value) {
	this.newStatus.hasQuote = value
	this.newStatus.quote.thread = value
	this.newStatus.quote.id = value ? this.replyTo : ''
	},
	},
	defaultQuotable() {
	if (
	!this.quotingAvailable \|\|
	!this.isReply \|\|
	!useMergedConfigStore().mergedConfig.quoteReply
	) {
	return false
	}

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

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

	return false
	},
	inReplyStatusId() {
	return !this.newStatus.hasQuote \|\|
	!this.newStatus.quote.thread \|\|
	!this.newStatus.quote.id
	? this.replyTo
	: undefined
	},
	quoteId() {
	return this.newStatus.hasQuote ? this.newStatus.quote.id : undefined
	},
	debouncedMaybeAutoSaveDraft() {
	return debounce(this.maybeAutoSaveDraft, 3000)
	},
	pollFormVisible() {
	return this.newStatus.hasPoll
	},
	quoteFormVisible() {
	return this.newStatus.hasQuote && !this.newStatus.quote.thread
	},
	shouldAutoSaveDraft() {
	return useMergedConfigStore().mergedConfig.autoSaveDraft
	},
	autoSaveState() {
	if (this.saveable) {
	return this.$t('post_status.auto_save_saving')
	} else if (this.newStatus.id) {
	return this.$t('post_status.auto_save_saved')
	} else {
	return this.$t('post_status.auto_save_nothing_new')
	}
	},
	safeToSaveDraft() {
	return (
	(this.newStatus.status \|\|
	this.newStatus.spoilerText \|\|
	this.newStatus.files?.length \|\|
	this.newStatus.hasPoll \|\|
	this.newStatus.hasQuote) &&
	this.saveable
	)
	},
	hasEmptyDraft() {
	return (
	this.newStatus.id &&
	!(
	this.newStatus.status \|\|
	this.newStatus.spoilerText \|\|
	this.newStatus.files?.length \|\|
	this.newStatus.hasPoll \|\|
	this.newStatus.hasQuote
	)
	)
	},
	...mapState(useMergedConfigStore, ['mergedConfig']),
	...mapState(useInterfaceStore, {
	mobileLayout: (store) => store.mobileLayout,
	}),
	},
	watch: {
	newStatus: {
	deep: true,
	handler() {
	this.statusChanged()
	},
	},
	saveable(val) {
	// https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#usage_notes
	// MDN says we'd better add the beforeunload event listener only when needed, and remove it when it's no longer needed
	if (val) {
	this.addBeforeUnloadListener()
	} else {
	this.removeBeforeUnloadListener()
	}
	},
	},
	beforeUnmount() {
	this.maybeAutoSaveDraft()
	this.removeBeforeUnloadListener()
	},
	methods: {
	...mapActions(useMediaViewerStore, ['increment']),
	statusChanged() {
	this.autoPreview()
	this.updateIdempotencyKey()
	this.debouncedMaybeAutoSaveDraft()
	this.saveable = true
	this.saveInhibited = false
	},
	clearStatus() {
	const newStatus = this.newStatus
	this.saveInhibited = true
	this.newStatus = {
	status: '',
	spoilerText: '',
	files: [],
	visibility: newStatus.visibility,
	contentType: newStatus.contentType,
	poll: {},
	hasPoll: false,
	hasQuote: false,
	quote: {},
	mediaDescriptions: {},
	}
	this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
	this.clearPollForm()
	this.clearQuoteForm()
	if (this.preserveFocus) {
	this.$nextTick(() => {
	this.$refs.textarea.focus()
	})
	}
	const el = this.$el.querySelector('textarea')
	el.style.height = 'auto'
	el.style.height = undefined
	this.error = null
	if (this.preview) this.previewStatus()
	this.saveable = false
	},
	async postStatus(event, newStatus) {
	if (this.posting && !this.optimisticPosting) {
	return
	}
	if (this.disableSubmit) {
	return
	}
	if (this.emojiInputShown) {
	return
	}
	if (this.submitOnEnter) {
	event.stopPropagation()
	event.preventDefault()
	}

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

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

	const poll = newStatus.hasPoll ? pollFormToMasto(newStatus.poll) : {}
	if (this.pollContentError) {
	this.error = this.pollContentError
	return
	}

	this.posting = true

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

	const postingOptions = {
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: newStatus.files,
	store: this.$store,
	inReplyToStatusId: this.inReplyStatusId,
	quoteId: this.quoteId,
	contentType: newStatus.contentType,
	poll,
	idempotencyKey: this.idempotencyKey,
	}

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

	postHandler(postingOptions).then((data) => {
	if (!data.error) {
	this.abandonDraft()
	this.clearStatus()
	this.$emit('posted', data)
	} else {
	this.error = data.error
	}
	this.posting = false
	})
	},
	previewStatus() {
	if (this.emptyStatus && this.newStatus.spoilerText.trim() === '') {
	this.preview = { error: this.$t('post_status.preview_empty') }
	this.previewLoading = false
	return
	}
	const newStatus = this.newStatus
	this.previewLoading = true

	statusPoster
	.postStatus({
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: [],
	store: this.$store,
	inReplyToStatusId: this.inReplyStatusId,
	quoteId: this.quoteId,
	contentType: newStatus.contentType,
	poll: {},
	preview: true,
	})
	.then((data) => {
	// Don't apply preview if not loading, because it means
	// user has closed the preview manually.
	if (!this.previewLoading) return
	if (!data.error) {
	this.preview = data
	} else {
	this.preview = { error: data.error }
	}
	})
	.catch((error) => {
	this.preview = { error }
	})
	.finally(() => {
	this.previewLoading = false
	})
	},
	debouncePreviewStatus: debounce(function () {
	this.previewStatus()
	}, 500),
	autoPreview() {
	if (!this.preview) return
	this.previewLoading = true
	this.debouncePreviewStatus()
	},
	closePreview() {
	this.preview = null
	this.previewLoading = false
	},
	togglePreview() {
	if (this.showPreview) {
	this.closePreview()
	} else {
	this.previewStatus()
	}
	},
	addMediaFile(fileInfo) {
	this.newStatus.files.push(fileInfo)
	this.$emit('resize', { delayed: true })
	},
	removeMediaFile(fileInfo) {
	const index = this.newStatus.files.indexOf(fileInfo)
	this.newStatus.files.splice(index, 1)
	this.$emit('resize')
	},
	editAttachment(fileInfo, newText) {
	this.newStatus.mediaDescriptions[fileInfo.id] = newText
	},
	shiftUpMediaFile(fileInfo) {
	const { files } = this.newStatus
	const index = this.newStatus.files.indexOf(fileInfo)
	files.splice(index, 1)
	files.splice(index - 1, 0, fileInfo)
	},
	shiftDnMediaFile(fileInfo) {
	const { files } = this.newStatus
	const index = this.newStatus.files.indexOf(fileInfo)
	files.splice(index, 1)
	files.splice(index + 1, 0, fileInfo)
	},
	uploadFailed(errString, templateArgs) {
	templateArgs = templateArgs \|\| {}
	this.error =
	this.$t('upload.error.base') +
	' ' +
	this.$t('upload.error.' + errString, templateArgs)
	},
	startedUploadingFiles() {
	this.uploadingFiles = true
	},
	finishedUploadingFiles() {
	this.$emit('resize')
	this.uploadingFiles = false
	},
	paste(e) {
	this.autoPreview()
	this.resize(e)
	if (e.clipboardData.files.length > 0) {
	// prevent pasting of file as text
	e.preventDefault()
	// Strangely, files property gets emptied after event propagation
	// Trying to wrap it in array doesn't work. Plus I doubt it's possible
	// to hold more than one file in clipboard.
	this.dropFiles = [e.clipboardData.files[0]]
	}
	},
	fileDrop(e) {
	if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
	e.preventDefault() // allow dropping text like before
	this.dropFiles = e.dataTransfer.files
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'hide'
	}
	},
	fileDragStop() {
	// The false-setting is done with delay because just using leave-events
	// directly caused unwanted flickering, this is not perfect either but
	// much less noticable.
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'fade'
	this.dropStopTimeout = setTimeout(() => (this.showDropIcon = 'hide'), 500)
	},
	fileDrag(e) {
	e.dataTransfer.dropEffect = this.uploadFileLimitReached ? 'none' : 'copy'
	if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'show'
	}
	},
	onEmojiInputInput() {
	this.$nextTick(() => {
	this.resize(this.$refs.textarea)
	})
	},
	resize(e) {
	const target = e.target \|\| e
	if (!(target instanceof window.Element)) {
	return
	}

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

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

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

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

	const oldHeight = pxStringToNumber(target.style.height)

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

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

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

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

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

	if (scrollerRef === window) {
	scrollerRef.scroll(0, targetScroll)
	} else {
	scrollerRef.scrollTop = targetScroll
	}
	},
	clearError() {
	this.error = null
	},
	changeVis(visibility) {
	this.newStatus.visibility = visibility
	},
	togglePollForm() {
	this.newStatus.hasPoll = !this.newStatus.hasPoll
	},
	setPoll(poll) {
	this.newStatus.poll = poll
	},
	clearPollForm() {
	if (this.$refs.pollForm) {
	this.$refs.pollForm.clear()
	}
	},
	clearQuoteForm() {
	if (this.$refs.quoteForm) {
	this.$refs.quoteForm.clear()
	}
	},
	toggleQuoteForm() {
	this.newStatus.hasQuote = !this.newStatus.hasQuote

	this.newStatus.quote = {}
	this.newStatus.quote.thread = false
	this.newStatus.quote.id = null
	this.newStatus.quote.url = ''
	},
	dismissScopeNotice() {
	useSyncConfigStore().setSimplePrefAndSave({
	path: 'hideScopeNotice',
	value: true,
	})
	},
	setMediaDescription(id) {
	const description = this.newStatus.mediaDescriptions[id]
	if (!description \|\| description.trim() === '') return
	return statusPoster.setMediaDescription({
	store: this.$store,
	id,
	description,
	})
	},
	setAllMediaDescriptions() {
	const ids = this.newStatus.files.map((file) => file.id)
	return Promise.all(ids.map((id) => this.setMediaDescription(id)))
	},
	handleEmojiInputShow(value) {
	this.emojiInputShown = value
	},
	updateIdempotencyKey() {
	this.idempotencyKey = Date.now().toString()
	},
	openProfileTab() {
	useInterfaceStore().openSettingsModalTab('profile')
	},
	propsToNative(props) {
	return propsToNative(props)
	},
	saveDraft() {
	if (!this.disableDraft && !this.saveInhibited) {
	if (this.safeToSaveDraft) {
	return this.$store
	.dispatch('addOrSaveDraft', { draft: this.newStatus })
	.then((id) => {
	if (this.newStatus.id !== id) {
	this.newStatus.id = id
	}
	this.saveable = false
	if (!this.shouldAutoSaveDraft) {
	this.clearStatus()
	this.$emit('draft-done')
	}
	})
	} else if (this.hasEmptyDraft) {
	// There is a draft, but there is nothing in it, clear it
	return this.abandonDraft().then(() => {
	this.saveable = false
	if (!this.shouldAutoSaveDraft) {
	this.clearStatus()
	this.$emit('draft-done')
	}
	})
	}
	}
	return Promise.resolve()
	},
	maybeAutoSaveDraft() {
	if (this.shouldAutoSaveDraft) {
	this.saveDraft(false)
	}
	},
	abandonDraft() {
	return this.$store.dispatch('abandonDraft', { id: this.newStatus.id })
	},
	getDraft(statusType, refId) {
	const maybeDraft = this.$store.state.drafts.drafts[this.draftId]
	if (this.draftId && maybeDraft) {
	return maybeDraft
	} else {
	const existingDrafts = this.$store.getters.draftsByTypeAndRefId(
	statusType,
	refId,
	)

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

	export default PostStatusForm
	diff --git a/src/components/quote/quote.js b/src/components/quote/quote.js
	index 9525ddff26..30bb147cfe 100644
	--- a/src/components/quote/quote.js
	+++ b/src/components/quote/quote.js
	@@ -1,103 +1,102 @@
	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/report/report.js b/src/components/report/report.js
	index fcfb83c3a9..66e59480e5 100644
	--- a/src/components/report/report.js
	+++ b/src/components/report/report.js
	@@ -1,46 +1,46 @@
	-import RichContent from 'src/components/rich_content/rich_content.jsx'
	+
	import Select from '../select/select.vue'
	import StatusContent from '../status_content/status_content.vue'
	import Timeago from '../timeago/timeago.vue'

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

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

	const Report = {
	props: ['reportId'],
	components: {
	Select,
	StatusContent,
	Timeago,
	- RichContent,
	+
	},
	computed: {
	report() {
	return useReportsStore().reports[this.reportId] \|\| {}
	},
	state: {
	get: function () {
	return this.report.state
	},
	set: function (val) {
	this.setReportState(val)
	},
	},
	},
	methods: {
	generateUserProfileLink(user) {
	return generateProfileLink(
	user.id,
	user.screen_name,
	useInstanceStore().restrictedNicknames,
	)
	},
	setReportState(state) {
	return useReportsStore().setReportState({ id: this.report.id, state })
	},
	},
	}

	export default Report
	diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
	index fc17a529fc..9ed06eb642 100644
	--- a/src/components/rich_content/rich_content.jsx
	+++ b/src/components/rich_content/rich_content.jsx
	@@ -1,423 +1,423 @@
	import { flattenDeep, unescape as ldUnescape } from 'lodash'

	import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'
	import { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.js'
	import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
	-import StillImage from 'src/components/still-image/still-image.vue'
	+
	import StillImageEmojiPopover from 'src/components/still-image/still-image-emoji-popover.vue'

	import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
	import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
	import {
	getAttrs,
	getTagName,
	processTextForEmoji,
	} from 'src/services/html_converter/utility.service.js'

	import './rich_content.scss'

	const MAYBE_LINE_BREAKING_ELEMENTS = [
	'blockquote',
	'br',
	'hr',
	'ul',
	'ol',
	'li',
	'p',
	'table',
	'tbody',
	'td',
	'th',
	'thead',
	'tr',
	'h1',
	'h2',
	'h3',
	'h4',
	'h5',
	]

	/**
	* RichContent, The Über-powered component for rendering Post HTML.
	*
	* This takes post HTML and does multiple things to it:
	* - Groups all mentions into <MentionsLine>, this affects all mentions regardles
	* of where they are (beginning/middle/end), even single mentions are converted
	* to a <MentionsLine> containing single <MentionLink>.
	* - Replaces emoji shortcodes with <StillImage>'d images.
	*
	* There are two problems with this component's architecture:
	* 1. Parsing HTML and rendering are inseparable. Attempts to separate the two
	* proven to be a massive overcomplication due to amount of things done here.
	* 2. We need to output both render and some extra data, which seems to be imp-
	* possible in vue. Current solution is to emit 'parseReady' event when parsing
	* is done within render() function.
	*
	* Apart from that one small hiccup with emit in render this _should_ be vue3-ready
	*/
	export default {
	name: 'RichContent',
	components: {
	MentionsLine,
	HashtagLink,
	},
	props: {
	// Original html content
	html: {
	required: true,
	type: String,
	},
	attentions: {
	required: false,
	default: () => [],
	},
	// Emoji object, as in status.emojis, note the "s" at the end...
	emoji: {
	required: true,
	type: Array,
	},
	// Whether to handle links or not (posts: yes, everything else: no)
	handleLinks: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Meme arrows
	greentext: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Faint style (for notifs)
	faint: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Collapse newlines
	collapse: {
	required: false,
	type: Boolean,
	default: false,
	},
	/* Content comes from current instance
	*
	* This is used for emoji stealing popover.
	* By default we assume it is, so that steal
	* emoji button isn't shown where it probably
	* should not be.
	*/
	isLocal: {
	required: false,
	type: Boolean,
	default: true,
	},
	// Allow wide emoji (max 3:1 ratio)
	allowNonSquareEmoji: {
	required: false,
	type: Boolean,
	default: false,
	},
	},
	// NEVER EVER TOUCH DATA INSIDE RENDER
	render() {
	// Pre-process HTML
	const { newHtml: html } = preProcessPerLine(this.html, this.greentext)
	let currentMentions = null // Current chain of mentions, we group all mentions together
	// This is used to recover spacing removed when parsing mentions
	let lastSpacing = ''

	const lastTags = [] // Tags that appear at the end of post body
	const writtenMentions = [] // All mentions that appear in post body
	const invisibleMentions = [] // All mentions that go beyond the limiter (see MentionsLine)
	// to collapse too many mentions in a row
	const writtenTags = [] // All tags that appear in post body
	// unique index for vue "tag" property
	let mentionIndex = 0
	let tagsIndex = 0

	const renderImage = (tag) => {
	return <StillImage {...getAttrs(tag)} class="img" />
	}

	const renderHashtag = (attrs, children, encounteredTextReverse) => {
	const { index, ...linkData } = getLinkData(attrs, children, tagsIndex++)
	writtenTags.push(linkData)
	if (!encounteredTextReverse) {
	lastTags.push(linkData)
	}
	const { url, tag, content } = linkData
	return <HashtagLink url={url} tag={tag} content={content} />
	}

	const renderMention = (attrs, children) => {
	const linkData = getLinkData(attrs, children, mentionIndex++)
	linkData.notifying = this.attentions.some(
	(a) => a.statusnet_profile_url === linkData.url,
	)
	writtenMentions.push(linkData)
	if (currentMentions === null) {
	currentMentions = []
	}
	currentMentions.push(linkData)
	if (currentMentions.length > MENTIONS_LIMIT) {
	invisibleMentions.push(linkData)
	}
	if (currentMentions.length === 1) {
	return <MentionsLine mentions={currentMentions} />
	} else {
	return ''
	}
	}

	// Processor to use with html_tree_converter
	const processItem = (item, index, array, what) => {
	// Handle text nodes - just add emoji
	if (typeof item === 'string') {
	const emptyText = item.trim() === ''
	if (item.includes('\n')) {
	currentMentions = null
	}
	if (emptyText) {
	// don't include spaces when processing mentions - we'll include them
	// in MentionsLine
	lastSpacing = item
	// Don't remove last space in a container (fixes poast mentions)
	return index !== array.length - 1 && currentMentions !== null
	? item.trim()
	: item
	}

	currentMentions = null
	if (item.includes(':')) {
	item = [
	'',
	processTextForEmoji(item, this.emoji, ({ shortcode, url }) => {
	return (
	<StillImageEmojiPopover
	class="emoji img"
	src={url}
	title={`:${shortcode}:`}
	alt={`:${shortcode}:`}
	shortcode={shortcode}
	isLocal={this.isLocal}
	/>
	)
	}),
	]
	}
	return item
	}

	// Handle tag nodes
	if (Array.isArray(item)) {
	const [opener, children, closer] = item
	let Tag = getTagName(opener)
	if (Tag.toLowerCase() === 'script') Tag = 'js-exploit'
	if (Tag.toLowerCase() === 'style') Tag = 'css-exploit'
	const fullAttrs = getAttrs(opener, () => true)
	const attrs = getAttrs(opener)
	const previouslyMentions = currentMentions !== null
	/* During grouping of mentions we trim all the empty text elements
	* This padding is added to recover last space removed in case
	* we have a tag right next to mentions
	*/
	const mentionsLinePadding =
	// Padding is only needed if we just finished parsing mentions
	previouslyMentions &&
	// Don't add padding if content is string and has padding already
	!(
	children &&
	typeof children[0] === 'string' &&
	children[0].match(/^\s/)
	)
	? lastSpacing
	: ''
	if (MAYBE_LINE_BREAKING_ELEMENTS.includes(Tag)) {
	// all the elements that can cause a line change
	currentMentions = null
	} else if (Tag === 'img') {
	// replace images with StillImage
	return ['', [mentionsLinePadding, renderImage(opener)], '']
	} else if (Tag === 'a' && this.handleLinks) {
	// replace mentions with MentionLink
	if (fullAttrs.class && fullAttrs.class.includes('mention')) {
	// Handling mentions here
	return renderMention(attrs, children)
	} else {
	currentMentions = null
	}
	} else if (Tag === 'span') {
	if (
	this.handleLinks &&
	fullAttrs.class &&
	fullAttrs.class.includes('h-card')
	) {
	return ['', children.map(processItem), '']
	}
	}

	if (children !== undefined) {
	return [
	'',
	[mentionsLinePadding, [opener, children.map(processItem), closer]],
	'',
	]
	} else {
	return ['', [mentionsLinePadding, item], '']
	}
	}
	}

	// Processor for back direction (for finding "last" stuff, just easier this way)
	let encounteredTextReverse = false
	const processItemReverse = (item, index, array, what) => {
	// Handle text nodes - just add emoji
	if (typeof item === 'string') {
	const emptyText = item.trim() === ''
	if (emptyText) return item
	if (!encounteredTextReverse) encounteredTextReverse = true
	return ldUnescape(item)
	} else if (Array.isArray(item)) {
	// Handle tag nodes
	const [opener, children] = item
	const Tag = opener === '' ? '' : getTagName(opener)
	switch (Tag) {
	case 'a': {
	// replace mentions with MentionLink
	if (!this.handleLinks) break
	const fullAttrs = getAttrs(opener, () => true)
	const attrs = getAttrs(opener, () => true)
	// should only be this
	if (
	(fullAttrs.class && fullAttrs.class.includes('hashtag')) \|\| // Pleroma style
	fullAttrs.rel === 'tag' // Mastodon style
	) {
	return renderHashtag(attrs, children, encounteredTextReverse)
	} else {
	attrs.target = '_blank'
	const newChildren = [...children]
	.reverse()
	.map(processItemReverse)
	.reverse()

	return <a {...attrs}>{newChildren}</a>
	}
	}
	case '':
	return [...children].reverse().map(processItemReverse).reverse()
	}

	// Render tag as is
	if (children !== undefined) {
	const newChildren = Array.isArray(children)
	? [...children].reverse().map(processItemReverse).reverse()
	: children
	return <Tag {...getAttrs(opener)}>{newChildren}</Tag>
	} else {
	return <Tag />
	}
	}
	return item
	}

	const pass1 = convertHtmlToTree(html).map(processItem)
	const pass2 = [...pass1].reverse().map(processItemReverse).reverse()

	// DO NOT USE SLOTS they cause a re-render feedback loop here.
	// slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
	// at least until vue3?
	const result = (
	<span
	class={[
	'RichContent',
	this.faint ? '-faint' : '',
	this.allowNonSquareEmoji ? '-allow-non-square-emoji' : '',
	]}
	>
	{this.collapse
	? pass2.map((x) => {
	if (!Array.isArray(x)) return x.replace(/\n/g, ' ')
	return x.map((y) => (y.type === 'br' ? ' ' : y))
	})
	: pass2}
	</span>
	)

	const event = {
	lastTags,
	writtenMentions,
	writtenTags,
	invisibleMentions,
	}

	// DO NOT MOVE TO UPDATE. BAD IDEA.
	this.$emit('parseReady', event)

	return result
	},
	}

	const getLinkData = (attrs, children, index) => {
	const stripTags = (item) => {
	if (typeof item === 'string') {
	return item
	} else {
	return item[1].map(stripTags).join('')
	}
	}
	const textContent = children.map(stripTags).join('')
	return {
	index,
	url: attrs.href,
	tag: attrs['data-tag'],
	content: flattenDeep(children).join(''),
	textContent,
	}
	}

	/** Pre-processing HTML
	*
	* Currently this does one thing:
	* - add green/cyantexting
	*
	* @param {String} html - raw HTML to process
	* @param {Boolean} greentext - whether to enable greentexting or not
	*/
	export const preProcessPerLine = (html, greentext) => {
	const greentextHandle = new Set(['p', 'div'])

	const lines = convertHtmlToLines(html)
	const newHtml = lines
	.reverse()
	.map((item, index, array) => {
	if (!item.text) return item
	const string = item.text

	// Greentext stuff
	if (
	// Only if greentext is engaged
	greentext &&
	// Only handle p's and divs. Don't want to affect blockquotes, code etc
	item.level.every((l) => greentextHandle.has(l)) &&
	// Only if line begins with '>' or '<'
	(string.includes('>') \|\| string.includes('<'))
	) {
	const cleanedString = string
	.replace(/<[^>]+?>/gi, '') // remove all tags
	.replace(/@\w+/gi, '') // remove mentions (even failed ones)
	.trim()
	if (cleanedString.startsWith('>')) {
	return `<span class='greentext'>${string}</span>`
	} else if (cleanedString.startsWith('<')) {
	return `<span class='cyantext'>${string}</span>`
	}
	}

	return string
	})
	.reverse()
	.join('')

	return { newHtml }
	}
	diff --git a/src/components/search/search.js b/src/components/search/search.js
	index e160514a14..220ec9090f 100644
	--- a/src/components/search/search.js
	+++ b/src/components/search/search.js
	@@ -1,131 +1,131 @@
	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/helpers/emoji_editing_popover.vue b/src/components/settings_modal/helpers/emoji_editing_popover.vue
	index cd422b160b..d576ee7280 100644
	--- a/src/components/settings_modal/helpers/emoji_editing_popover.vue
	+++ b/src/components/settings_modal/helpers/emoji_editing_popover.vue
	@@ -1,341 +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 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: 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/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
	index 139f7225a9..1b8b9e8fa0 100644
	--- a/src/components/side_drawer/side_drawer.js
	+++ b/src/components/side_drawer/side_drawer.js
	@@ -1,138 +1,137 @@
	import { mapActions, mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'
	import { mapGetters } from 'vuex'
	+import UserCard from 'src/components/user_card/user_card.vue'

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

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

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

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

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

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

	export default SideDrawer
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index 507687ce0d..d0a149b835 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,668 +1,665 @@
	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 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 PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	+import StatusPopover from 'src/components/status_popover/status_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,
	UserAvatar,
	AvatarList,
	Timeago,
	- StatusPopover: defineAsyncComponent(
	- () => import('src/components/status_popover/status_popover.vue'),
	- ),
	+ StatusPopover,
	UserListPopover,
	EmojiReactions,
	StatusContent,
	- RichContent,
	MentionLink,
	MentionsLine,
	UserPopover,
	UserLink,
	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 ab5add506c..661d1befd8 100644
	--- a/src/components/status_action_buttons/action_button.js
	+++ b/src/components/status_action_buttons/action_button.js
	@@ -1,169 +1,168 @@
	import { defineAsyncComponent } from 'vue'

	import Popover from 'src/components/popover/popover.vue'
	+import EmojiPicker from '../emoji_picker/emoji_picker.vue'

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

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBookmark as faBookmarkRegular,
	faFaceSmileBeam,
	faStar as faStarRegular,
	} from '@fortawesome/free-regular-svg-icons'
	import {
	faBookmark,
	faCheck,
	faChevronDown,
	faChevronRight,
	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'
	),
	),
	- EmojiPicker: defineAsyncComponent(
	- () => import('src/components/emoji_picker/emoji_picker.vue'),
	- ),
	+ EmojiPicker,
	Popover,
	},
	data: () => ({
	animationState: false,
	}),
	computed: {
	buttonClass() {
	return [
	this.button.name + '-button',
	{
	'-with-extra': this.button.name === 'bookmark',
	'-extra': this.extra,
	'-quick': !this.extra,
	},
	]
	},
	userIsMuted() {
	return this.$store.getters.relationship(this.status.user.id).muting
	},
	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_body/status_body.js b/src/components/status_body/status_body.js
	index 1b7d264032..f5bb749a2e 100644
	--- a/src/components/status_body/status_body.js
	+++ b/src/components/status_body/status_body.js
	@@ -1,165 +1,165 @@
	import { mapState } from 'pinia'

	-import RichContent from 'src/components/rich_content/rich_content.jsx'
	+

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

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

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

	const StatusBody = {
	name: 'StatusBody',
	props: [
	'compact',
	'collapse', // replaces newlines with spaces
	'status',
	'focused',
	'noHeading',
	'fullContent',
	'singleLine',
	'showingTall',
	'expandingSubject',
	'showingLongSubject',
	'toggleShowingTall',
	'toggleExpandingSubject',
	'toggleShowingLongSubject',
	],
	data() {
	return {
	postLength: this.status.text.length,
	parseReadyDone: false,
	}
	},
	emits: ['parseReady'],
	computed: {
	localCollapseSubjectDefault() {
	return this.mergedConfig.collapseMessageWithSubject
	},
	allowNonSquareEmoji() {
	return this.mergedConfig.nonSquareEmoji
	},
	// This is a bit hacky, but we want to approximate post height before rendering
	// so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
	// as well as approximate line count by counting characters and approximating ~80
	// per line.
	//
	// Using max-height + overflow: auto for status components resulted in false positives
	// very often with japanese characters, and it was very annoying.
	tallStatus() {
	if (this.singleLine \|\| this.compact) return false
	const lengthScore =
	this.status.raw_html.split(/<p\|<br/).length + this.postLength / 80
	return lengthScore > 20
	},
	longSubject() {
	return this.status.summary.length > 240
	},
	// When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
	mightHideBecauseSubject() {
	return !!this.status.summary && this.localCollapseSubjectDefault
	},
	mightHideBecauseTall() {
	return (
	this.tallStatus &&
	!(this.status.summary && this.localCollapseSubjectDefault)
	)
	},
	hideSubjectStatus() {
	return this.mightHideBecauseSubject && !this.expandingSubject
	},
	hideTallStatus() {
	return this.mightHideBecauseTall && !this.showingTall
	},
	shouldShowToggle() {
	return this.mightHideBecauseSubject \|\| this.mightHideBecauseTall
	},
	toggleButtonClasses() {
	return {
	'cw-status-hider': !this.showingMore && this.mightHideBecauseSubject,
	'tall-status-hider': !this.showingMore && this.mightHideBecauseTall,
	'status-unhider': this.showingMore,
	}
	},
	toggleText() {
	if (this.showingMore) {
	return this.mightHideBecauseSubject
	? this.$t('status.hide_content')
	: this.$t('general.show_less')
	} else {
	return this.mightHideBecauseSubject
	? this.$t('status.show_content')
	: this.$t('general.show_more')
	}
	},
	showingMore() {
	return (
	(this.mightHideBecauseTall && this.showingTall) \|\|
	(this.mightHideBecauseSubject && this.expandingSubject)
	)
	},
	attachmentTypes() {
	return this.status.attachments.map((file) => file.type)
	},
	collapsedStatus() {
	return this.status.raw_html.replace(/(\n\|<br\s?\/?>)/g, ' ')
	},
	...mapState(useMergedConfigStore, ['mergedConfig']),
	},
	components: {
	- RichContent,
	+
	},
	mounted() {
	this.status.attentions &&
	this.status.attentions.forEach((attn) => {
	const { id } = attn
	this.$store.dispatch('fetchUserIfMissing', id)
	})
	},
	methods: {
	onParseReady(event) {
	if (this.parseReadyDone) return
	this.parseReadyDone = true
	this.$emit('parseReady', event)
	const { writtenMentions, invisibleMentions } = event
	writtenMentions
	.filter((mention) => !mention.notifying)
	.forEach((mention) => {
	const { content, url } = mention
	const cleanedString = content.replace(/<[^>]+?>/gi, '') // remove all tags
	if (!cleanedString.startsWith('@')) return
	const handle = cleanedString.slice(1)
	const host = url.replace(/^https?:\/\//, '').replace(/\/.+?$/, '')
	this.$store.dispatch('fetchUserIfMissing', `${handle}@${host}`)
	})
	/* This is a bit of a hack to make current tall status detector work
	* with rich mentions. Invisible mentions are detected at RichContent level
	* and also we generate plaintext version of mentions by stripping tags
	* so here we subtract from post length by each mention that became invisible
	* via MentionsLine
	*/
	this.postLength = invisibleMentions.reduce((acc, mention) => {
	return acc - mention.textContent.length - 1
	}, this.postLength)
	},
	toggleShowMore() {
	if (this.mightHideBecauseTall) {
	this.toggleShowingTall()
	} else if (this.mightHideBecauseSubject) {
	this.toggleExpandingSubject()
	}
	},
	generateTagLink(tag) {
	return `/tag/${tag}`
	},
	},
	}

	export default StatusBody
	diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
	index 7e92a02878..553eb58f01 100644
	--- a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
	+++ b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
	@@ -1,43 +1,43 @@
	import { mapState } from 'pinia'

	import Popover from 'src/components/popover/popover.vue'
	-import StillImage from 'src/components/still-image/still-image.vue'
	+

	import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'

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

	library.add(faChevronRight, faFolder)

	const StatusBookmarkFolderMenu = {
	props: ['status'],
	emits: ['success', 'error', 'close'],
	data() {
	return {}
	},
	components: {
	Popover,
	- StillImage,
	+
	},
	computed: {
	...mapState(useBookmarkFoldersStore, {
	folders: (store) => store.allFolders,
	}),
	folderId() {
	return this.status.bookmark_folder_id
	},
	},
	methods: {
	toggleFolder(id) {
	const value = id === this.folderId ? null : id

	this.$store
	.dispatch('bookmark', { id: this.status.id, bookmark_folder_id: value })
	.then(() => this.$emit('success'))
	.catch((err) => this.$emit('error', err.error.error))
	},
	},
	}

	export default StatusBookmarkFolderMenu
	diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
	index 0e0156c56c..066896da5a 100644
	--- a/src/components/status_content/status_content.js
	+++ b/src/components/status_content/status_content.js
	@@ -1,161 +1,160 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapGetters, mapState } from 'vuex'
	import { defineAsyncComponent } from 'vue'

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

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

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

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

	const 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 StatusContent = {
	name: 'StatusContent',
	props: [
	'status',
	'compact',
	'collapse',
	'focused',
	'noHeading',
	'fullContent',
	'singleLine',
	'controlledShowingTall',
	'controlledExpandingSubject',
	'controlledToggleShowingTall',
	'controlledToggleExpandingSubject',
	'controlledShowingLongSubject',
	'controlledToggleShowingLongSubject',
	],
	emits: ['parseReady', 'mediaplay', 'mediapause'],
	data() {
	return {
	uncontrolledShowingTall:
	this.fullContent \|\| (this.inConversation && this.focused),
	uncontrolledShowingLongSubject: false,
	// not as computed because it sets the initial state which will be changed later
	uncontrolledExpandingSubject:
	!useMergedConfigStore().mergedConfig.collapseMessageWithSubject,
	}
	},
	computed: {
	...controlledOrUncontrolledGetters([
	'showingTall',
	'expandingSubject',
	'showingLongSubject',
	]),
	statusCard() {
	if (!this.status.card) return null
	return this.status.card.url === this.status.quote_url
	? null
	: this.status.card
	},
	hideAttachments() {
	return (
	(this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation)
	)
	},
	nsfwClickthrough() {
	if (!this.status.nsfw) {
	return false
	}
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	return true
	},
	localCollapseSubjectDefault() {
	return this.mergedConfig.collapseMessageWithSubject
	},
	attachmentSize() {
	if (this.compact) {
	return 'small'
	} else if (
	(this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	(this.mergedConfig.hideAttachmentsInConv && this.inConversation) \|\|
	this.status.attachments.length > this.maxThumbnails
	) {
	return 'hide'
	}
	return 'normal'
	},
	maxThumbnails() {
	return this.mergedConfig.maxThumbnails
	},
	...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	...mapState({
	currentUser: (state) => state.users.currentUser,
	}),
	},
	components: {
	Attachment,
	Poll,
	- Gallery: defineAsyncComponent(
	- () => import( 'src/components/gallery/gallery.vue')
	- ),
	+ Gallery,
	LinkPreview,
	StatusBody,
	},
	methods: {
	toggleShowingTall() {
	controlledOrUncontrolledToggle(this, 'showingTall')
	},
	toggleExpandingSubject() {
	controlledOrUncontrolledToggle(this, 'expandingSubject')
	},
	toggleShowingLongSubject() {
	controlledOrUncontrolledToggle(this, 'showingLongSubject')
	},
	setMedia() {
	const attachments =
	this.attachmentSize === 'hide'
	? this.status.attachments
	: this.galleryAttachments
	return () => useMediaViewerStore().setMedia(attachments)
	},
	},
	}

	export default StatusContent
	diff --git a/src/components/status_history_modal/status_history_modal.js b/src/components/status_history_modal/status_history_modal.js
	index 2cf97d893a..516b523012 100644
	--- a/src/components/status_history_modal/status_history_modal.js
	+++ b/src/components/status_history_modal/status_history_modal.js
	@@ -1,65 +1,65 @@
	import { get } from 'lodash'

	import Modal from '../modal/modal.vue'
	-import Status from '../status/status.vue'
	+

	import { useStatusHistoryStore } from 'src/stores/statusHistory.js'

	const StatusHistoryModal = {
	components: {
	Modal,
	- Status,
	+
	},
	data() {
	return {
	statuses: [],
	}
	},
	computed: {
	modalActivated() {
	return useStatusHistoryStore().modalActivated
	},
	params() {
	return useStatusHistoryStore().params
	},
	statusId() {
	return this.params.id
	},
	historyCount() {
	return this.statuses.length
	},
	history() {
	return this.statuses
	},
	},
	watch: {
	params(newVal, oldVal) {
	const newStatusId = get(newVal, 'id') !== get(oldVal, 'id')
	if (newStatusId) {
	this.resetHistory()
	}

	if (
	newStatusId \|\|
	get(newVal, 'edited_at') !== get(oldVal, 'edited_at')
	) {
	this.fetchStatusHistory()
	}
	},
	},
	methods: {
	resetHistory() {
	this.statuses = []
	},
	fetchStatusHistory() {
	this.$store.dispatch('fetchStatusHistory', this.params).then((data) => {
	this.statuses = data
	})
	},
	closeModal() {
	useStatusHistoryStore().closeStatusHistoryModal()
	},
	},
	}

	export default StatusHistoryModal
	diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
	index 4c912a1393..0ea05c55ac 100644
	--- a/src/components/status_popover/status_popover.js
	+++ b/src/components/status_popover/status_popover.js
	@@ -1,51 +1,50 @@
	import { find } from 'lodash'

	import Popover from 'src/components/popover/popover.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)

	const StatusPopover = {
	name: 'StatusPopover',
	props: ['statusId'],
	data() {
	return {
	error: false,
	}
	},
	computed: {
	status() {
	return find(this.$store.state.statuses.allStatuses, { id: this.statusId })
	},
	},
	components: {
	- Status,
	Popover,
	},
	methods: {
	enter() {
	if (!this.status) {
	if (!this.statusId) {
	this.error = true
	return
	}
	this.$store
	.dispatch('fetchStatus', this.statusId)
	.then(() => (this.error = false))
	.catch(() => (this.error = true))
	}
	},
	},
	watch: {
	status(newStatus, oldStatus) {
	if (newStatus !== oldStatus) {
	this.$nextTick(() => this.$refs.popover.updateStyles())
	}
	},
	},
	}

	export default StatusPopover
	diff --git a/src/components/still-image/still-image-emoji-popover.js b/src/components/still-image/still-image-emoji-popover.js
	index 979a67b1e2..d81db14b6b 100644
	--- a/src/components/still-image/still-image-emoji-popover.js
	+++ b/src/components/still-image/still-image-emoji-popover.js
	@@ -1,74 +1,74 @@
	import Popover from 'components/popover/popover.vue'
	import SelectComponent from 'components/select/select.vue'
	import { mapState } from 'pinia'

	-import StillImage from './still-image.vue'
	+

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

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

	this.$refs.emojiPopover.hidePopover()
	this.packName = ''
	})
	},

	fetchEmojiPacksIfAdmin() {
	useEmojiStore()
	.getAdminPacksLocal()
	.then(() => {
	this.$refs.emojiPopover.updateStyles()
	})
	},
	},
	}
	diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
	index f5d5d17fe7..645adc39e3 100644
	--- a/src/components/thread_tree/thread_tree.js
	+++ b/src/components/thread_tree/thread_tree.js
	@@ -1,102 +1,102 @@
	-import Status from '../status/status.vue'
	+

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

	library.add(faAngleDoubleDown, faAngleDoubleRight)

	const ThreadTree = {
	components: {
	- Status,
	+
	},
	name: 'ThreadTree',
	props: {
	depth: Number,
	status: Object,
	inProfile: Boolean,
	conversation: Array,
	collapsable: Boolean,
	isExpanded: Boolean,
	pinnedStatusIdsObject: Object,
	profileUserId: String,

	isFocusedFunction: Function,
	highlight: String,
	getReplies: Function,
	setHighlight: Function,
	toggleExpanded: Function,

	simple: Boolean,
	// to control display of the whole thread forest
	toggleThreadDisplay: Function,
	threadDisplayStatus: Object,
	showThreadRecursively: Function,
	totalReplyCount: Object,
	totalReplyDepth: Object,
	statusContentProperties: Object,
	setStatusContentProperty: Function,
	toggleStatusContentProperty: Function,
	dive: Function,
	},
	computed: {
	suspendable() {
	const selfSuspendable = this.$refs.statusComponent
	? this.$refs.statusComponent.suspendable
	: true
	if (this.$refs.childComponent) {
	return (
	selfSuspendable &&
	this.$refs.childComponent.every((s) => s.suspendable)
	)
	}
	return selfSuspendable
	},
	reverseLookupTable() {
	return this.conversation.reduce(
	(table, status, index) => {
	table[status.id] = index
	return table
	},
	{
	/* no-op */
	},
	)
	},
	currentReplies() {
	return this.getReplies(this.status.id).map(({ id }) =>
	this.statusById(id),
	)
	},
	threadShowing() {
	return this.threadDisplayStatus[this.status.id] === 'showing'
	},
	currentProp() {
	return this.statusContentProperties[this.status.id]
	},
	},
	methods: {
	statusById(id) {
	return this.conversation[this.reverseLookupTable[id]]
	},
	collapseThread() {
	/* no-op */
	},
	showThread() {
	/* no-op */
	},
	showAllSubthreads() {
	/* no-op */
	},
	toggleCurrentProp(name) {
	this.toggleStatusContentProperty(this.status.id, name)
	},
	setCurrentProp(name) {
	this.setStatusContentProperty(this.status.id, name)
	},
	},
	}

	export default ThreadTree
	diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
	index e2bcfcf7e5..bb566e1289 100644
	--- a/src/components/timeline/timeline.js
	+++ b/src/components/timeline/timeline.js
	@@ -1,344 +1,344 @@
	import { debounce, keyBy, throttle } from 'lodash'
	import { mapState } from 'pinia'

	import Conversation from '../conversation/conversation.vue'
	import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
	import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
	import ScrollTopButton from '../scroll_top_button/scroll_top_button.vue'
	-import Status from '../status/status.vue'
	+
	import TimelineMenu from '../timeline_menu/timeline_menu.vue'

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

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

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

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

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

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

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

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

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

	if (statuses.length === 0) return

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

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

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

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

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

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

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

	export default Timeline
	diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
	index d484303c13..46c9983109 100644
	--- a/src/components/user_avatar/user_avatar.js
	+++ b/src/components/user_avatar/user_avatar.js
	@@ -1,57 +1,57 @@
	-import StillImage from '../still-image/still-image.vue'
	+

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

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

	library.add(faRobot, faPeopleGroup)

	const UserAvatar = {
	props: {
	// User object to show avatar of
	user: {
	required: true,
	type: Object,
	},
	// Use less space and use alternative roundness
	compact: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Show small icon indicating if account is a bot or group
	showActorTypeIndicator: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Override avatar image URL, useful for profile editing
	url: {
	required: false,
	type: String,
	default: null,
	},
	},
	data() {
	return {
	showPlaceholder: false,
	defaultAvatar: `${useInstanceStore().server + useInstanceStore().instanceIdentity.defaultAvatar}`,
	betterShadow: useInterfaceStore().browserSupport.cssFilter,
	}
	},
	components: {
	- StillImage,
	+
	},
	methods: {
	imgSrc(src) {
	return !src \|\| this.showPlaceholder ? this.defaultAvatar : src
	},
	imageLoadError() {
	this.showPlaceholder = true
	},
	},
	}

	export default UserAvatar
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index bacb5f609d..0906b44257 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,610 +1,610 @@
	import {
	isEqual,
	escape as ldEscape,
	unescape as ldUnescape,
	merge,
	} from 'lodash'
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import AccountActions from 'src/components/account_actions/account_actions.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
	import suggestor from 'src/components/emoji_input/suggestor.js'
	-import RichContent from 'src/components/rich_content/rich_content.jsx'
	+
	import FollowButton from '../follow_button/follow_button.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 ColorInput from 'src/components/color_input/color_input.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: defineAsyncComponent(
	() => import( 'src/components/dialog_modal/dialog_modal.vue'),
	),
	UserAvatar,
	Checkbox,
	RemoteFollow,
	ModerationTools: defineAsyncComponent(
	() => import( 'src/components/moderation_tools/moderation_tools.vue'),
	),
	AccountActions,
	ProgressButton,
	FollowButton,
	Select,
	- RichContent,
	+
	UserLink,
	UserNote,
	UserTimedFilterModal: defineAsyncComponent(
	() => import( 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'),
	),
	ColorInput,
	EmojiInput,
	ImageCropper: defineAsyncComponent(
	() => import( 'src/components/image_cropper/image_cropper.vue'),
	),
	},
	data() {
	const user = this.$store.getters.findUser(this.userId)

	return {
	followRequestInProgress: false,

	// Editable stuff
	editImage: false,

	newName: user.name_unescaped,
	editingName: false,

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

	newAvatar: null,
	newAvatarFile: null,

	newBanner: null,
	newBannerFile: null,

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

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

	editingFields: false,
	}
	},
	created() {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	escapedNewBio() {
	return ldEscape(this.newBio).replace(/\n/g, '<br>')
	},
	somethingToSave() {
	if (this.newName !== this.user.name_unescaped) return true
	if (this.newBio !== ldUnescape(this.user.description)) return true
	if (this.newAvatar !== null) return true
	if (this.newBanner !== null) return true
	if (this.newActorType !== this.user.actor_type) return true
	if (this.newBirthday !== this.user.birthday) return true
	if (this.newShowBirthday !== this.user.show_birthday) return true
	if (this.newShowRole !== this.user.show_role) return true
	if (
	!isEqual(
	this.newFields,
	this.user.fields?.map((field) => ({
	name: field.name,
	value: field.value,
	})),
	)
	)
	return true
	return false
	},
	groupActorAvailable() {
	return useInstanceCapabilitiesStore().groupActorAvailable
	},
	availableActorTypes() {
	return this.groupActorAvailable
	? ['Person', 'Service', 'Group']
	: ['Person', 'Service']
	},
	user() {
	return this.$store.getters.findUser(this.userId)
	},
	role() {
	return this.user.role
	},
	relationship() {
	return this.$store.getters.relationship(this.userId)
	},
	isOtherUser() {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl() {
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn() {
	return this.$store.state.users.currentUser
	},
	dailyAvg() {
	const days = Math.ceil(
	(new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000),
	)
	return Math.round(this.user.statuses_count / days)
	},
	emoji() {
	return useEmojiStore().customEmoji.map((e) => ({
	shortcode: e.displayText,
	static_url: e.imageUrl,
	url: e.imageUrl,
	}))
	},
	userHighlightType: {
	get() {
	return useUserHighlightStore().get(this.user.screen_name).type
	},
	set(type) {
	if (type !== 'disabled') {
	useUserHighlightStore().setAndSave({
	user: this.user.screen_name,
	value: { type },
	})
	} else {
	useUserHighlightStore().unsetAndSave({ user: this.user.screen_name })
	}
	},
	},
	userHighlightColor: {
	get() {
	return useUserHighlightStore().get(this.user.screen_name).color
	},
	set(color) {
	useUserHighlightStore().setAndSave({
	user: this.user.screen_name,
	value: { color },
	})
	},
	},
	visibleRole() {
	if (!this.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_card/user_card.vue b/src/components/user_card/user_card.vue
	index 4d77d92d0f..3eb142954a 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,744 +1,745 @@
	<template>
	<div class="user-card">
	<div class="user-card-inner">
	<div class="user-info">
	<div
	class="user-identity"
	:class="{ '-compact': compact }"
	>
	<div class="header-overlay">
	<div class="banner-image">
	<img
	:src="bannerImgSrc"
	:class="{ 'hide-bio': hideBio }"
	>
	</div>
	<div
	class="banner-overlay"
	:class="{ 'hide-bio': hideBio }"
	/>
	</div>
	<a
	v-if="avatarAction === 'zoom'"
	class="user-info-avatar -link"
	@click="zoomAvatar"
	>
	<UserAvatar :user="user" />
	<div class="user-info-avatar -link -overlay">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="search-plus"
	/>
	</div>
	</a>
	<button
	v-else-if="editable"
	class="user-info-avatar button-unstyled -link"
	:class="{ '-editable': editable }"
	@click="changeAvatar"
	>
	<UserAvatar
	:user="user"
	:url="avatarImgSrc"
	/>
	<div class="user-info-avatar -link -overlay">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="pencil"
	/>
	</div>
	</button>
	<UserAvatar
	v-else-if="typeof avatarAction === 'function'"
	class="user-info-avatar"
	:user="user"
	@click="avatarAction"
	/>
	<router-link
	v-else
	class="user-info-avatar"
	:to="userProfileLink(user)"
	>
	<UserAvatar :user="user" />
	</router-link>
	<div class="user-summary">
	<div class="top-line">
	<div
	class="other-actions"
	>
	<button
	v-if="editable"
	:disabled="newName && newName.length === 0"
	class="btn button-unstyled edit-banner-button"
	@click="changeBanner"
	>
	{{ $t('settings.change_banner') }}
	<FAIcon
	fixed-width
	class="icon"
	icon="pencil"
	:title="$t('settings.change_banner')"
	/>
	</button>
	<button
	v-else-if="!editable && !isOtherUser && user.is_local"
	class="button-unstyled edit-profile-button"
	@click.stop="openProfileTab"
	>
	<FAIcon
	fixed-width
	class="icon"
	icon="edit"
	:title="$t('user_card.edit_profile')"
	/>
	</button>
	<a
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	class="button-unstyled external-link-button"
	>
	<FAIcon
	class="icon"
	icon="external-link-alt"
	/>
	</a>
	<AccountActions
	v-if="isOtherUser && loggedIn"
	:user="user"
	:relationship="relationship"
	/>
	<router-link
	v-if="showExpand"
	:to="userProfileLink(user)"
	class="button-unstyled external-link-button"
	@click="$emit('close')"
	>
	<FAIcon
	class="icon"
	icon="expand-alt"
	/>
	</router-link>
	<button
	v-if="showClose"
	class="button-unstyled external-link-button"
	@click="$emit('close')"
	>
	<FAIcon
	class="icon"
	icon="times"
	/>
	</button>
	</div>
	<div class="name-wrapper">
	<router-link
	v-if="!editable \|\| !editingName"
	:to="userProfileLink(user)"
	class="user-name"
	>
	<RichContent
	:title="editable ? newName : user.name_unescaped"
	:html="editable ? newName : user.name_unescaped"
	:emoji="editable ? emoji : user.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	/>
	</router-link>
	<EmojiInput
	v-else-if="editingName"
	v-model="newName"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	>
	<template #default="inputProps">
	<input
	id="username"
	v-model="newName"
	class="input name-changer"
	v-bind="propsToNative(inputProps)"
	>
	</template>
	</EmojiInput>
	<button
	v-if="editable"
	class="button-unstyled edit-button"
	:title="$t('settings.toggle_edit')"
	@click="editingName = !editingName"
	>
	<FAIcon
	class="icon"
	icon="pencil"
	/>
	</button>
	</div>
	</div>
	<div class="bottom-line">
	<UserLink
	class="user-screen-name"
	:user="user"
	/>
	<span
	v-if="user.locked"
	class="lock-icon"
	>
	<FAIcon
	icon="lock"
	size="sm"
	/>
	</span>
	<span
	v-if="relationship.followed_by && loggedIn && isOtherUser"
	class="alert neutral user-role"
	>
	{{ $t('user_card.follows_you') }}
	</span>
	<template v-if="!hideBio">
	<span
	v-if="user.deactivated"
	class="alert neutral user-role"
	>
	{{ $t('user_card.deactivated') }}
	</span>
	<span
	v-if="!!visibleRole"
	class="alert neutral user-role"
	>
	{{ $t(`general.role.${visibleRole}`) }}
	</span>
	<span
	v-if="user.actor_type === 'Service'"
	class="alert neutral user-role"
	>
	{{ $t('user_card.bot') }}
	</span>
	<span
	v-if="user.actor_type === 'Group'"
	class="alert neutral user-role"
	>
	{{ $t('user_card.group') }}
	</span>
	<span
	v-for="tag in user.tags"
	:key="tag"
	class="alert warning user-role"
	>
	{{ isKnownTag ? $t('user_card.tags.' + tag) : tag }}
	</span>
	</template>
	</div>
	</div>
	</div>
	<div
	v-if="loggedIn && isOtherUser"
	class="user-interactions"
	>
	<div class="btn-group">
	<FollowButton
	:relationship="relationship"
	:user="user"
	/>
	<template v-if="relationship.following">
	<ProgressButton
	v-if="!relationship.notifying"
	class="btn button-default"
	:click="subscribeUser"
	:title="$t('user_card.subscribe')"
	>
	<FAIcon icon="bell" />
	</ProgressButton>
	<ProgressButton
	v-else
	class="btn button-default toggled"
	:click="unsubscribeUser"
	:title="$t('user_card.unsubscribe')"
	>
	<FALayers>
	<FAIcon
	icon="rss"
	transform="left-5 shrink-6 up-3 rotate-20"
	flip="horizontal"
	/>
	<FAIcon
	icon="rss"
	transform="right-5 shrink-6 up-3 rotate-20"
	/>
	<FAIcon icon="bell" />
	</FALayers>
	</ProgressButton>
	</template>
	</div>
	<button
	v-if="relationship.muting"
	class="btn button-default btn-mute toggled"
	:disabled="user.deactivated"
	@click="unmuteUser"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn button-default btn-mute"
	:disabled="user.deactivated"
	@click="muteUser"
	>
	{{ $t('user_card.mute') }}
	</button>
	<button
	class="btn button-default btn-mention"
	:disabled="user.deactivated"
	@click="mentionUser"
	>
	{{ $t('user_card.mention') }}
	</button>
	<ModerationTools
	v-if="showModerationMenu"
	class="moderation-menu"
	:user="user"
	/>
	</div>
	<div
	v-if="!loggedIn && user.is_local"
	class="user-interactions"
	>
	<RemoteFollow :user="user" />
	</div>
	</div>
	</div>
	<div
	v-if="!editable && loggedIn && isOtherUser && (hasNote \|\| !hideBio) && !hideRemarks"
	class="personal-marks"
	>
	<UserNote
	v-if="hasNote \|\| (hasNoteEditor && supportsNote)"
	:user="user"
	:relationship="relationship"
	:editable="hasNoteEditor"
	/>
	<div
	v-if="!hideBio"
	class="highlighter"
	>
	<h4>{{ $t('user_card.highlight_header') }}</h4>
	<Select
	:id="'userHighlightSel'+user.id"
	v-model="userHighlightType"
	class="userHighlightSel unstyled"
	:class="{ '-none': userHighlightType === 'disabled' }"
	>
	<option value="disabled">
	{{ $t('user_card.highlight_new.disabled') }}
	</option>
	<option value="solid">
	{{ $t('user_card.highlight_new.solid') }}
	</option>
	<option value="striped">
	{{ $t('user_card.highlight_new.striped') }}
	</option>
	<option value="side">
	{{ $t('user_card.highlight_new.side') }}
	</option>
	</Select>
	<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
	<ColorInput
	v-if="userHighlightType !== 'disabled'"
	v-model="userHighlightColor"
	class="highlighter-color"
	:show-optional-checkbox="false"
	name="'userHighlightColorTx'+user.id"
	:unstyled="true"
	/>
	</div>
	</div>
	<h3 v-if="editable">
	<span>
	{{ $t('settings.bio') }}
	</span>
	{{ ' ' }}
	<button
	class="button-default"
	@click="editingBio = !editingBio"
	>
	{{ $t('settings.toggle_edit') }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="pencil"
	/>
	</button>
	</h3>
	<template v-if="!editable \|\| !editingBio">
	<RichContent
	v-if="!hideBio"
	class="user-card-bio"
	:class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
	:html="editable ? escapedNewBio : user.description_html"
	:emoji="editable ? emoji : user.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	:handle-links="true"
	/>
	</template>
	<template v-else-if="editingBio">
	<EmojiInput
	v-model="newBio"
	enable-emoji-picker
	class="user-card-bio"
	:class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
	:suggest="emojiUserSuggestor"
	>
	<template #default="inputProps">
	<textarea
	v-model="newBio"
	class="input bio resize-height"
	v-bind="propsToNative(inputProps)"
	:rows="newBio.split(/\n/g).length"
	/>
	</template>
	</EmojiInput>
	</template>
	<h3 v-if="editable">
	<span>
	{{ $t('settings.profile_fields.label') }}
	</span>
	{{ ' ' }}
	<button
	class="button-default"
	@click="editingFields = !editingFields"
	>
	{{ $t('settings.toggle_edit') }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="pencil"
	/>
	</button>
	</h3>
	<template v-if="!editable \|\| !editingFields">
	<div
	v-if="!hideBio && user.fields_html && user.fields_html.length > 0"
	class="user-profile-fields"
	>
	<dl
	v-for="(field, index) in (editable ? newFields : user.fields_html)"
	:key="index"
	class="user-profile-field"
	>
	<dt
	:title="field.name"
	class="user-profile-field-name"
	>
	<RichContent
	:html="field.name"
	:emoji="editable ? emoji : user.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	/>
	</dt>
	<dd
	:title="field.value"
	class="user-profile-field-value"
	>
	<RichContent
	:html="field.value"
	:emoji="editable ? emoji : user.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	/>
	</dd>
	</dl>
	</div>
	</template>
	<template v-else-if="editingFields">
	<div
	v-if="maxFields > 0"
	class="user-profile-fields"
	>
	<dl
	v-for="(_, i) in newFields"
	:key="i"
	class="user-profile-field"
	>
	<dt
	class="user-profile-field-name -edit"
	>
	<EmojiInput
	v-model="newFields[i].name"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	>
	<template #default="inputProps">
	<input
	v-model="newFields[i].name"
	:placeholder="$t('settings.profile_fields.name')"
	v-bind="propsToNative(inputProps)"
	class="input"
	>
	</template>
	</EmojiInput>
	</dt>
	<dd
	class="user-profile-field-value -edit"
	>
	<EmojiInput
	v-model="newFields[i].value"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	>
	<template #default="inputProps">
	<input
	v-model="newFields[i].value"
	:placeholder="$t('settings.profile_fields.value')"
	v-bind="propsToNative(inputProps)"
	class="input input"
	>
	</template>
	</EmojiInput>
	<button
	class="delete-field button-default -hover-highlight"
	@click="deleteField(i)"
	>
	<!-- TODO something is wrong with v-show here -->
	<FAIcon
	v-if="newFields.length > 1"
	icon="times"
	/>
	</button>
	</dd>
	</dl>
	<button
	v-if="newFields.length < maxFields"
	class="user-profile-field-add add-field button-default -hover-highlight"
	@click="addField"
	>
	<FAIcon
	icon="plus"
	class="icon"
	/>
	<span class="label">
	{{ $t("settings.profile_fields.add_field") }}
	</span>
	</button>
	</div>
	</template>
	<div
	v-if="!hideBio"
	class="user-extras"
	>
	<span
	v-if="!editable && !hideUserStats"
	class="user-stats"
	>
	<dl
	v-if="!hideUserStats && !hideBio"
	class="user-count"
	>
	<dd>{{ user.statuses_count }}</dd>
	{{ ' ' }}
	<dt>{{ $t('user_card.statuses') }}</dt>
	</dl>
	<dl class="user-count">
	<dd>{{ dailyAvg }}</dd>
	{{ ' ' }}
	<dt>{{ $t('user_card.statuses_per_day') }}</dt>
	</dl>
	<dl class="user-count">
	<dd>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</dd>
	{{ ' ' }}
	<dt>{{ $t('user_card.followees') }}</dt>
	</dl>
	<dl class="user-count">
	<dd>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</dd>
	{{ ' ' }}
	<dt>{{ $t('user_card.followers') }}</dt>
	</dl>
	</span>
	<span
	v-if="!hideUserStats"
	class="user-stats"
	>
	<template v-if="!hideBio">
	<dl
	v-if="user.birthday && !editable"
	class="user-count"
	>
	<dd>
	<FAIcon
	class="fa-old-padding"
	icon="birthday-cake"
	/>
	</dd>
	{{ ' ' }}
	<dt>
	{{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
	</dt>
	</dl>
	<div
	v-else-if="editable"
	class="birthday"
	>
	<div>
	<Checkbox v-model="newShowBirthday">
	{{ $t('settings.birthday.show_birthday') }}
	</Checkbox>
	</div>
	<FAIcon
	class="fa-old-padding"
	icon="birthday-cake"
	/>
	{{ $t('settings.birthday.label') }}
	<input
	id="birthday"
	v-model="newBirthday"
	type="date"
	class="input birthday-input"
	>
	</div>
	</template>
	<dl
	v-if="!editable"
	class="user-count"
	>
	<dd>
	{{ $t('user_card.joined') }}
	</dd>
	{{ ' ' }}
	<dt>
	{{ formattedJoinDate }}
	</dt>
	</dl>
	</span>
	</div>
	<template v-if="editable">
	<h3>{{ $t('settings.profile_other') }}</h3>
	<p
	v-if="role === 'admin' \|\| role === 'moderator'"
	class="user-card-setting"
	>
	<Checkbox v-model="newShowRole">
	<template v-if="role === 'admin'">
	{{ $t('settings.show_admin_badge') }}
	</template>
	<template v-if="role === 'moderator'">
	{{ $t('settings.show_moderator_badge') }}
	</template>
	</Checkbox>
	</p>
	<p class="user-card-setting">
	<label>
	{{ $t('settings.actor_type') }}
	<Select v-model="newActorType">
	<option
	v-for="option in availableActorTypes"
	:key="option"
	:value="option"
	>
	{{ $t('settings.actor_type_' + (option === 'Person' ? 'person_proper' : option)) }}
	</option>
	</Select>
	<div v-if="groupActorAvailable">
	<small>
	{{ $t('settings.actor_type_description') }}
	</small>
	</div>
	</label>
	</p>
	<div class="bottom-buttons">
	<button
	v-if="editable"
	:disabled="!somethingToSave"
	class="btn button-default reset-profile-button"
	@click="resetState"
	>
	{{ $t('settings.reset') }}
	<FAIcon
	fixed-width
	class="icon"
	icon="clock-rotate-left"
	:title="$t('user_card.edit_profile')"
	/>
	</button>
	<button
	v-if="editable"
	:disabled="!somethingToSave"
	class="btn button-default save-profile-button"
	@click="updateProfile"
	>
	{{ $t('settings.save') }}
	<FAIcon
	fixed-width
	class="icon"
	icon="save"
	:title="$t('user_card.edit_profile')"
	/>
	</button>
	</div>
	</template>
	<teleport to="#modal">
	<UserTimedFilterModal
	+ v-if="isOtherUser"
	ref="timedMuteDialog"
	:user="user"
	:is-mute="true"
	/>
	</teleport>
	<teleport to="#modal">
	<DialogModal
	v-if="editImage"
	class="edit-image"
	>
	<template #header>
	{{ editImage === 'avatar' ? $t('settings.change_avatar') : $t('settings.change_banner') }}
	</template>
	<p>
	{{ editImage === 'avatar' ? $t('settings.avatar_size_instruction') : $t('settings.banner_size_instruction' ) }}
	</p>
	<div
	class="image-container"
	:class="{ '-banner': editImage === 'banner' }"
	>
	<image-cropper
	ref="cropper"
	class="cropper"
	:aspect-ratio="editImage === 'avatar' ? 1 : 3"
	@submit="submitImage"
	/>
	</div>
	<button
	id="pick-image"
	class="button-default btn"
	type="button"
	@click="() => $refs.cropper.pickImage()"
	>
	{{ $t('settings.select_picture') }}
	</button>
	<template #footer>
	<button
	class="button-default btn"
	type="button"
	@click="editImage = false"
	>
	{{ $t('image_cropper.cancel') }}
	</button>
	<button
	:title="editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner')"
	class="button-default btn reset-button"
	@click="resetImage"
	>
	{{ editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner' ) }}
	</button>
	<button
	class="button-default btn"
	type="button"
	@click="$refs.cropper.submit(false)"
	>
	{{ $t('image_cropper.save_without_cropping') }}
	</button>
	<button
	class="button-default btn"
	type="button"
	@click="$refs.cropper.submit(true)"
	>
	{{ $t('image_cropper.save') }}
	</button>
	</template>
	</DialogModal>
	</teleport>
	</div>
	</template>

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

	<style lang="scss" src="./user_card.scss" />
	diff --git a/src/components/user_list_popover/user_list_popover.js b/src/components/user_list_popover/user_list_popover.js
	index 319657e0ef..c9ca5e0a18 100644
	--- a/src/components/user_list_popover/user_list_popover.js
	+++ b/src/components/user_list_popover/user_list_popover.js
	@@ -1,46 +1,44 @@
	import { defineAsyncComponent } from 'vue'

	-import Popover from 'src/components/popover/popover.vue'
	-import RichContent from 'src/components/rich_content/rich_content.jsx'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	+import Popover from 'src/components/popover/popover.vue'
	import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'

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

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

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

	library.add(faCircleNotch)

	const UserListPopover = {
	name: 'UserListPopover',
	props: ['users'],
	components: {
	- RichContent,
	UnicodeDomainIndicator,
	Popover,
	UserAvatar,
	},
	computed: {
	usersCapped() {
	return this.users.slice(0, 16)
	},
	allowNonSquareEmoji() {
	return useMergedConfigStore().mergedConfig.nonSquareEmoji
	},
	},
	methods: {
	generateProfileLink(user) {
	return generateProfileLink(
	user.id,
	user.screen_name,
	useInstanceStore().restrictedNicknames,
	)
	},
	},
	}

	export default UserListPopover
	diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js
	index 2a77151a29..de354d676b 100644
	--- a/src/components/user_popover/user_popover.js
	+++ b/src/components/user_popover/user_popover.js
	@@ -1,24 +1,23 @@
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import Popover from 'src/components/popover/popover.vue'
	+import UserCard from 'src/components/user_card/user_card.vue'

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

	const UserPopover = {
	name: 'UserPopover',
	props: ['userId', 'overlayCenters', 'disabled', 'overlayCentersSelector'],
	components: {
	- UserCard: defineAsyncComponent(
	- () => import('src/components/user_card/user_card.vue'),
	- ),
	+ UserCard,
	Popover,
	},
	computed: mapState(useMergedConfigStore, {
	userPopoverAvatarAction: (state) =>
	state.mergedConfig.userPopoverAvatarAction,
	userPopoverOverlay: (state) => state.mergedConfig.userPopoverOverlay,
	}),
	}

	export default UserPopover
	diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
	index 8d24feeee2..461dbc037c 100644
	--- a/src/components/user_profile/user_profile.js
	+++ b/src/components/user_profile/user_profile.js
	@@ -1,210 +1,210 @@
	import { get } from 'lodash'
	import { mapState } from 'pinia'

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

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

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

	library.add(faCircleNotch)

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

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

	const defaultTabKey = 'statuses'

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

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

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

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

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

	export default UserProfile
	diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
	index 896167df0a..66cdb108f0 100644
	--- a/src/components/user_reporting_modal/user_reporting_modal.js
	+++ b/src/components/user_reporting_modal/user_reporting_modal.js
	@@ -1,129 +1,129 @@
	import Checkbox from '../checkbox/checkbox.vue'
	import List from '../list/list.vue'
	import Modal from '../modal/modal.vue'
	-import Status from '../status/status.vue'
	+
	import UserLink from '../user_link/user_link.vue'

	import { useReportsStore } from 'src/stores/reports.js'

	const UserReportingModal = {
	components: {
	- Status,
	+
	List,
	Checkbox,
	Modal,
	UserLink,
	},
	data() {
	return {
	comment: '',
	forward: false,
	statusIdsToReport: [],
	processing: false,
	error: false,
	}
	},
	computed: {
	reportModal() {
	return useReportsStore().reportModal
	},
	isLoggedIn() {
	return !!this.$store.state.users.currentUser
	},
	isOpen() {
	return this.isLoggedIn && this.reportModal.activated
	},
	userId() {
	return this.reportModal.userId
	},
	user() {
	return this.$store.getters.findUser(this.userId)
	},
	remoteInstance() {
	return (
	!this.user.is_local &&
	this.user.screen_name.substr(this.user.screen_name.indexOf('@') + 1)
	)
	},
	statuses() {
	return this.reportModal.statuses
	},
	preTickedIds() {
	return this.reportModal.preTickedIds
	},
	},
	watch: {
	userId: 'resetState',
	preTickedIds(newValue) {
	this.statusIdsToReport = newValue
	},
	},
	methods: {
	resetState() {
	// Reset state
	this.comment = ''
	this.forward = false
	this.statusIdsToReport = this.preTickedIds
	this.processing = false
	this.error = false
	},
	closeModal() {
	useReportsStore().closeUserReportingModal()
	},
	reportUser() {
	this.processing = true
	this.error = false
	const params = {
	userId: this.userId,
	comment: this.comment,
	forward: this.forward,
	statusIds: this.statusIdsToReport,
	}
	this.$store.state.api.backendInteractor
	.reportUser({ ...params })
	.then(() => {
	this.processing = false
	this.resetState()
	this.closeModal()
	})
	.catch(() => {
	this.processing = false
	this.error = true
	})
	},
	clearError() {
	this.error = false
	},
	isChecked(statusId) {
	return this.statusIdsToReport.indexOf(statusId) !== -1
	},
	toggleStatus(checked, statusId) {
	if (checked === this.isChecked(statusId)) {
	return
	}

	if (checked) {
	this.statusIdsToReport.push(statusId)
	} else {
	this.statusIdsToReport.splice(
	this.statusIdsToReport.indexOf(statusId),
	1,
	)
	}
	},
	resize(e) {
	const target = e.target \|\| e
	if (!(target instanceof window.Element)) {
	return
	}
	// Auto is needed to make textbox shrink when removing lines
	target.style.height = 'auto'
	target.style.height = `${target.scrollHeight}px`
	if (target.value === '') {
	target.style.height = null
	}
	},
	},
	}

	export default UserReportingModal
	diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
	index fdf6c7f8f4..16f410fc80 100644
	--- a/test/unit/specs/components/rich_content.spec.js
	+++ b/test/unit/specs/components/rich_content.spec.js
	@@ -1,547 +1,547 @@
	import { mount, shallowMount } from '@vue/test-utils'

	-import RichContent from 'src/components/rich_content/rich_content.jsx'
	+

	const attentions = []
	const global = {
	mocks: {
	$store: {
	state: {},
	getters: {
	mergedConfig: () => ({
	mentionLinkShowTooltip: true,
	}),
	findUserByUrl: () => null,
	},
	},
	},
	stubs: {
	FAIcon: true,
	},
	}

	const makeMention = (who, noClass) => {
	attentions.push({ statusnet_profile_url: `https://fake.tld/@${who}` })
	return noClass
	? `<span><a href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
	: `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
	}
	const p = (...data) => `<p>${data.join('')}</p>`
	const compwrap = (...data) =>
	`<span class="RichContent">${data.join('')}</span>`
	const mentionsLine = (times) =>
	[
	'<mentions-line-stub mentions="',
	new Array(times).fill('[object Object]').join(','),
	'"></mentions-line-stub>',
	].join('')

	describe('RichContent', () => {
	it('renders simple post without exploding', () => {
	const html = p('Hello world!')
	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(html))
	})

	it('unescapes everything as needed', () => {
	const html = [p('Testing 'em all'), 'Testing 'em all'].join('')
	const expected = [p("Testing 'em all"), "Testing 'em all"].join('')
	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
	})

	it('replaces mention with mentionsline', () => {
	const html = p(makeMention('John'), ' how are you doing today?')
	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(
	compwrap(p(mentionsLine(1), ' how are you doing today?')),
	)
	})

	it('replaces mentions at the end of the hellpost', () => {
	const html = [
	p('How are you doing today, fine gentlemen?'),
	p(makeMention('John'), makeMention('Josh'), makeMention('Jeremy')),
	].join('')
	const expected = [
	p('How are you doing today, fine gentlemen?'),
	// TODO fix this extra line somehow?
	p(
	'<mentions-line-stub mentions="',
	'[object Object],',
	'[object Object],',
	'[object Object]',
	'"></mentions-line-stub>',
	),
	].join('')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
	})

	it('Does not touch links if link handling is disabled', () => {
	const html = [
	[makeMention('Jack'), "let's meet up with ", makeMention('Janet')].join(
	'',
	),
	[makeMention('John'), makeMention('Josh'), makeMention('Jeremy')].join(
	'',
	),
	].join('\n')
	const strippedHtml = [
	[
	makeMention('Jack', true),
	"let's meet up with ",
	makeMention('Janet', true),
	].join(''),
	[
	makeMention('John', true),
	makeMention('Josh', true),
	makeMention('Jeremy', true),
	].join(''),
	].join('\n')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html()).to.eql(compwrap(strippedHtml))
	})

	it('Adds greentext and cyantext to the post', () => {
	const html = ['>preordering videogames', '>any year'].join('\n')
	const expected = [
	'<span class="greentext">>preordering videogames</span>',
	'<span class="greentext">>any year</span>',
	].join('\n')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html()).to.eql(compwrap(expected))
	})

	it('Does not add greentext and cyantext if setting is set to false', () => {
	const html = ['>preordering videogames', '>any year'].join('\n')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: false,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html()).to.eql(compwrap(html))
	})

	it('Adds emoji to post', () => {
	const html = p('Ebin :DDDD :spurdo:')
	const expected = p(
	'Ebin :DDDD ',
	'<anonymous-stub shortcode="spurdo" islocal="true" class="emoji img" src="about:blank" title=":spurdo:" alt=":spurdo:"></anonymous-stub>',
	)

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: false,
	emoji: [{ url: 'about:blank', shortcode: 'spurdo' }],
	html,
	},
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
	})

	it("Doesn't add nonexistent emoji to post", () => {
	const html = p('Lol :lol:')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: false,
	greentext: false,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(html))
	})

	it('Greentext + last mentions', () => {
	const html = [
	'>quote',
	makeMention('lol'),
	'>quote',
	'>quote',
	].join('\n')
	const expected = [
	'<span class="greentext">>quote</span>',
	mentionsLine(1),
	'<span class="greentext">>quote</span>',
	'<span class="greentext">>quote</span>',
	].join('\n')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html()).to.eql(compwrap(expected))
	})

	it('One buggy example', () => {
	const html = [
	'Bruh',
	'Bruh',
	[makeMention('foo'), makeMention('bar'), makeMention('baz')].join(''),
	'Bruh',
	].join('<br>')
	const expected = ['Bruh', 'Bruh', mentionsLine(3), 'Bruh'].join('<br>')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
	})

	it('buggy example/hashtags', () => {
	const html = [
	'<p>',
	'<a href="http://macrochan.org/images/N/H/NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg">',
	'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg</a>',
	' <a class="hashtag" data-tag="nou" href="https://shitposter.club/tag/nou">',
	'#nou</a>',
	' <a class="hashtag" data-tag="screencap" href="https://shitposter.club/tag/screencap">',
	'#screencap</a>',
	' </p>',
	].join('')
	const expected = [
	'<p>',
	'<a href="http://macrochan.org/images/N/H/NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg" target="_blank">',
	'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg</a>',
	' <hashtag-link-stub url="https://shitposter.club/tag/nou" content="#nou" tag="nou">',
	'</hashtag-link-stub>',
	' <hashtag-link-stub url="https://shitposter.club/tag/screencap" content="#screencap" tag="screencap">',
	'</hashtag-link-stub>',
	' </p>',
	].join('')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
	})

	it('rich contents of a mention are handled properly', () => {
	attentions.push({ statusnet_profile_url: 'lol' })
	const html = [
	p(
	'<a href="lol" class="mention">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	),
	p('Testing'),
	].join('')
	const expected = [
	p(
	'<span class="MentionsLine">',
	'<span class="MentionLink mention-link">',
	'<a href="lol" class="original" target="_blank">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	'</span>',
	'</span>',
	),
	p('Testing'),
	].join('')

	const wrapper = mount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(
	wrapper
	.html()
	.replace(/\n/g, '')
	.replace(/<!--.*?-->/g, ''),
	).to.eql(compwrap(expected))
	})

	it('rich contents of nested mentions are handled properly', () => {
	attentions.push({ statusnet_profile_url: 'lol' })
	const html = [
	'<span class="poast-style">',
	'<a href="lol" class="mention">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	' ',
	'<a href="lol" class="mention">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	' ',
	'</span>',
	'Testing',
	].join('')
	const expected = [
	'<span>',
	'<span class="MentionsLine">',
	'<span class="MentionLink mention-link">',
	'<a href="lol" class="original" target="_blank">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	'</span>',
	'<span class="MentionLink mention-link">',
	'<a href="lol" class="original" target="_blank">',
	'<span>',
	'https://</span>',
	'<span>',
	'lol.tld/</span>',
	'<span>',
	'</span>',
	'</a>',
	'</span>',
	'</span>',
	' ',
	'</span>',
	'Testing',
	].join('')

	const wrapper = mount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(
	wrapper
	.html()
	.replace(/\n/g, '')
	.replace(/<!--.*?-->/g, ''),
	).to.eql(compwrap(expected))
	})

	it('rich contents of a link are handled properly', () => {
	const html = [
	'<p>',
	'Freenode is dead.</p>',
	'<p>',
	'<a href="https://isfreenodedeadyet.com/">',
	'<span>',
	'https://</span>',
	'<span>',
	'isfreenodedeadyet.com/</span>',
	'<span>',
	'</span>',
	'</a>',
	'</p>',
	].join('')
	const expected = [
	'<p>',
	'Freenode is dead.</p>',
	'<p>',
	'<a href="https://isfreenodedeadyet.com/" target="_blank">',
	'<span>',
	'https://</span>',
	'<span>',
	'isfreenodedeadyet.com/</span>',
	'<span>',
	'</span>',
	'</a>',
	'</p>',
	].join('')

	const wrapper = shallowMount(RichContent, {
	global,
	props: {
	attentions,
	handleLinks: true,
	greentext: true,
	emoji: [],
	html,
	},
	})

	expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
	})

	it.skip('[INFORMATIVE] Performance testing, 10 000 simple posts', () => {
	const amount = 20

	const onePost = p(
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	makeMention('Lain'),
	' i just landed in l a where are you',
	)

	const TestComponent = {
	template: `
	<div v-if="!vhtml">
	${new Array(amount).fill(`<RichContent html="${onePost}" :greentext="true" :handleLinks="handeLinks" :emoji="[]" :attentions="attentions"/>`)}
	</div>
	<div v-else="vhtml">
	${new Array(amount).fill(`<div v-html="${onePost}"/>`)}
	</div>
	`,
	props: ['handleLinks', 'attentions', 'vhtml'],
	}

	const ptest = (handleLinks, vhtml) => {
	const t0 = performance.now()

	const wrapper = mount(TestComponent, {
	global,
	props: {
	attentions,
	handleLinks,
	vhtml,
	},
	})

	const t1 = performance.now()

	wrapper.destroy()

	const t2 = performance.now()

	return `Mount: ${t1 - t0}ms, destroy: ${t2 - t1}ms, avg ${(t1 - t0) / amount}ms - ${(t2 - t1) / amount}ms per item`
	}

	console.debug(`${amount} items with links handling:`)
	console.debug(ptest(true))
	console.debug(`${amount} items without links handling:`)
	console.debug(ptest(false))
	console.debug(`${amount} items plain v-html:`)
	console.debug(ptest(false, true))
	})
	})

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 30, 2:21 AM (1 d, 9 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1799195
Default Alt Text: (281 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions