No OneTemporary
Actions

Size

153 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
	index d5bce12a71..87d6599216 100644
	--- a/src/components/attachment/attachment.js
	+++ b/src/components/attachment/attachment.js
	@@ -1,217 +1,218 @@
	import { mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

	import Popover from 'src/components/popover/popover.vue'
	import nsfwImage from '../../assets/nsfw.png'

	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',
	],
	+ emits: ['play', 'pause'],
	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')),

	VideoAttachment: defineAsyncComponent(
	() => 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/conversation/conversation.js b/src/components/conversation/conversation.js
	index 54bcbd3734..6961678314 100644
	--- a/src/components/conversation/conversation.js
	+++ b/src/components/conversation/conversation.js
	@@ -1,635 +1,592 @@
	import { clone, filter, findIndex, get, reduce } from 'lodash'
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

	import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
	import QuickViewSettings from 'src/components/quick_view_settings/quick_view_settings.vue'
	import ThreadTree from 'src/components/thread_tree/thread_tree.vue'

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

	import { fetchConversation, fetchStatus } from 'src/api/public.js'
	import { WSConnectionStatus } from 'src/api/websocket.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',
	],
	+ data() {
	+ return {
	+ highlight: null,
	+ expanded: false,
	+ threadDisplayStatusObject: {}, // id => 'showing' \| 'hidden'
	+ inlineDivePosition: null,
	+ loadStatusError: null,
	+ unsuspendibleIds: new Set(),
	+ }
	+ },
	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
	- }
	+ return this.unsuspendibleIds.size > 0
	},
	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: {
	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) {
	fetchConversation({
	id: this.statusId,
	credentials: useOAuthStore().token,
	}).then(({ data: { ancestors, descendants } }) => {
	this.$store.dispatch('addNewStatuses', { statuses: ancestors })
	this.$store.dispatch('addNewStatuses', { statuses: descendants })
	this.setHighlight(this.originalStatusId)
	})
	} else {
	this.loadStatusError = null
	fetchStatus({
	id: this.statusId,
	credentials: useOAuthStore().token,
	})
	.then(({ data: status }) => {
	this.$store.dispatch('addNewStatuses', { statuses: [status] })
	this.fetchConversation()
	})
	.catch((error) => {
	console.error(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 = {}
	},
	+ onStatusSuspendStateChange({ id, suspend }) {
	+ if (!suspend) {
	+ this.unsuspendibleIds.add(id)
	+ } else {
	+ this.unsuspendibleIds.delete(id)
	+ }
	+ },
	},
	}

	export default conversation
	diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
	index 8d47340830..98bd8956c5 100644
	--- a/src/components/conversation/conversation.vue
	+++ b/src/components/conversation/conversation.vue
	@@ -1,319 +1,307 @@
	<template>
	<div
	v-if="!hideStatus"
	:style="hiddenStyle"
	class="Conversation"
	:class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
	>
	<div
	v-if="isExpanded"
	class="panel-heading conversation-heading -sticky"
	>
	<h1 class="title">
	{{ $t('timeline.conversation') }}
	</h1>
	<button
	v-if="collapsable"
	class="button-unstyled -link"
	@click.prevent="toggleExpanded"
	>
	{{ $t('timeline.collapse') }}
	</button>
	<QuickFilterSettings
	v-if="!collapsable && mobileLayout"
	:conversation="true"
	class="rightside-button"
	/>
	<QuickViewSettings
	v-if="!collapsable"
	:conversation="true"
	class="rightside-button"
	/>
	</div>
	<div
	v-if="isPage && !status"
	class="conversation-body"
	:class="{ 'panel-body': isExpanded }"
	>
	<p v-if="!loadStatusError">
	<FAIcon
	spin
	icon="circle-notch"
	/>
	{{ $t('status.loading') }}
	</p>
	<p v-else>
	{{ $t('status.load_error', { error: loadStatusError }) }}
	</p>
	</div>
	<div
	v-else
	class="conversation-body"
	:class="{ 'panel-body': isExpanded }"
	>
	<div
	v-if="isTreeView"
	class="thread-body"
	>
	<div
	v-if="shouldShowAllConversationButton"
	class="conversation-dive-to-top-level-box"
	>
	<i18n-t
	keypath="status.show_all_conversation_with_icon"
	tag="button"
	class="button-unstyled -link"
	scope="global"
	@click.prevent="diveToTopLevel"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-left"
	/>
	</template>
	<template #text>
	<span>
	{{ $t('status.show_all_conversation', { numStatus: otherTopLevelCount }, otherTopLevelCount) }}
	</span>
	</template>
	</i18n-t>
	</div>
	<div
	v-if="shouldShowAncestors"
	class="thread-ancestors"
	>
	<article
	v-for="status in ancestorsOf(diveRoot)"
	:key="status.id"
	class="thread-ancestor"
	:class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
	>
	<Status
	ref="statusComponent"
	class="conversation-status status-fadein panel-body"

	:statusoid="status"
	:replies="getReplies(status.id)"

	:expandable="!isExpanded"
	:focused="isFocused(status.id)"
	:highlight="getHighlight()"
	:inline-expanded="collapsable && isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:in-profile="inProfile"
	:in-conversation="isExpanded"
	:profile-user-id="profileUserId"
	:simple-tree="treeViewIsSimple"
	:show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
	:dive="() => diveIntoStatus(status.id)"

	- :controlled-showing-tall="statusContentProperties[status.id].showingTall"
	- :controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
	- :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
	- :controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
	- :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
	- :controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
	- :controlled-replying="statusContentProperties[status.id].replying"
	- :controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
	- :controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
	- :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
	-
	@goto="setHighlight"
	- @toggle-expanded="toggleExpanded"
	+ @suspendable-state-change="onStatusSuspendStateChange"
	/>
	<div
	v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
	class="thread-ancestor-dive-box"
	>
	<div
	class="thread-ancestor-dive-box-inner"
	>
	<i18n-t
	tag="button"
	scope="global"
	keypath="status.ancestor_follow_with_icon"
	class="button-unstyled -link thread-tree-show-replies-button"
	@click.prevent="diveIntoStatus(status.id)"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-right"
	/>
	</template>
	<template #text>
	<span>
	{{ $t('status.ancestor_follow', { numReplies: getReplies(status.id, getReplies(status.id).length - 1).length - 1 }) }}
	</span>
	</template>
	</i18n-t>
	</div>
	</div>
	</article>
	</div>
	- <thread-tree
	+ <ThreadTree
	v-for="status in showingTopLevel"
	:key="status.id"
	ref="statusComponent"
	:depth="0"

	:status="status"
	:in-profile="inProfile"
	:conversation="conversation"
	:collapsable="collapsable"
	:is-expanded="isExpanded"
	:pinned-status-ids-object="pinnedStatusIdsObject"
	:profile-user-id="profileUserId"

	:is-focused-function="isFocused"
	:get-replies="getReplies"
	:highlight="maybeHighlight"
	:set-highlight="setHighlight"
	:toggle-expanded="toggleExpanded"

	:simple="treeViewIsSimple"
	:toggle-thread-display="toggleThreadDisplay"
	:thread-display-status="threadDisplayStatus"
	:show-thread-recursively="showThreadRecursively"
	:total-reply-count="totalReplyCount"
	:total-reply-depth="totalReplyDepth"
	- :status-content-properties="statusContentProperties"
	- :set-status-content-property="setStatusContentProperty"
	- :toggle-status-content-property="toggleStatusContentProperty"
	:dive="canDive ? diveIntoStatus : undefined"
	+ @suspendable-state-change="onStatusSuspendStateChange"
	/>
	</div>
	<div
	v-if="isLinearView"
	class="thread-body"
	>
	<article>
	- <status
	+ <Status
	v-for="status in conversation"
	:key="status.id"
	ref="statusComponent"
	class="conversation-status status-fadein panel-body"
	:statusoid="status"
	:replies="getReplies(status.id)"

	:expandable="!isExpanded"
	:focused="isFocused(status.id)"
	:highlight="getHighlight()"
	:inline-expanded="collapsable && isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:in-profile="inProfile"
	:in-conversation="isExpanded"
	:profile-user-id="profileUserId"

	@goto="setHighlight"
	@toggle-expanded="toggleExpanded"
	+ @suspendable-state-change="onStatusSuspendStateChange"
	/>
	</article>
	</div>
	</div>
	</div>
	<div
	v-else
	class="Conversation -hidden"
	:style="hiddenStyle"
	/>
	</template>

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

	<style lang="scss">
	.Conversation {
	z-index: 1;

	&.-hidden {
	background: var(--__panel-background);
	backdrop-filter: var(--__panel-backdrop-filter);
	}

	.conversation-dive-to-top-level-box {
	padding: var(--status-margin);
	border-bottom: 1px solid var(--border);
	border-radius: 0;

	/* Make the button stretch along the whole row */
	display: flex;
	align-items: stretch;
	flex-direction: column;
	}

	.thread-ancestors {
	margin-left: var(--status-margin);
	border-left: 2px solid var(--border);
	}

	.thread-ancestor.-faded .RichContent {
	/* stylelint-disable declaration-no-important */
	--text: var(--textFaint) !important;
	--link: var(--linkFaint) !important;
	--funtextGreentext: var(--funtextGreentextFaint) !important;
	--funtextCyantext: var(--funtextCyantextFaint) !important;
	/* stylelint-enable declaration-no-important */
	}

	.thread-ancestor-dive-box {
	padding-left: var(--status-margin);
	border-bottom: 1px solid var(--border);
	border-radius: 0;

	/* Make the button stretch along the whole row */
	&,
	&-inner {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	}
	}

	.thread-ancestor-dive-box-inner {
	padding: var(--status-margin);
	}

	.conversation-status {
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	}

	.thread-ancestor-has-other-replies .conversation-status,
	&:last-child:not(.-expanded) .conversation-status,
	&.-expanded .conversation-status:last-child,
	.thread-ancestor:last-child .conversation-status,
	.thread-ancestor:last-child .thread-ancestor-dive-box,
	&.-expanded .thread-tree .conversation-status {
	border-bottom: none;
	}

	.thread-ancestors + .thread-tree > .conversation-status {
	border-top: 1px solid var(--border);
	}

	/* expanded conversation in timeline */
	&.status-fadein.-expanded .thread-body {
	border-left: 4px solid var(--cRed);
	border-radius: var(--roundness);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom: 1px solid var(--border);
	}

	&.-expanded.status-fadein {
	--___margin: calc(var(--status-margin) / 2);

	background: var(--background);
	margin: var(--___margin);

	&::before {
	z-index: -1;
	content: "";
	display: block;
	position: absolute;
	inset: calc(var(--___margin) * -1);
	background: var(--background);
	backdrop-filter: var(--__panel-backdrop-filter);
	}
	}
	}
	</style>
	diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
	index 252a32bf69..58ab3db0b5 100644
	--- a/src/components/gallery/gallery.js
	+++ b/src/components/gallery/gallery.js
	@@ -1,151 +1,172 @@
	import { set, sumBy } from 'lodash'

	import Attachment from 'src/components/attachment/attachment.vue'

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

	const displayTypes = new Set(['image', 'video', 'flash'])

	const Gallery = {
	props: [
	'attachments',
	'compact',
	'limitRows',
	'descriptions',
	'limit',
	'nsfw',
	'setMedia',
	'size',
	'editable',
	'removeAttachment',
	'shiftUpAttachment',
	'shiftDnAttachment',
	'editAttachment',
	'grid',
	],
	data() {
	return {
	sizes: {},
	hidingLong: true,
	+ playingMedia: new Set(),
	}
	},
	+ emits: ['play', 'pause'],
	components: { Attachment },
	computed: {
	rows() {
	if (!this.attachments) {
	return []
	}
	const attachments =
	this.limit > 0
	? this.attachments.slice(0, this.limit)
	: this.attachments
	if (this.size === 'hide') {
	return attachments.map((item) => ({ minimal: true, items: [item] }))
	}
	const rows = this.grid
	? [{ grid: true, items: attachments }]
	: attachments
	.reduce(
	(acc, attachment, i) => {
	const peek = attachments[i + 1]
	const nextEnd = peek == null
	const nextWide = !nextEnd && !displayTypes.has(peek?.type)

	// Inserting new row
	if (attachment.type === 'audio') {
	return [
	...acc,
	{ audio: true, items: [attachment] },
	{ items: [] },
	]
	}
	if (!displayTypes.has(attachment.type)) {
	return [
	...acc,
	{ minimal: true, items: [attachment] },
	{ items: [] },
	]
	}

	const maxPerRow = 3
	const currentRow = acc[acc.length - 1]
	const previousRow = acc[acc.length - 2]

	if (currentRow.items.length >= maxPerRow) {
	if (nextWide \|\| nextEnd) {
	if (previousRow?.items.length > 1) {
	currentRow.items.push(attachment)
	return [...acc, { items: [] }]
	} else {
	const last = currentRow.items.splice(-1)[0]
	return [...acc, { items: [last, attachment] }]
	}
	} else {
	return [...acc, { items: [attachment] }]
	}
	} else {
	currentRow.items.push(attachment)
	}
	return acc
	},
	[{ items: [] }],
	)
	.filter((_) => _.items.length > 0)
	return rows
	},
	attachmentsDimensionalScore() {
	return this.rows.reduce((acc, row) => {
	let size = 0
	if (row.minimal) {
	size += 1 / 8
	} else if (row.audio) {
	size += 1 / 4
	} else {
	size += 1 / (row.items.length + 0.6)
	}
	return acc + size
	}, 0)
	},
	tooManyAttachments() {
	if (this.editable \|\| this.size === 'small') {
	return false
	} else if (this.size === 'hide') {
	return this.attachments.length > 8
	} else {
	return this.attachmentsDimensionalScore > 1
	}
	},
	+ hasPlayingMedia() {
	+ return this.playingMedia.size > 0
	+ },
	},
	methods: {
	onNaturalSizeLoad({ id, width, height }) {
	set(this.sizes, id, { width, height })
	},
	+ onMediaStateChange(playing, id) {
	+ if (playing) {
	+ this.playingMedia.add(id)
	+ } else {
	+ this.playingMedia.delete(id)
	+ }
	+ },
	rowStyle(row) {
	if (row.audio) {
	return { 'padding-bottom': '25%' } // fixed reduced height for audio
	} else if (!row.minimal && !row.grid) {
	return { 'padding-bottom': `${100 / (row.items.length + 0.6)}%` }
	}
	},
	itemStyle(id, row) {
	const total = sumBy(row, (item) => this.getAspectRatio(item.id))
	return { flex: `${this.getAspectRatio(id) / total} 1 0%` }
	},
	getAspectRatio(id) {
	const size = this.sizes[id]
	return size ? size.width / size.height : 1
	},
	toggleHidingLong(event) {
	this.hidingLong = event
	},
	openGallery() {
	useMediaViewerStore().setMedia(this.attachments)
	useMediaViewerStore().setCurrentMedia(this.attachments[0])
	},
	onMedia() {
	useMediaViewerStore().setMedia(this.attachments)
	},
	},
	+ watch: {
	+ hasPlayingMedia(newValue) {
	+ if (newValue) {
	+ this.$emit('play')
	+ } else {
	+ this.$emit('pause')
	+ }
	+ }
	+ }
	}

	export default Gallery
	diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
	index 11637f3c2a..a32d4feb7a 100644
	--- a/src/components/gallery/gallery.vue
	+++ b/src/components/gallery/gallery.vue
	@@ -1,193 +1,195 @@
	<template>
	<div
	ref="galleryContainer"
	class="Gallery"
	:class="{ '-long': tooManyAttachments && hidingLong }"
	>
	<div class="gallery-rows">
	<div
	v-for="(row, rowIndex) in rows"
	:key="rowIndex"
	class="gallery-row"
	:style="rowStyle(row)"
	:class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }"
	>
	<div
	class="gallery-row-inner"
	:class="{ '-grid': grid }"
	>
	<Attachment
	v-for="(attachment, attachmentIndex) in row.items"
	:key="attachment.id"
	class="gallery-item"
	:compact="compact"
	:nsfw="nsfw"
	:attachment="attachment"
	:size="size"
	:editable="editable"
	:remove="removeAttachment"
	:shift-up="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
	:shift-dn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
	:edit="editAttachment"
	:description="descriptions && descriptions[attachment.id]"
	:hide-description="size === 'small' \|\| tooManyAttachments && hidingLong"
	:style="itemStyle(attachment.id, row.items)"
	@set-media="onMedia"
	@natural-size-load="onNaturalSizeLoad"
	+ @play="() => onMediaStateChange(true, attachment.id)"
	+ @pause="() => onMediaStateChange(false, attachment.id)"
	/>
	</div>
	</div>
	</div>
	<div
	v-if="tooManyAttachments"
	class="many-attachments"
	>
	<div class="many-attachments-text">
	{{ $t("status.many_attachments", { number: attachments.length }) }}
	</div>
	<div class="many-attachments-buttons">
	<span
	v-if="!hidingLong"
	class="many-attachments-button"
	>
	<button
	class="button-unstyled -link"
	@click="toggleHidingLong(true)"
	>
	{{ $t("status.collapse_attachments") }}
	</button>
	</span>
	<span
	v-if="hidingLong"
	class="many-attachments-button"
	>
	<button
	class="button-unstyled -link"
	@click="toggleHidingLong(false)"
	>
	{{ $t("status.show_all_attachments") }}
	</button>
	</span>
	<span
	v-if="hidingLong"
	class="many-attachments-button"
	>
	<button
	class="button-unstyled -link"
	@click="openGallery"
	>
	{{ $t("status.open_gallery") }}
	</button>
	</span>
	</div>
	</div>
	</div>
	</template>

	<script src='./gallery.js'></script>

	<style lang="scss">
	.Gallery {
	.gallery-rows {
	display: flex;
	flex-direction: column;
	}

	.gallery-row {
	position: relative;
	height: 0;
	width: 100%;
	flex-grow: 1;

	.gallery-row-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-flow: row wrap;
	align-content: stretch;

	.gallery-item {
	margin: 0 0.5em 0 0;
	flex-grow: 1;
	height: 100%;
	box-sizing: border-box;
	// to make failed images a bit more noticeable on chromium
	min-width: 2em;

	&:last-child {
	margin: 0;
	}
	}

	&.-grid {
	width: 100%;
	height: auto;
	position: relative;
	display: grid;
	grid-gap: 0.5em;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));

	.gallery-item {
	margin: 0;
	height: 20em;
	}
	}
	}

	&.-grid,
	&.-minimal {
	height: auto;

	.gallery-row-inner {
	position: relative;
	}
	}

	&:not(:first-child) {
	margin-top: 0.5em;
	}
	}

	&.-long {
	.gallery-rows {
	max-height: 25em;
	overflow: hidden;
	mask:
	linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
	linear-gradient(to top, white, white);

	/* Autoprefixed seem to ignore this one, and also syntax is different */
	/* stylelint-disable mask-composite */
	/* stylelint-disable declaration-property-value-no-unknown */
	/* stylelint-disable scss/declaration-property-value-no-unknown */

	/* TODO check if this is still needed */
	mask-composite: xor;
	/* stylelint-enable scss/declaration-property-value-no-unknown */
	/* stylelint-enable declaration-property-value-no-unknown */
	/* stylelint-enable mask-composite */
	mask-composite: exclude;
	}
	}

	.many-attachments-text {
	text-align: center;
	line-height: 2;
	}

	.many-attachments-buttons {
	display: flex;
	}

	.many-attachments-button {
	display: flex;
	flex: 1;
	justify-content: center;
	line-height: 2;

	button {
	padding: 0 2em;
	}
	}
	}
	</style>
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index 6cb99a3b6d..bb4051628e 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,995 +1,995 @@
	import { debounce, map, reject, uniqBy } from 'lodash'
	import { mapActions, mapState } from 'pinia'
	import { defineAsyncComponent } from 'vue'

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

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

	import { 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',
	+ 'close-accepted',
	'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,
	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
	this.preview = data
	})
	.catch((error) => {
	this.preview = { error }
	})
	.finally(() => {
	this.previewLoading = false
	})
	},
	debouncePreviewStatus: debounce(function () {
	this.previewStatus()
	}, 500),
	autoPreview() {
	if (!this.preview) return
	this.previewLoading = true
	this.debouncePreviewStatus()
	},
	closePreview() {
	this.preview = null
	this.previewLoading = false
	},
	togglePreview() {
	if (this.showPreview) {
	this.closePreview()
	} else {
	this.previewStatus()
	}
	},
	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')
	+ this.$emit('close-accepted')
	} else {
	this.$refs.draftCloser.requestClose()
	}
	},
	saveAndCloseDraft() {
	this.saveDraft().then(() => {
	- this.$emit('can-close')
	+ this.$emit('close-accepted')
	})
	},
	discardAndCloseDraft() {
	this.abandonDraft().then(() => {
	- this.$emit('can-close')
	+ this.$emit('close-accepted')
	})
	},
	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/search/search.vue b/src/components/search/search.vue
	index 4302f93f97..16418d3898 100644
	--- a/src/components/search/search.vue
	+++ b/src/components/search/search.vue
	@@ -1,231 +1,230 @@
	<template>
	<div class="Search panel panel-default">
	<div class="panel-heading">
	<h1 class="title">
	{{ $t('nav.search') }}
	</h1>
	</div>
	<div class="panel-body search-input-container">
	<input
	ref="searchInput"
	v-model="searchTerm"
	class="input search-input"
	:placeholder="$t('nav.search')"
	@keyup.enter="newQuery(searchTerm)"
	>
	<button
	class="btn button-default search-button"
	type="submit"
	@click="newQuery(searchTerm)"
	>
	<FAIcon icon="search" />
	</button>
	</div>
	<div
	v-if="loading && statusesOffset == 0"
	class="panel-body text-center loading-icon"
	>
	<FAIcon
	icon="circle-notch"
	spin
	size="lg"
	/>
	</div>
	<div v-else-if="loaded">
	<div class="search-nav-heading">
	<tab-switcher
	ref="tabSwitcher"
	:on-switch="onResultTabSwitch"
	:active-tab="currenResultTab"
	>
	<span
	key="statuses"
	:label="$t('user_card.statuses') + resultCount('visibleStatuses')"
	/>
	<span
	key="people"
	:label="$t('search.people') + resultCount('users')"
	/>
	<span
	key="hashtags"
	:label="$t('search.hashtags') + resultCount('hashtags')"
	/>
	</tab-switcher>
	</div>
	</div>
	<div class="panel-body">
	<div v-if="currenResultTab === 'statuses'">
	<Status
	v-for="status in visibleStatuses"
	:key="status.id"
	:collapsable="false"
	:expandable="false"
	:compact="false"
	class="search-result"
	:statusoid="status"
	- :no-heading="false"
	/>
	<button
	v-if="!loading && loaded && lastStatusFetchCount > 0"
	class="more-statuses-button button-unstyled -link"
	@click.prevent="search(searchTerm, 'statuses')"
	>
	<div class="new-status-notification text-center">
	{{ $t('search.load_more') }}
	</div>
	</button>
	<div
	v-else-if="loading && statusesOffset > 0"
	class="text-center loading-icon"
	>
	<FAIcon
	icon="circle-notch"
	spin
	size="lg"
	/>
	</div>
	<div
	v-if="(visibleStatuses.length === 0 \|\| lastStatusFetchCount === 0) && !loading && loaded"
	class="search-result-heading"
	>
	<h4>
	{{ visibleStatuses.length === 0 ? $t('search.no_results') : $t('search.no_more_results') }}
	</h4>
	</div>
	</div>
	<div v-else-if="currenResultTab === 'people'">
	<div
	v-if="users.length === 0 && !loading && loaded"
	class="search-result-heading"
	>
	<h4>{{ $t('search.no_results') }}</h4>
	</div>
	<FollowCard
	v-for="user in users"
	:key="user.id"
	:user="user"
	class="list-item search-result"
	/>
	</div>
	<div v-else-if="currenResultTab === 'hashtags'">
	<div
	v-if="hashtags.length === 0 && !loading && loaded"
	class="search-result-heading"
	>
	<h4>{{ $t('search.no_results') }}</h4>
	</div>
	<div
	v-for="hashtag in hashtags"
	:key="hashtag.url"
	class="status trend search-result"
	>
	<router-link
	class="list-item hashtag"
	:to="{ name: 'tag-timeline', params: { tag: hashtag.name } }"
	>
	<span class="name">
	#{{ hashtag.name }}
	</span>
	<div v-if="lastHistoryRecord(hashtag)">
	<span v-if="lastHistoryRecord(hashtag).accounts == 1">
	{{ $t('search.person_talking', { count: lastHistoryRecord(hashtag).accounts }) }}
	</span>
	<span v-else>
	{{ $t('search.people_talking', { count: lastHistoryRecord(hashtag).accounts }) }}
	</span>
	</div>
	</router-link>
	<div
	v-if="lastHistoryRecord(hashtag)"
	class="count"
	>
	{{ lastHistoryRecord(hashtag).uses }}
	</div>
	</div>
	</div>
	</div>
	<div class="search-result-footer text-center panel-footer faint" />
	</div>
	</template>

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

	<style lang="scss">
	.search-result-heading {
	color: var(--faint);
	padding: 0.75rem;
	text-align: center;
	}

	@media all and (width <= 800px) {
	.search-nav-heading {
	.tab-switcher .tabs .tab-wrapper {
	display: block;
	justify-content: center;
	flex: 1 1 auto;
	text-align: center;
	}
	}
	}

	.search-result {
	box-sizing: border-box;
	border-bottom: 1px solid;
	border-color: var(--border);
	}

	.search-input-container {
	padding: 0.8rem;
	display: flex;
	justify-content: center;

	.search-input {
	width: 100%;
	line-height: 1.125rem;
	font-size: 1rem;
	padding: 0.5rem;
	box-sizing: border-box;
	}

	.search-button {
	margin-left: 0.5em;
	}
	}

	.loading-icon {
	padding: 1em;
	}

	.trend {
	display: flex;
	align-items: center;

	.hashtag {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	.name {
	color: var(--link);
	}
	}

	.count {
	flex: 0 0 auto;
	width: 2rem;
	font-size: 1.5rem;
	line-height: 2.25rem;
	font-weight: 500;
	text-align: center;
	color: var(--text);
	}
	}

	.more-statuses-button {
	height: 3.5em;
	line-height: 3.5em;
	width: 100%;
	}

	</style>
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index 01d7facfc1..93a92a5529 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,668 +1,650 @@
	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 PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import StatusActionButtons from 'src/components/status_action_buttons/status_action_buttons.vue'
	import StatusContent from 'src/components/status_content/status_content.vue'
	import StatusPopover from 'src/components/status_popover/status_popover.vue'
	import Timeago from 'src/components/timeago/timeago.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserLink from 'src/components/user_link/user_link.vue'
	import UserListPopover from 'src/components/user_list_popover/user_list_popover.vue'
	import UserPopover from 'src/components/user_popover/user_popover.vue'
	import { muteFilterHits } from '../../services/status_parser/status_parser.js'
	import {
	highlightClass,
	highlightStyle,
	} from '../../services/user_highlighter/user_highlighter.js'

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

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

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

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

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

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

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

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

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

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

	profileUserId: String,
	simpleTree: Boolean,
	showOtherRepliesAsButton: Boolean,
	dive: Function,
	ignoreMute: Boolean,

	controlledThreadDisplayStatus: String,
	controlledToggleThreadDisplay: Function,
	- controlledShowingTall: Boolean,
	- controlledToggleShowingTall: Function,
	- controlledExpandingSubject: Boolean,
	- controlledToggleExpandingSubject: Function,
	- controlledShowingLongSubject: Boolean,
	- controlledToggleShowingLongSubject: Function,
	- controlledReplying: Boolean,
	- controlledToggleReplying: Function,
	- controlledMediaPlaying: Boolean,
	- controlledSetMediaPlaying: Function,
	},
	- emits: ['goto', 'toggleExpanded'],
	+ emits: ['goto', 'toggleExpanded', 'suspendableStateChange'],
	data() {
	return {
	- uncontrolledReplying: false,
	+ replying: false,
	unmuted: false,
	userExpanded: false,
	- uncontrolledMediaPlaying: [],
	- suspendable: true,
	+ mediaPlaying: new Set(),
	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
	+ return !this.replying && this.mediaPlaying.size === 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() {
	+ toggleReplyForm() {
	if (this.replying) {
	+ // This emits 'close-accepted' if successful
	+ // which in turn callse closeReply()
	this.$refs.postStatusForm.requestClose()
	} else {
	- this.doToggleReplying()
	+ this.replying = true
	}
	},
	- doToggleReplying() {
	- controlledOrUncontrolledToggle(this, 'replying')
	+ closeReplyForm() {
	+ this.replying = false
	},
	gotoOriginal(id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded() {
	this.$emit('toggleExpanded')
	},
	toggleMute() {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded() {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink(id, name) {
	return generateProfileLink(
	id,
	name,
	useInstanceStore().restrictedNicknames,
	)
	},
	addMediaPlaying(id) {
	- controlledOrUncontrolledSet(
	- this,
	- 'mediaPlaying',
	- this.mediaPlaying.concat(id),
	- )
	+ this.mediaPlaying.add(id)
	},
	removeMediaPlaying(id) {
	- controlledOrUncontrolledSet(
	- this,
	- 'mediaPlaying',
	- this.mediaPlaying.filter((mediaId) => mediaId !== id),
	- )
	+ this.mediaPlaying.delete(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
	+ isSuspendable: function (suspend) {
	+ this.$emit('suspendableStateChange', { id: this.statusoid.id, suspend })
	},
	},
	}

	export default Status
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index 5cd2de3ab5..2b54977c7d 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,569 +1,563 @@
	<template>
	<div
	v-if="!hideStatus"
	ref="root"
	class="Status"
	:class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
	>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	<button
	class="fa-scale-110 fa-old-padding"
	type="button"
	@click="clearError"
	>
	<FAIcon icon="times" />
	</button>
	</div>
	<template v-if="muted && !isPreview">
	<div class="status-container muted">
	<small class="status-username">
	<FAIcon
	v-if="muted && retweet"
	class="fa-scale-110 fa-old-padding repeat-icon"
	icon="retweet"
	/>
	<user-link
	:user="status.user"
	:at="false"
	/>
	</small>
	<small class="mute-reason">
	{{ muteLocalized }}
	</small>
	<button
	class="unmute button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	icon="eye-slash"
	class="fa-scale-110 fa-old-padding"
	/>
	</button>
	</div>
	</template>
	<template v-else>
	<div
	v-if="retweet && !noHeading && !inConversation"
	:class="[repeaterClass, { highlighted: repeaterStyle }]"
	:style="[repeaterStyle]"
	class="status-container repeat-info"
	>
	<UserAvatar
	v-if="retweet"
	class="left-side repeater-avatar"
	:show-actor-type-indicator="showActorTypeIndicator"
	:user="statusoid.user"
	/>
	<div class="right-side faint">
	<bdi
	class="status-username repeater-name"
	:title="retweeter"
	>
	<router-link
	v-if="retweeterHtml"
	:to="retweeterProfileLink"
	>
	<RichContent
	:html="retweeterHtml"
	:emoji="retweeterUser.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	:is-local="retweeterUser.is_local"
	/>
	</router-link>
	<router-link
	v-else
	:to="retweeterProfileLink"
	>{{ retweeter }}</router-link>
	</bdi>
	<div class="repeat-label">
	<FAIcon
	icon="retweet"
	class="repeat-icon"
	:title="$t('tool_tip.repeat')"
	/>
	{{ $t('timeline.repeated') }}
	</div>
	</div>
	</div>

	<div
	v-if="!deleted"
	:class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
	:style="[ userStyle ]"
	class="status-container"
	:data-tags="tags"
	>
	<div
	v-if="!noHeading"
	class="left-side"
	>
	<a
	v-if="status.user?.name"
	:href="$router.resolve(userProfileLink).href"
	@click.prevent
	>
	<UserPopover
	:user-id="status.user.id"
	:overlay-centers="true"
	>
	<UserAvatar
	class="post-avatar"
	:show-actor-type-indicator="showActorTypeIndicator"
	:compact="compact"
	:user="status?.user"
	/>
	</UserPopover>
	</a>
	<UserAvatar
	v-else
	:user="status?.user"
	class="post-avatar"
	:compact="compact"
	:title="$t('status.unknown_user_info')"
	/>
	</div>
	<div class="right-side">
	<div
	v-if="!noHeading"
	class="status-heading"
	>
	<div class="heading-name-row">
	<div
	v-if="status.user"
	class="heading-left"
	>
	<h4
	v-if="status.user.name_html"
	class="status-username"
	:title="status.user.name"
	>
	<RichContent
	:html="status.user.name"
	:emoji="status.user.emoji"
	:allow-non-square-emoji="allowNonSquareEmoji"
	:is-local="status.user.is_local"
	/>
	</h4>
	<h4
	v-else
	class="status-username"
	:title="status.user.name"
	>
	{{ status.user.name }}
	</h4>
	<user-link
	class="account-name"
	:title="status.user.screen_name_ui"
	:user="status.user"
	:at="false"
	/>
	<img
	v-if="!!(status.user && status.user.favicon)"
	class="status-favicon"
	:src="status.user.favicon"
	>
	</div>

	<span class="heading-right">
	<span
	v-if="showPinned"
	class="pin"
	>
	<FAIcon
	icon="thumbtack"
	class="faint"
	/>
	<span class="faint">{{ $t('status.pinned') }}</span>
	</span>
	<router-link
	class="timeago faint"
	:to="{ name: 'conversation', params: { id: status.id } }"
	>
	<Timeago
	:time="status.created_at"
	:auto-update="60"
	/>
	</router-link>
	<span
	v-if="status.visibility"
	class="visibility-icon"
	:title="visibilityLocalized"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="visibilityIcon(status.visibility)"
	/>
	</span>
	<button
	v-if="expandable && !isPreview"
	class="button-unstyled"
	:title="$t('status.expand')"
	@click.prevent="toggleExpanded"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	icon="plus-square"
	/>
	</button>
	<button
	v-if="unmuted"
	class="button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	class="fa-scale-110"
	/>
	</button>
	<button
	v-if="inThreadForest && replies && replies.length && !simpleTree"
	class="button-unstyled"
	:title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
	:aria-expanded="threadShowing ? 'true' : 'false'"
	@click.prevent="toggleThreadDisplay"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="threadShowing ? 'chevron-up' : 'chevron-down'"
	/>
	</button>
	<button
	v-if="dive && !simpleTree"
	class="button-unstyled"
	:title="$t('status.show_only_conversation_under_this')"
	@click.prevent="dive"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="'angle-double-right'"
	/>
	</button>
	</span>
	</div>
	<div
	v-if="scrobblePresent"
	class="status-rich-presence"
	>
	<a
	v-if="scrobble.externalLink"
	:href="scrobble.externalLink"
	target="_blank"
	>
	{{ scrobble.artist }} — {{ scrobble.title }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="play"
	/>
	<span class="status-rich-presence-time">
	<Timeago
	template-key="time.in_past"
	:time="scrobble.created_at"
	:auto-update="60"
	/>
	</span>
	</a>
	<span v-if="!scrobble.externalLink">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="music"
	/>
	{{ scrobble.artist }} — {{ scrobble.title }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="play"
	/>
	<span class="status-rich-presence-time">
	<Timeago
	template-key="time.in_past"
	:time="scrobble.created_at"
	:auto-update="60"
	/>
	</span>
	</span>
	</div>
	<div
	v-if="isReply \|\| hasMentionsLine"
	class="heading-reply-row"
	>
	<span
	v-if="isReply"
	class="glued-label reply-glued-label"
	>
	<i18n-t
	keypath="status.reply_to_with_arg"
	scope="global"
	>
	<template #replyToWithIcon>
	<StatusPopover
	v-if="!isPreview"
	:status-id="status.parent_visible && status.in_reply_to_status_id"
	class="reply-to-popover"
	style="min-width: 0;"
	:class="{ '-strikethrough': !status.parent_visible }"
	>
	<button
	class="button-unstyled reply-to"
	:aria-label="$t('tool_tip.reply')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<i18n-t
	keypath="status.reply_to_with_icon"
	scope="global"
	>
	<template #icon>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="reply"
	flip="horizontal"
	/>
	</template>
	<template #replyTo>
	<span
	class="reply-to-text"
	>
	{{ $t('status.reply_to') }}
	</span>
	</template>
	</i18n-t>
	</button>
	</StatusPopover>

	<span
	v-else
	class="reply-to-no-popover"
	>
	<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
	</span>
	</template>
	<template #user>
	<MentionLink
	:content="replyToName"
	:url="replyProfileLink"
	:user-id="status.in_reply_to_user_id"
	:user-screen-name="status.in_reply_to_screen_name"
	/>
	</template>
	</i18n-t>
	</span>

	<!-- This little wrapper is made for sole purpose of "gluing" -->
	<!-- "Mentions" label to the first mention -->
	<span
	v-if="hasMentionsLine"
	class="glued-label"
	>
	<span
	class="mentions"
	:aria-label="$t('tool_tip.mentions')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<span
	class="mentions-text"
	>
	{{ $t('status.mentions') }}
	</span>
	</span>
	<MentionsLine
	v-if="hasMentionsLine"
	:mentions="mentionsLine.slice(0, 1)"
	class="mentions-line-first"
	/>
	</span>
	{{ ' ' }}
	<MentionsLine
	v-if="hasMentionsLine"
	:mentions="mentionsLine.slice(1)"
	class="mentions-line"
	/>
	</div>
	<div
	v-if="isEdited && editingAvailable && !isPreview"
	class="heading-edited-row"
	>
	<i18n-t
	scope="global"
	keypath="status.edited_at"
	tag="span"
	>
	<template #time>
	<Timeago
	template-key="time.in_past"
	:time="status.edited_at"
	:auto-update="60"
	:long-format="true"
	/>
	</template>
	</i18n-t>
	</div>
	</div>

	<StatusContent
	ref="content"
	:status="status"
	- :no-heading="noHeading"
	:highlight="highlight"
	:focused="isFocused"
	- :controlled-showing-tall="controlledShowingTall"
	- :controlled-expanding-subject="controlledExpandingSubject"
	- :controlled-showing-long-subject="controlledShowingLongSubject"
	- :controlled-toggle-showing-tall="controlledToggleShowingTall"
	- :controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
	- :controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
	+ :in-conversation="inConversation"
	@mediaplay="addMediaPlaying($event)"
	@mediapause="removeMediaPlaying($event)"
	@parse-ready="setHeadTailLinks"
	/>

	<Quote
	:status-id="quoteId"
	:status-url="quoteUrl"
	:status-visible="quoteVisible"
	:initially-expanded="quoteExpanded"
	/>

	<div
	v-if="inConversation && !isPreview && replies && replies.length"
	class="replies"
	>
	<button
	v-if="showOtherRepliesAsButton && replies.length > 1"
	class="button-unstyled -link"
	:title="$t('status.ancestor_follow', { numReplies: replies.length - 1 }, replies.length - 1)"
	@click.prevent="dive"
	>
	{{ $t('status.replies_list_with_others', { numReplies: replies.length - 1 }, replies.length - 1) }}
	</button>
	<span
	v-else
	class="faint"
	>
	{{ $t('status.replies_list') }}
	</span>
	<StatusPopover
	v-for="reply in replies"
	:key="reply.id"
	:status-id="reply.id"
	>
	<button
	class="button-unstyled -link reply-link"
	@click.prevent="gotoOriginal(reply.id)"
	>
	{{ reply.name }}
	</button>
	</StatusPopover>
	</div>

	<transition name="fade">
	<div
	v-if="shouldDisplayFavsAndRepeats"
	class="favs-repeated-users"
	>
	<div class="stats">
	<UserListPopover
	v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
	:users="statusFromGlobalRepository.rebloggedBy"
	>
	<div class="stat-count">
	<a class="stat-title">{{ $t('status.repeats') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.rebloggedBy.length }}
	</div>
	</div>
	</UserListPopover>
	<UserListPopover
	v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
	:users="statusFromGlobalRepository.favoritedBy"
	>
	<div
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.favorites') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.favoritedBy.length }}
	</div>
	</div>
	</UserListPopover>
	<router-link
	v-if="statusFromGlobalRepository.quotes_count > 0"
	:to="{ name: 'quotes', params: { id: status.id } }"
	>
	<div
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.quotes') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.quotes_count }}
	</div>
	</div>
	</router-link>
	<div class="avatar-row">
	<AvatarList :users="combinedFavsAndRepeatsUsers" />
	</div>
	</div>
	</div>
	</transition>

	<EmojiReactions
	v-if="(mergedConfig.emojiReactionsOnTimeline \|\| isFocused) && (!noHeading && !isPreview)"
	:status="status"
	/>

	<StatusActionButtons
	v-if="!noHeading && !isPreview"
	:status="status"
	:replying="replying"
	- @toggle-replying="toggleReplying"
	+ @toggle-replying="toggleReplyForm"
	/>
	</div>
	</div>
	<div
	v-else
	class="gravestone"
	>
	<div class="left-side">
	<UserAvatar
	class="post-avatar"
	:compact="compact"
	:show-actor-type-indicator="showActorTypeIndicator"
	/>
	</div>
	<div class="right-side">
	<div class="deleted-text">
	{{ $t('status.status_deleted') }}
	</div>
	</div>
	</div>
	<div
	v-if="replying"
	class="status-container reply-form"
	>
	<PostStatusForm
	ref="postStatusForm"
	class="reply-body"
	:closeable="true"
	:reply-to="status.id"
	:attentions="status.attentions"
	:replied-user="status.user"
	:copy-message-scope="status.visibility"
	:subject="replySubject"
	- @posted="doToggleReplying"
	- @draft-done="doToggleReplying"
	- @can-close="doToggleReplying"
	+ @posted="closeReplyForm"
	+ @draft-done="closeReplyForm"
	+ @close-accepted="closeReplyForm"
	/>
	</div>
	</template>
	</div>
	</template>

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

	<style src="./status.scss" lang="scss"></style>
	diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
	index cdd43a0246..5188f49bd6 100644
	--- a/src/components/status_body/status_body.js
	+++ b/src/components/status_body/status_body.js
	@@ -1,161 +1,174 @@
	import { mapState } from 'pinia'

	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',
	- ],
	+ props: {
	+ status: {
	+ // Main thing
	+ type: Object,
	+ required: true,
	+ },
	+ compact: {
	+ // Resizes emoji and minimizes vertical space used
	+ // Primarily used for showing status in react notifications
	+ type: Boolean,
	+ default: false,
	+ },
	+ collapse: {
	+ // replaces newlines with spaces
	+ type: Boolean,
	+ default: false,
	+ },
	+ singleLine: {
	+ // Show entire thing (subject and content) in a single line
	+ // Primarily used in chats
	+ type: Boolean,
	+ default: false,
	+ },
	+ },
	data() {
	return {
	postLength: this.status.text.length,
	parseReadyDone: false,
	+ showingTall: false,
	+ showingLongSubject: false,
	+ expandingSubject: null,
	}
	},
	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() {
	+ hasLongSubject() {
	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.
	+ hasSubject() {
	+ return !!this.status.summary
	+ },
	+ // 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
	+ return this.hasSubject && this.mergedConfig.collapseMessageWithSubject
	},
	mightHideBecauseTall() {
	- return (
	- this.tallStatus &&
	- !(this.status.summary && this.localCollapseSubjectDefault)
	- )
	+ if (this.singleLine \|\| this.compact) return false
	+ const lengthScore =
	+ this.status.raw_html.split(/<p\|<br/).length + this.postLength / 80
	+ return lengthScore > 20
	},
	hideSubjectStatus() {
	return this.mightHideBecauseSubject && !this.expandingSubject
	},
	hideTallStatus() {
	return this.mightHideBecauseTall && !this.showingTall
	},
	- shouldShowToggle() {
	+ shouldShowExpandToggle() {
	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')
	}
	},
	+ shouldHide() {
	+ return (
	+ !this.showingMore && this.mightHideBecauseSubject && this.hasSubject
	+ )
	+ },
	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: {},
	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()
	+ this.showingTall = !this.showingTall
	} else if (this.mightHideBecauseSubject) {
	- this.toggleExpandingSubject()
	+ this.expandingSubject = !this.expandingSubject
	}
	},
	generateTagLink(tag) {
	return `/tag/${tag}`
	},
	},
	}

	export default StatusBody
	diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
	index ff35bde58f..9954663e78 100644
	--- a/src/components/status_body/status_body.scss
	+++ b/src/components/status_body/status_body.scss
	@@ -1,192 +1,196 @@
	.StatusBody {
	display: flex;
	flex-direction: column;

	.emoji {
	--_still_image-label-scale: 0.5;
	}

	.attachments {
	margin-top: 0.5em;
	}

	& .text,
	& .summary {
	white-space: pre-wrap;
	overflow-wrap: break-word;
	text-wrap: pretty;
	line-height: var(--post-line-height);
	}

	.summary {
	display: block;
	font-style: italic;
	padding-bottom: 0.5em;
	}

	.text {
	&.-single-line {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	height: 1.4em;
	}
	}

	.summary-wrapper {
	margin-bottom: 0.5em;
	border-style: solid;
	border-width: 0 0 1px;
	border-color: var(--border);
	flex-grow: 0;

	&.-tall {
	position: relative;

	.summary {
	max-height: 2em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}
	}
	}

	.text-wrapper {
	+ position: relative;
	text-overflow: ellipsis;
	overflow-wrap: break-word;
	overflow: hidden;
	display: flex;
	flex-flow: column nowrap;

	&.-tall-status {
	- position: relative;
	- height: 16em;
	z-index: 1;

	+ &:not(.-hidden) {
	+ height: 16em;
	+ }
	+
	.media-body {
	min-height: 0;
	mask:
	linear-gradient(to top, white, transparent) bottom/100% 8em no-repeat,
	linear-gradient(to top, white, white);

	/* Autoprefixed seem to ignore this one, and also syntax is different */
	/* stylelint-disable mask-composite */
	/* stylelint-disable declaration-property-value-no-unknown */
	/* stylelint-disable scss/declaration-property-value-no-unknown */

	/* TODO check if this is still needed */
	mask-composite: xor;
	/* stylelint-enable scss/declaration-property-value-no-unknown */
	/* stylelint-enable declaration-property-value-no-unknown */
	/* stylelint-enable mask-composite */
	mask-composite: exclude;
	}
	}

	&.-expanded {
	overflow: visible;
	}
	}

	& .tall-status-hider,
	& .tall-subject-hider,
	& .status-unhider,
	& .cw-status-hider {
	display: inline-block;
	overflow-wrap: break-word;
	text-wrap: pretty;
	width: 100%;
	text-align: center;
	+ margin: 0.1em 0;
	}

	.status-unhider {
	margin-top: auto;
	position: sticky;
	bottom: 0;
	padding-bottom: 1em;
	}

	- .tall-status-hider {
	- position: absolute;
	- height: 5em;
	- margin-top: 10em;
	- line-height: 8em;
	- z-index: 2;
	- }
	-
	.tall-subject-hider {
	// position: absolute;
	padding-bottom: 0.5em;
	+
	+ &:not(.cw-status-hider) {
	+ position: absolute;
	+ margin-top: 10em;
	+ height: 5em;
	+ line-height: 8em;
	+ z-index: 2;
	+ }
	}

	& .status-unhider,
	& .cw-status-hider {
	overflow-wrap: break-word;
	text-wrap: pretty;

	svg {
	color: inherit;
	}
	}

	.toggle-button {
	padding: 0.5em;
	}

	&.-compact {
	align-items: start;
	flex-direction: row;

	& .body,
	& .attachments {
	max-height: 3.25em;
	}

	.body {
	overflow: hidden;
	white-space: normal;
	min-width: 5em;
	flex: 5 1 auto;
	mask-size: auto 3.5em, auto auto;
	mask-position: 0 0, 0 0;
	mask-repeat: repeat-x, repeat;
	mask-image: linear-gradient(to bottom, white 2em, transparent 3em);

	/* Autoprefixed seem to ignore this one, and also syntax is different */
	/* stylelint-disable mask-composite */
	/* stylelint-disable declaration-property-value-no-unknown */
	/* stylelint-disable scss/declaration-property-value-no-unknown */

	/* TODO check if this is still needed */
	mask-composite: xor;
	/* stylelint-enable scss/declaration-property-value-no-unknown */
	/* stylelint-enable declaration-property-value-no-unknown */
	/* stylelint-enable mask-composite */
	mask-composite: exclude;
	}

	.attachments {
	margin-top: 0;
	flex: 1 1 0;
	min-width: 5em;
	height: 100%;
	margin-left: 0.5em;
	}

	.summary-wrapper {
	.summary::after {
	content: ": ";
	}

	line-height: inherit;
	margin: 0;
	border: none;
	}

	.text-wrapper {
	display: inline-block;
	width: 100%;
	}
	}
	}
	diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
	index f724f24139..b611d69b89 100644
	--- a/src/components/status_body/status_body.vue
	+++ b/src/components/status_body/status_body.vue
	@@ -1,73 +1,72 @@
	<template>
	<div
	class="StatusBody"
	:class="{ '-compact': compact }"
	>
	<div class="body">
	<div
	- v-if="status.summary_raw_html"
	+ v-if="hasSubject"
	class="summary-wrapper"
	- :class="{ '-tall': (longSubject && !showingLongSubject) }"
	+ :class="{ '-tall': (hasLongSubject && !showingLongSubject) }"
	>
	<RichContent
	class="media-body summary"
	:faint="compact"
	:html="status.summary_raw_html"
	:emoji="status.emojis"
	:is-local="status.isLocal"
	:allow-non-square-emoji="allowNonSquareEmoji"
	/>
	<button
	- v-show="longSubject && showingLongSubject"
	+ v-show="hasLongSubject && showingLongSubject"
	class="button-unstyled -link tall-subject-hider"
	@click.prevent="toggleShowingLongSubject"
	>
	{{ $t("status.hide_full_subject") }}
	</button>
	<button
	- v-show="longSubject && !showingLongSubject"
	+ v-show="hasLongSubject && !showingLongSubject"
	class="button-unstyled -link tall-subject-hider"
	@click.prevent="toggleShowingLongSubject"
	>
	{{ $t("status.show_full_subject") }}
	</button>
	</div>
	<div
	class="text-wrapper"
	- :class="{'-tall-status': hideTallStatus, '-expanded': showingMore}"
	+ :class="{'-tall-status': hideTallStatus, '-hidden': shouldHide, '-expanded': showingMore}"
	>
	<RichContent
	- v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
	+ v-if="!(singleLine && hasSubject) && !shouldHide"
	:class="{ '-single-line': singleLine }"
	class="text media-body"
	:html="status.raw_html"
	:collapse="collapse"
	:emoji="status.emojis"
	:handle-links="true"
	:faint="compact"
	:greentext="mergedConfig.greentext"
	:attentions="status.attentions"
	:is-local="status.is_local"
	:allow-non-square-emoji="allowNonSquareEmoji"
	@parse-ready="onParseReady"
	/>
	<div
	- v-show="shouldShowToggle"
	+ v-show="shouldShowExpandToggle"
	:class="toggleButtonClasses"
	>
	<button
	class="btn button-default toggle-button"
	- :class="{ '-focused': focused }"
	:aria-expanded="showingMore"
	@click.prevent="toggleShowMore"
	>
	{{ toggleText }}
	</button>
	</div>
	</div>
	</div>
	<slot v-if="!hideSubjectStatus" />
	</div>
	</template>
	<script src="./status_body.js"></script>
	<style lang="scss" src="./status_body.scss" />
	diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
	index 2186498ef7..1cd3fc7b4a 100644
	--- a/src/components/status_content/status_content.js
	+++ b/src/components/status_content/status_content.js
	@@ -1,159 +1,119 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { mapState } from 'vuex'

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

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

	import { 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,
	- }
	+ props: {
	+ status: {
	+ // Main thing
	+ type: Object,
	+ required: true,
	+ },
	+ compact: {
	+ // Resizes emoji and minimizes vertical space used
	+ // Primarily used for showing status in react notifications
	+ type: Boolean,
	+ default: false,
	+ },
	+ collapse: {
	+ // replaces newlines with spaces
	+ type: Boolean,
	+ default: false,
	+ },
	+ singleLine: {
	+ // Show entire thing (subject and content) in a single line
	+ // Primarily used in chats
	+ type: Boolean,
	+ default: false,
	+ },
	+ inConversation: {
	+ // Whether status content is being shown in an (open) conversation
	+ // Used to control whether to display attachments or not
	+ type: Boolean,
	+ default: false,
	+ },
	},
	+ emits: ['parseReady', 'mediaplay', 'mediapause'],
	computed: {
	- ...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)
	+ !this.fullContent &&
	+ ((this.mergedConfig.hideAttachments && !this.inConversation) \|\|
	+ (this.mergedConfig.hideAttachmentsInConv && this.inConversation))
	)
	},
	nsfwClickthrough() {
	if (!this.status.nsfw) {
	return false
	}
	- if (this.status.summary && this.localCollapseSubjectDefault) {
	+ if (this.status.summary && this.mergedConfig.collapseMessageWithSubject) {
	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,
	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_content/status_content.vue b/src/components/status_content/status_content.vue
	index 6dc80b8a5f..9732908725 100644
	--- a/src/components/status_content/status_content.vue
	+++ b/src/components/status_content/status_content.vue
	@@ -1,74 +1,68 @@
	<template>
	<div
	class="StatusContent"
	:class="{ '-compact': compact }"
	>
	<slot name="header" />
	<StatusBody
	:status="status"
	:compact="compact"
	:single-line="singleLine"
	- :showing-tall="showingTall"
	- :expanding-subject="expandingSubject"
	- :showing-long-subject="showingLongSubject"
	- :toggle-showing-tall="toggleShowingTall"
	- :toggle-expanding-subject="toggleExpandingSubject"
	- :toggle-showing-long-subject="toggleShowingLongSubject"
	:collapse="collapse"
	@parse-ready="$emit('parseReady', $event)"
	>
	<div v-if="status.poll && status.poll.options && !compact">
	<Poll
	:base-poll="status.poll"
	:emoji="status.emojis"
	/>
	</div>

	<div
	v-else-if="status.poll && status.poll.options && compact"
	class="poll-icon"
	>
	<FAIcon
	icon="poll-h"
	size="2x"
	/>
	</div>

	<Gallery
	v-if="status.attachments.length !== 0"
	class="attachments media-body"
	:compact="compact"
	:nsfw="nsfwClickthrough"
	:attachments="status.attachments"
	:limit="compact ? 1 : 0"
	:size="attachmentSize"
	- @play="$emit('mediaplay', attachment.id)"
	- @pause="$emit('mediapause', attachment.id)"
	+ @play="$emit('mediaplay')"
	+ @pause="$emit('mediapause')"
	/>

	<div
	- v-if="statusCard && !noHeading && !compact"
	+ v-if="statusCard && !compact"
	class="link-preview media-body"
	>
	<link-preview
	:card="status.card"
	:size="attachmentSize"
	:nsfw="nsfwClickthrough"
	/>
	</div>
	</StatusBody>
	<slot name="footer" />
	</div>
	</template>

	<script src="./status_content.js"></script>
	<style lang="scss">
	.StatusContent {
	flex: 1;
	min-width: 0;

	.poll-icon {
	margin: 0.5em;
	}
	}
	</style>
	diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
	index ad0c0039ba..bbb81b059c 100644
	--- a/src/components/thread_tree/thread_tree.js
	+++ b/src/components/thread_tree/thread_tree.js
	@@ -1,98 +1,93 @@
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faAngleDoubleDown,
	faAngleDoubleRight,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faAngleDoubleDown, faAngleDoubleRight)

	const ThreadTree = {
	components: {},
	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,
	},
	+ emits: ['suspendableStateChange'],
	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/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
	index 4ffe463feb..f043158773 100644
	--- a/src/components/thread_tree/thread_tree.vue
	+++ b/src/components/thread_tree/thread_tree.vue
	@@ -1,135 +1,125 @@
	<template>
	<article class="thread-tree">
	- <status
	+ <Status
	:key="status.id"
	ref="statusComponent"
	:inline-expanded="collapsable && isExpanded"
	:statusoid="status"
	:expandable="!isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:focused="isFocusedFunction(status.id)"
	:in-conversation="isExpanded"
	:highlight="highlight"
	:replies="getReplies(status.id)"
	:in-profile="inProfile"
	:profile-user-id="profileUserId"
	class="conversation-status conversation-status-treeview status-fadein panel-body"

	:simple-tree="simple"
	:controlled-thread-display-status="threadDisplayStatus[status.id]"
	:controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"

	- :controlled-showing-tall="currentProp.showingTall"
	- :controlled-expanding-subject="currentProp.expandingSubject"
	- :controlled-showing-long-subject="currentProp.showingLongSubject"
	- :controlled-replying="currentProp.replying"
	- :controlled-media-playing="currentProp.mediaPlaying"
	- :controlled-toggle-showing-tall="() => toggleCurrentProp('showingTall')"
	- :controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
	- :controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
	- :controlled-toggle-replying="() => toggleCurrentProp('replying')"
	- :controlled-set-media-playing="(newVal) => setCurrentProp('mediaPlaying', newVal)"
	:dive="dive ? () => dive(status.id) : undefined"

	@goto="setHighlight"
	@toggle-expanded="toggleExpanded"
	+ @suspendable-state-change="e => $emit('suspendableStateChange', e)"
	/>
	<div
	v-if="currentReplies.length && threadShowing"
	class="thread-tree-replies"
	>
	- <thread-tree
	+ <ThreadTree
	v-for="replyStatus in currentReplies"
	:key="replyStatus.id"
	ref="childComponent"
	:depth="depth + 1"
	:status="replyStatus"

	:in-profile="inProfile"
	:conversation="conversation"
	:collapsable="collapsable"
	:is-expanded="isExpanded"
	:pinned-status-ids-object="pinnedStatusIdsObject"
	:profile-user-id="profileUserId"

	:is-focused-function="isFocusedFunction"
	:get-replies="getReplies"
	:highlight="highlight"
	:set-highlight="setHighlight"
	:toggle-expanded="toggleExpanded"

	:simple="simple"
	:toggle-thread-display="toggleThreadDisplay"
	:thread-display-status="threadDisplayStatus"
	:show-thread-recursively="showThreadRecursively"
	:total-reply-count="totalReplyCount"
	:total-reply-depth="totalReplyDepth"
	- :status-content-properties="statusContentProperties"
	- :set-status-content-property="setStatusContentProperty"
	- :toggle-status-content-property="toggleStatusContentProperty"
	:dive="dive"
	+
	+ @suspendable-state-change="e => $emit('suspendableStateChange', e)"
	/>
	</div>
	<div
	v-if="currentReplies.length && !threadShowing"
	class="thread-tree-replies thread-tree-replies-hidden"
	>
	<i18n-t
	v-if="simple"
	scope="global"
	tag="button"
	keypath="status.thread_follow_with_icon"
	class="button-unstyled -link thread-tree-show-replies-button"
	@click.prevent="dive(status.id)"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-right"
	/>
	</template>
	<template #text>
	<span>
	{{ $t('status.thread_follow', { numStatus: totalReplyCount[status.id] }, totalReplyCount[status.id]) }}
	</span>
	</template>
	</i18n-t>
	<i18n-t
	v-else
	scope="global"
	tag="button"
	keypath="status.thread_show_full_with_icon"
	class="button-unstyled -link thread-tree-show-replies-button"
	@click.prevent="showThreadRecursively(status.id)"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-down"
	/>
	</template>
	<template #text>
	<span>
	{{ $t('status.thread_show_full', { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }, totalReplyCount[status.id]) }}
	</span>
	</template>
	</i18n-t>
	</div>
	</article>
	</template>

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

	<style lang="scss">
	.thread-tree-replies {
	margin-left: var(--status-margin);
	border-left: 2px solid var(--border);
	}

	.thread-tree-replies-hidden {
	padding: var(--status-margin);

	/* Make the button stretch along the whole row */
	display: flex;
	align-items: stretch;
	flex-direction: column;
	}
	</style>

File Metadata

Mime Type: text/x-diff
Expires: Sat, Jul 18, 11:05 PM (1 d, 8 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1695156
Default Alt Text: (153 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions