No OneTemporary
Actions

Size

33 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
	index 516741a336..8e5df8b1ea 100644
	--- a/src/components/chat_message/chat_message.js
	+++ b/src/components/chat_message/chat_message.js
	@@ -1,225 +1,223 @@
	import { mapState as mapPiniaState } from 'pinia'
	import { defineAsyncComponent } from 'vue'
	import { mapState } from 'vuex'

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

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

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

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

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

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

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

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

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

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

	export default ChatMessage
	diff --git a/src/components/chat_view/chat_view.js b/src/components/chat_view/chat_view.js
	index 8d45707f3d..f2b5618edb 100644
	--- a/src/components/chat_view/chat_view.js
	+++ b/src/components/chat_view/chat_view.js
	@@ -1,621 +1,635 @@
	import { get, maxBy, minBy, sortBy, throttle } from 'lodash'
	import { mapState as mapPiniaState } from 'pinia'
	import { nextTick } from 'vue'
	import { mapState } from 'vuex'

	import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
	import ChatTitle from 'src/components/chat_title/chat_title.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
	import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
	import {
	getNewTopPosition,
	getScrollPosition,
	isBottomedOut,
	isScrollable,
	} from './chat_layout_utils.js'

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

	import {
	chatMessages,
	deleteChatMessage,
	getOrCreateChat,
	readChat,
	sendChatMessage,
	} from 'src/api/chats.js'
	-import { WSConnectionStatus } from 'src/api/websocket.js'
	import { fetchConversation, fetchStatus } from 'src/api/public.js'
	+import { WSConnectionStatus } from 'src/api/websocket.js'

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

	library.add(faChevronDown, faChevronLeft)

	const BOTTOMED_OUT_OFFSET = 10
	const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
	const SAFE_RESIZE_TIME_OFFSET = 100
	const MARK_AS_READ_DELAY = 1500
	const MAX_RETRIES = 10

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

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

	// Conversation stuff
	explicitReplyStatus: null,

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

	// Internal network stuff
	fetcher: null,
	errorLoadingChat: false,
	messageRetriers: {},
	idempotencyKeyIndex: {},
	}
	},
	created() {
	if (this.testMode) return
	this.startFetching()
	},
	mounted() {
	window.addEventListener('resize', this.handleResize)
	window.addEventListener('scroll', this.handleScroll)
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	}

	this.$nextTick(() => {
	this.handleResize()
	})
	},
	unmounted() {
	window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('resize', this.handleResize)
	if (typeof document.hidden !== 'undefined')
	document.removeEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	},
	computed: {
	conversationId() {
	const status = this.$store.state.statuses.allStatusesObject[this.statusId]
	return get(
	status,
	'retweeted_status.statusnet_conversation_id',
	get(status, 'statusnet_conversation_id'),
	)
	},
	isConversation() {
	return this.statusId !== null
	},
	recipient() {
	return this.chat?.account
	},
	formPlaceholder() {
	if (this.recipient) {
	return this.$t('chats.message_user', {
	nickname: this.recipient.screen_name_ui,
	})
	} else {
	return ''
	}
	},

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

	// Global Stuff
	streamingEnabled() {
	if (this.isConversation) return false // Unsupported
	return (
	this.mergedConfig.useStreamingApi &&
	this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	)
	},
	...mapPiniaState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
	...mapState({
	mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
	currentUser: (state) => state.users.currentUser,
	}),
	},
	watch: {
	messages(old, neu) {
	if (old.length === neu.length) return
	// We don't want to scroll to the bottom on a new message when the user is viewing older messages.
	// Therefore we need to know whether the scroll position was at the bottom before the DOM update.
	const bottomedOutBeforeUpdate = isBottomedOut(BOTTOMED_OUT_OFFSET)
	this.$nextTick(() => {
	if (bottomedOutBeforeUpdate) {
	this.scrollDown()
	}
	})
	},
	async replyStatus(newVal) {
	await nextTick() // wait for changes to propagate to postStatusForm
	this.$refs.postStatusForm.update()
	},
	$route: async function (newVal) {
	if (this.messagesIndex[newVal.params.statusId]) {
	- const focused = document.getElementById(`chatmessage-${this.$route.params.statusId}`)
	+ const focused = document.getElementById(
	+ `chatmessage-${this.$route.params.statusId}`,
	+ )
	if (focused?.getBoundingClientRect == null) return
	- const bottomBoundary = window.innerHeight - this.$refs.footer.clientHeight
	- const topBoundary = this.$refs.header.clientHeight + document.getElementById('nav').clientHeight
	- const margin = Number(window.getComputedStyle(this.$refs.messageList.$el).gap.replace('px',''))
	+ const bottomBoundary =
	+ window.innerHeight - this.$refs.footer.clientHeight
	+ const topBoundary =
	+ this.$refs.header.clientHeight +
	+ document.getElementById('nav').clientHeight
	+ const margin = Number(
	+ window
	+ .getComputedStyle(this.$refs.messageList.$el)
	+ .gap.replace('px', ''),
	+ )

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

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

	return
	}

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

	if (!isNewMessage) return

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

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

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

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

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

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

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

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

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

	const fetchOlderMessages = !!maxId
	if (fetchOlderMessages) {
	this.handleScrollUp(positionBeforeUpdate)
	}

	// In vertical screens, the first batch of fetched messages may not always take the
	// full height of the scrollable container.
	// If this is the case, we want to fetch the messages until the scrollable container
	// is fully populated so that the user has the ability to scroll up and load the history.
	if (!isScrollable() && messages.length > 0) {
	this.fetchChat({
	maxId: this.minId,
	})
	}
	},
	async startFetching() {
	if (!this.isConversation) {
	try {
	const { data } = await getOrCreateChat({
	accountId: this.recipientId,
	credentials: useOAuthStore().token,
	})
	this.$store.commit('addNewUsers', [data.account])
	data.account = this.$store.getters.findUser(data.account.id)
	this.chat = data
	} catch (e) {
	console.error('Error creating or getting a chat', e)
	this.errorLoadingChat = true
	}
	}

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

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

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

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

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

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

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

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

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

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

	this.handleAttachmentPosting()

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

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

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

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

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

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

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

	// Event handlers
	onPosted(data) {
	this.explicitReplyStatus = null
	- this.$router.push({ name: 'conversation2', params: { statusId: data.id } })
	+ this.$router.push({
	+ name: 'conversation2',
	+ params: { statusId: data.id },
	+ })
	},
	handleVisibilityChange() {
	this.$nextTick(() => {
	if (!document.hidden && isBottomedOut(BOTTOMED_OUT_OFFSET)) {
	this.scrollDown({ forceRead: true })
	}
	})
	},
	onFilesDropped() {
	this.$nextTick(() => {
	this.handleResize()
	})
	},
	handleResize(opts = {}) {
	// "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
	const { delayed = false } = opts

	if (delayed) {
	setTimeout(() => {
	this.handleResize({ ...opts, delayed: false })
	}, SAFE_RESIZE_TIME_OFFSET)
	return
	}

	this.$nextTick(() => {
	const { offsetHeight = undefined } = getScrollPosition()
	const diff = offsetHeight - this.lastScrollPosition.offsetHeight
	if (diff !== 0 && !isBottomedOut()) {
	this.$nextTick(() => {
	window.scrollBy({ top: -Math.trunc(diff) })
	})
	}
	this.lastScrollPosition = getScrollPosition()
	})
	},
	handleScroll: throttle(function () {
	if (!this.chat) {
	return
	}
	this.lastScrollPosition = getScrollPosition()

	if (this.hasReachedTop()) {
	this.fetchChat({ maxId: this.minId })
	} else if (isBottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.jumpToBottomButtonVisible = false
	this.cullOlderCheck()
	if (this.newMessageCount > 0) {
	// Use a delay before marking as read to prevent situation where new messages
	// arrive just as you're leaving the view and messages that you didn't actually
	// get to see get marked as read.
	window.setTimeout(() => {
	// Don't mark as read if the element doesn't exist, user has left chat view
	if (this.$el) this.readChat()
	}, MARK_AS_READ_DELAY)
	}
	} else {
	this.jumpToBottomButtonVisible = true
	}
	}, 200),
	handleScrollUp(positionBeforeLoading) {
	const positionAfterLoading = getScrollPosition()

	window.scrollTo({
	top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
	})
	},
	handleAttachmentPosting() {
	this.$nextTick(() => {
	this.handleResize()
	// When the posting form size changes because of a media attachment, we need an extra resize
	// to account for the potential delay in the DOM update.
	this.scrollDown({ forceRead: true })
	})
	},

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

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

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

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

	export default Chat
	diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
	index 77eb4e7912..0df50031d6 100644
	--- a/src/components/scope_selector/scope_selector.js
	+++ b/src/components/scope_selector/scope_selector.js
	@@ -1,94 +1,94 @@
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faEnvelope,
	faGlobe,
	faLock,
	faLockOpen,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faEnvelope, faGlobe, faLock, faLockOpen)

	const ScopeSelector = {
	props: {
	showAll: {
	required: true,
	type: Boolean,
	},
	userDefault: {
	required: true,
	type: String,
	},
	originalScope: {
	required: false,
	type: String,
	},
	initialScope: {
	required: false,
	type: String,
	},
	unstyled: {
	required: false,
	type: Boolean,
	default: true,
	},
	},
	emits: ['change'],
	data() {
	return {
	currentScope: this.initialScope,
	}
	},
	computed: {
	showNothing() {
	return (
	!this.showPublic &&
	!this.showUnlisted &&
	!this.showPrivate &&
	!this.showDirect
	)
	},
	showPublic() {
	return this.originalScope !== 'direct' && this.shouldShow('public')
	},
	showUnlisted() {
	return this.originalScope !== 'direct' && this.shouldShow('unlisted')
	},
	showPrivate() {
	return this.originalScope !== 'direct' && this.shouldShow('private')
	},
	showDirect() {
	return this.shouldShow('direct')
	},
	css() {
	const style = this.unstyled ? 'button-unstyled' : 'button-default'
	return {
	public: [style, { toggled: this.currentScope === 'public' }],
	unlisted: [style, { toggled: this.currentScope === 'unlisted' }],
	private: [style, { toggled: this.currentScope === 'private' }],
	direct: [style, { toggled: this.currentScope === 'direct' }],
	}
	},
	},
	methods: {
	shouldShow(scope) {
	return (
	this.showAll \|\|
	this.currentScope === scope \|\|
	this.originalScope === scope \|\|
	this.userDefault === scope \|\|
	scope === 'direct'
	)
	},
	changeVis(scope) {
	this.currentScope = scope
	this.$emit('change', scope)
	- }
	+ },
	},
	watch: {
	originalScope(newVal) {
	this.currentScope = newVal
	- }
	- }
	+ },
	+ },
	}

	export default ScopeSelector
	diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
	index fe3cd3ed66..842944965a 100644
	--- a/src/components/status_action_buttons/action_button.js
	+++ b/src/components/status_action_buttons/action_button.js
	@@ -1,173 +1,173 @@
	import Popover from 'src/components/popover/popover.vue'
	import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
	import EmojiPicker from '../emoji_picker/emoji_picker.vue'

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

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

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

	faChevronRight,
	faChevronDown,

	faReply,
	faRetweet,
	faStar,
	faStarRegular,
	faFaceSmileBeam,

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

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

File Metadata

Mime Type: text/x-diff
Expires: Sun, Aug 9, 12:09 AM (1 d, 20 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1724067
Default Alt Text: (33 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions