No OneTemporary
Actions

Authored By

Unknown

Size

76 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
	index caeb2aea70..2fef86c0af 100644
	--- a/src/components/chat/chat.js
	+++ b/src/components/chat/chat.js
	@@ -1,419 +1,419 @@
	-import _ from 'lodash'
	+import { throttle } from 'lodash'
	import { mapState as mapPiniaState } from 'pinia'
	import { mapGetters, mapState } from 'vuex'

	import { WSConnectionStatus } from '../../services/api/api.service.js'
	import chatService from '../../services/chat_service/chat_service.js'
	import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
	import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
	import ChatMessage from '../chat_message/chat_message.vue'
	import ChatTitle from '../chat_title/chat_title.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import {
	getNewTopPosition,
	getScrollPosition,
	isBottomedOut,
	isScrollable,
	} from './chat_layout_utils.js'

	import { useInterfaceStore } from 'src/stores/interface.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 Chat = {
	components: {
	ChatMessage,
	ChatTitle,
	PostStatusForm,
	},
	data() {
	return {
	jumpToBottomButtonVisible: false,
	hoveredMessageChainId: undefined,
	lastScrollPosition: {},
	scrollableContainerHeight: '100%',
	errorLoadingChat: false,
	messageRetriers: {},
	}
	},
	created() {
	this.startFetching()
	window.addEventListener('resize', this.handleResize)
	},
	mounted() {
	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,
	)
	this.$store.dispatch('clearCurrentChat')
	},
	computed: {
	recipient() {
	return this.currentChat && this.currentChat.account
	},
	recipientId() {
	return this.$route.params.recipient_id
	},
	formPlaceholder() {
	if (this.recipient) {
	return this.$t('chats.message_user', {
	nickname: this.recipient.screen_name_ui,
	})
	} else {
	return ''
	}
	},
	chatViewItems() {
	return chatService.getView(this.currentChatMessageService)
	},
	newMessageCount() {
	return (
	this.currentChatMessageService &&
	this.currentChatMessageService.newMessageCount
	)
	},
	streamingEnabled() {
	return (
	this.mergedConfig.useStreamingApi &&
	this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	)
	},
	...mapGetters([
	'currentChat',
	'currentChatMessageService',
	'findOpenedChatByRecipientId',
	'mergedConfig',
	]),
	...mapPiniaState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	...mapState({
	backendInteractor: (state) => state.api.backendInteractor,
	mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
	currentUser: (state) => state.users.currentUser,
	}),
	},
	watch: {
	chatViewItems() {
	// 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 = this.bottomedOut(BOTTOMED_OUT_OFFSET)
	this.$nextTick(() => {
	if (bottomedOutBeforeUpdate) {
	this.scrollDown()
	}
	})
	},
	$route: function () {
	this.startFetching()
	},
	mastoUserSocketStatus(newValue) {
	if (newValue === WSConnectionStatus.JOINED) {
	this.fetchChat({ isFirstFetch: true })
	}
	},
	},
	methods: {
	// Used to animate the avatar near the first message of the message chain when any message belonging to the chain is hovered
	onMessageHover({ isHovered, messageChainId }) {
	this.hoveredMessageChainId = isHovered ? messageChainId : undefined
	},
	onFilesDropped() {
	this.$nextTick(() => {
	this.handleResize()
	})
	},
	handleVisibilityChange() {
	this.$nextTick(() => {
	if (!document.hidden && this.bottomedOut(BOTTOMED_OUT_OFFSET)) {
	this.scrollDown({ forceRead: true })
	}
	})
	},
	// "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
	handleResize(opts = {}) {
	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 && !this.bottomedOut()) {
	this.$nextTick(() => {
	window.scrollBy({ top: -Math.trunc(diff) })
	})
	}
	this.lastScrollPosition = getScrollPosition()
	})
	},
	scrollDown(options = {}) {
	const { behavior = 'auto', forceRead = false } = options
	this.$nextTick(() => {
	window.scrollTo({
	top: document.documentElement.scrollHeight,
	behavior,
	})
	})
	if (forceRead) {
	this.readChat()
	}
	},
	readChat() {
	if (
	!(
	this.currentChatMessageService && this.currentChatMessageService.maxId
	)
	) {
	return
	}
	if (document.hidden) {
	return
	}
	const lastReadId = this.currentChatMessageService.maxId
	this.$store.dispatch('readChat', {
	id: this.currentChat.id,
	lastReadId,
	})
	},
	bottomedOut(offset) {
	return isBottomedOut(offset)
	},
	reachedTop() {
	return window.scrollY <= 0
	},
	cullOlderCheck() {
	window.setTimeout(() => {
	if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.$store.dispatch(
	'cullOlderMessages',
	this.currentChatMessageService.chatId,
	)
	}
	}, 5000)
	},
	- handleScroll: _.throttle(function () {
	+ handleScroll: throttle(function () {
	this.lastScrollPosition = getScrollPosition()
	if (!this.currentChat) {
	return
	}

	if (this.reachedTop()) {
	this.fetchChat({ maxId: this.currentChatMessageService.minId })
	} else if (this.bottomedOut(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),
	})
	},
	fetchChat({ isFirstFetch = false, fetchLatest = false, maxId }) {
	const chatMessageService = this.currentChatMessageService
	if (!chatMessageService) {
	return
	}
	if (fetchLatest && this.streamingEnabled) {
	return
	}

	const chatId = chatMessageService.chatId
	const fetchOlderMessages = !!maxId
	const sinceId = fetchLatest && chatMessageService.maxId

	return this.backendInteractor
	.chatMessages({ id: chatId, maxId, sinceId })
	.then((messages) => {
	// Clear the current chat in case we're recovering from a ws connection loss.
	if (isFirstFetch) {
	chatService.clear(chatMessageService)
	}

	const positionBeforeUpdate = getScrollPosition()
	this.$store
	.dispatch('addChatMessages', { chatId, messages })
	.then(() => {
	this.$nextTick(() => {
	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.currentChatMessageService.minId,
	})
	}
	})
	})
	})
	},
	async startFetching() {
	let chat = this.findOpenedChatByRecipientId(this.recipientId)
	if (!chat) {
	try {
	chat = await this.backendInteractor.getOrCreateChat({
	accountId: this.recipientId,
	})
	} catch (e) {
	console.error('Error creating or getting a chat', e)
	this.errorLoadingChat = true
	}
	}
	if (chat) {
	this.$nextTick(() => {
	this.scrollDown({ forceRead: true })
	})
	this.$store.dispatch('addOpenedChat', { chat })
	this.doStartFetching()
	}
	},
	doStartFetching() {
	this.$store.dispatch('startFetchingCurrentChat', {
	fetcher: () =>
	promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000),
	})
	this.fetchChat({ isFirstFetch: true })
	},
	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 })
	})
	},
	sendMessage({ status, media, idempotencyKey }) {
	const params = {
	id: this.currentChat.id,
	content: status,
	idempotencyKey,
	}

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

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

	this.$store
	.dispatch('addChatMessages', {
	chatId: this.currentChat.id,
	messages: [fakeMessage],
	})
	.then(() => {
	this.handleAttachmentPosting()
	})

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

	this.backendInteractor
	.sendChatMessage(params)
	.then((data) => {
	this.$store.dispatch('addChatMessages', {
	chatId: this.currentChat.id,
	updateMaxId: false,
	messages: [{ ...data, fakeId: fakeMessage.id }],
	})

	return data
	})
	.catch((error) => {
	console.error('Error sending message', error)
	this.$store.dispatch('handleMessageError', {
	chatId: this.currentChat.id,
	fakeId: fakeMessage.id,
	isRetry: retriesLeft !== MAX_RETRIES,
	})
	if (
	(error.statusCode >= 500 && error.statusCode < 600) \|\|
	error.message === 'Failed to fetch'
	) {
	this.messageRetriers[fakeMessage.id] = setTimeout(
	() => {
	this.doSendMessage({
	params,
	fakeMessage,
	retriesLeft: retriesLeft - 1,
	})
	},
	1000 * 2 ** (MAX_RETRIES - retriesLeft),
	)
	}
	return {}
	})

	return Promise.resolve(fakeMessage)
	},
	goBack() {
	this.$router.push({
	name: 'chats',
	params: { username: this.currentUser.screen_name },
	})
	},
	},
	}

	export default Chat
	diff --git a/src/components/edit_status_modal/edit_status_modal.js b/src/components/edit_status_modal/edit_status_modal.js
	index 88e92c1564..5922e51677 100644
	--- a/src/components/edit_status_modal/edit_status_modal.js
	+++ b/src/components/edit_status_modal/edit_status_modal.js
	@@ -1,61 +1,61 @@
	-import get from 'lodash/get'
	+import { get } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	import Modal from '../modal/modal.vue'

	import { useEditStatusStore } from 'src/stores/editStatus.js'

	const EditStatusModal = {
	components: {
	EditStatusForm: defineAsyncComponent(
	() => import('src/components/edit_status_form/edit_status_form.vue'),
	),
	Modal,
	},
	data() {
	return {
	resettingForm: false,
	}
	},
	computed: {
	isLoggedIn() {
	return !!this.$store.state.users.currentUser
	},
	modalActivated() {
	return useEditStatusStore().modalActivated
	},
	isFormVisible() {
	return this.isLoggedIn && !this.resettingForm && this.modalActivated
	},
	params() {
	return useEditStatusStore().params \|\| {}
	},
	},
	watch: {
	params(newVal, oldVal) {
	if (get(newVal, 'statusId') !== get(oldVal, 'statusId')) {
	this.resettingForm = true
	this.$nextTick(() => {
	this.resettingForm = false
	})
	}
	},
	isFormVisible(val) {
	if (val) {
	this.$nextTick(
	() => this.$el && this.$el.querySelector('textarea').focus(),
	)
	}
	},
	},
	methods: {
	closeModal() {
	this.$refs.editStatusForm.requestClose()
	},
	doCloseModal() {
	useEditStatusStore().closeEditStatusModal()
	},
	},
	}

	export default EditStatusModal
	diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
	index 091b056e5f..90326da513 100644
	--- a/src/components/post_status_modal/post_status_modal.js
	+++ b/src/components/post_status_modal/post_status_modal.js
	@@ -1,62 +1,62 @@
	-import get from 'lodash/get'
	+import { get } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	import Modal from '../modal/modal.vue'

	import { usePostStatusStore } from 'src/stores/post_status.js'

	const PostStatusModal = {
	components: {
	PostStatusForm: defineAsyncComponent(
	() => import('src/components/post_status_form/post_status_form.vue'),
	),
	Modal,
	},
	data() {
	return {
	resettingForm: false,
	}
	},
	computed: {
	isLoggedIn() {
	return !!this.$store.state.users.currentUser
	},
	modalActivated() {
	return usePostStatusStore().modalActivated
	},
	isFormVisible() {
	return this.isLoggedIn && !this.resettingForm && this.modalActivated
	},
	params() {
	return usePostStatusStore().params \|\| {}
	},
	},
	watch: {
	params(newVal, oldVal) {
	if (get(newVal, 'repliedUser.id') !== get(oldVal, 'repliedUser.id')) {
	this.resettingForm = true
	this.$nextTick(() => {
	this.resettingForm = false
	})
	}
	},
	isFormVisible(val) {
	if (val) {
	this.$nextTick(
	() => this.$el && this.$el.querySelector('textarea').focus(),
	)
	}
	},
	},
	methods: {
	closeModal() {
	usePostStatusStore().closePostStatusModal()
	},
	resetAndClose() {
	usePostStatusStore().resetPostStatusModal()
	usePostStatusStore().closePostStatusModal()
	},
	},
	}

	export default PostStatusModal
	diff --git a/src/components/search/search.js b/src/components/search/search.js
	index b8812d0acd..23710b3906 100644
	--- a/src/components/search/search.js
	+++ b/src/components/search/search.js
	@@ -1,132 +1,131 @@
	-import { uniqBy } from 'lodash'
	-import map from 'lodash/map'
	+import { uniqBy, map } from 'lodash'

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

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

	library.add(faCircleNotch, faSearch)

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

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

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

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

	this.statusesOffset = 0
	this.lastStatusFetchCount = 0
	}

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

	const oldLength = this.statuses.length

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

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

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

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

	export default Search
	diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
	index cb198619f4..3b82bbb4c4 100644
	--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
	+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
	@@ -1,155 +1,153 @@
	-import get from 'lodash/get'
	-import map from 'lodash/map'
	-import reject from 'lodash/reject'
	+import { get, map, reject } from 'lodash'

	import withLoadMore from 'src/components/../hocs/with_load_more/with_load_more'
	import withSubscription from 'src/components/../hocs/with_subscription/with_subscription'
	import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
	import BlockCard from 'src/components/block_card/block_card.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue'
	import MuteCard from 'src/components/mute_card/mute_card.vue'
	import ProgressButton from 'src/components/progress_button/progress_button.vue'
	import SelectableList from 'src/components/selectable_list/selectable_list.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'

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

	const BlockList = withLoadMore({
	fetch: (props, $store) => $store.dispatch('fetchBlocks'),
	select: (props, $store) =>
	get($store.state.users.currentUser, 'blockIds', []),
	destroy: () => {
	/* no-op */
	},
	childPropName: 'items',
	})(SelectableList)

	const MuteList = withLoadMore({
	fetch: (props, $store) => $store.dispatch('fetchMutes'),
	select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
	destroy: () => {
	/* no-op */
	},
	childPropName: 'items',
	})(SelectableList)

	const DomainMuteList = withSubscription({
	fetch: (props, $store) => $store.dispatch('fetchDomainMutes'),
	select: (props, $store) =>
	get($store.state.users.currentUser, 'domainMutes', []),
	childPropName: 'items',
	})(SelectableList)

	const MutesAndBlocks = {
	data() {
	return {
	activeTab: 'profile',
	}
	},
	created() {
	useOAuthTokensStore().fetchTokens()
	useInstanceStore().getKnownDomains()
	},
	components: {
	TabSwitcher,
	BlockList,
	MuteList,
	DomainMuteList,
	BlockCard,
	MuteCard,
	DomainMuteCard,
	ProgressButton,
	Autosuggest,
	Checkbox,
	},
	computed: {
	knownDomains() {
	return useInstanceStore().knownDomains
	},
	user() {
	return this.$store.state.users.currentUser
	},
	},
	methods: {
	importFollows(file) {
	return this.$store.state.api.backendInteractor
	.importFollows({ file })
	.then((status) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	importBlocks(file) {
	return this.$store.state.api.backendInteractor
	.importBlocks({ file })
	.then((status) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	generateExportableUsersContent(users) {
	// Get addresses
	return users
	.map((user) => {
	// check is it's a local user
	if (user && user.is_local) {
	// append the instance address
	return user.screen_name + '@' + location.hostname
	}
	return user.screen_name
	})
	.join('\n')
	},
	activateTab(tabName) {
	this.activeTab = tabName
	},
	filterUnblockedUsers(userIds) {
	return reject(userIds, (userId) => {
	const relationship = this.$store.getters.relationship(this.userId)
	return relationship.blocking \|\| userId === this.user.id
	})
	},
	filterUnMutedUsers(userIds) {
	return reject(userIds, (userId) => {
	const relationship = this.$store.getters.relationship(this.userId)
	return relationship.muting \|\| userId === this.user.id
	})
	},
	queryUserIds(query) {
	return this.$store
	.dispatch('searchUsers', { query })
	.then((users) => map(users, 'id'))
	},
	blockUsers(ids) {
	return this.$store.dispatch('blockUsers', ids)
	},
	unblockUsers(ids) {
	return this.$store.dispatch('unblockUsers', ids)
	},
	muteUsers(ids) {
	return this.$store.dispatch('muteUsers', ids)
	},
	unmuteUsers(ids) {
	return this.$store.dispatch('unmuteUsers', ids)
	},
	filterUnMutedDomains(urls) {
	return urls.filter((url) => !this.user.domainMutes.includes(url))
	},
	queryKnownDomains(query) {
	return new Promise((resolve) => {
	resolve(
	this.knownDomains.filter((url) => url.toLowerCase().includes(query)),
	)
	})
	},
	unmuteDomains(domains) {
	return this.$store.dispatch('unmuteDomains', domains)
	},
	},
	}

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

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

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

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

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

	export default StaffPanel
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index bcb5f9ddcc..d7a9d44037 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,603 +1,600 @@
	-import ldEscape from 'lodash/escape'
	-import isEqual from 'lodash/isEqual'
	-import merge from 'lodash/merge'
	-import ldUnescape from 'lodash/unescape'
	+import { escape as ldEscape, isEqual, merge, unescape as ldUnescape } from 'lodash'
	import { mapState } from 'pinia'

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

	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface'
	import { useMediaViewerStore } from 'src/stores/media_viewer'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { usePostStatusStore } from 'src/stores/post_status'
	import { useUserHighlightStore } from 'src/stores/user_highlight.js'

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

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

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

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

	export default {
	props: {
	// Enables all the options for profile editing, used in settings -> profile tab
	editable: {
	required: false,
	default: false,
	type: Boolean,
	},
	// ID of user to show data of
	userId: {
	required: true,
	type: String,
	},
	// Use a compact layout that hides bio, stats etc.
	hideBio: {
	required: false,
	default: false,
	type: Boolean,
	},
	// default - open profile, 'zoom' - zoom, function - call function
	avatarAction: {
	required: false,
	type: String,
	default: 'default',
	},
	// Show note editor if supported
	hasNoteEditor: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Show close icon (for popovers)
	showClose: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Show close icon (for popovers)
	showExpand: {
	required: false,
	type: Boolean,
	default: false,
	},
	// Disable forced 3:1 aspect ratio
	compact: {
	required: false,
	type: Boolean,
	default: false,
	},
	},
	components: {
	DialogModal,
	UserAvatar,
	Checkbox,
	RemoteFollow,
	ModerationTools,
	AccountActions,
	ProgressButton,
	FollowButton,
	Select,
	RichContent,
	UserLink,
	UserNote,
	UserTimedFilterModal,
	ColorInput,
	EmojiInput,
	ImageCropper,
	},
	data() {
	const user = this.$store.getters.findUser(this.userId)

	return {
	followRequestInProgress: false,

	// Editable stuff
	editImage: false,

	newName: user.name_unescaped,
	editingName: false,

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

	newAvatar: null,
	newAvatarFile: null,

	newBanner: null,
	newBannerFile: null,

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

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

	editingFields: false,
	}
	},
	created() {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	escapedNewBio() {
	return ldEscape(this.newBio).replace(/\n/g, '<br>')
	},
	somethingToSave() {
	if (this.newName !== this.user.name_unescaped) return true
	if (this.newBio !== ldUnescape(this.user.description)) return true
	if (this.newAvatar !== null) return true
	if (this.newBanner !== null) return true
	if (this.newActorType !== this.user.actor_type) return true
	if (this.newBirthday !== this.user.birthday) return true
	if (this.newShowBirthday !== this.user.show_birthday) return true
	if (this.newShowRole !== this.user.show_role) return true
	if (
	!isEqual(
	this.newFields,
	this.user.fields?.map((field) => ({
	name: field.name,
	value: field.value,
	})),
	)
	)
	return true
	return false
	},
	groupActorAvailable() {
	return useInstanceCapabilitiesStore().groupActorAvailable
	},
	availableActorTypes() {
	return this.groupActorAvailable
	? ['Person', 'Service', 'Group']
	: ['Person', 'Service']
	},
	user() {
	return this.$store.getters.findUser(this.userId)
	},
	role() {
	return this.user.role
	},
	relationship() {
	return this.$store.getters.relationship(this.userId)
	},
	isOtherUser() {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl() {
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn() {
	return this.$store.state.users.currentUser
	},
	dailyAvg() {
	const days = Math.ceil(
	(new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000),
	)
	return Math.round(this.user.statuses_count / days)
	},
	emoji() {
	return useEmojiStore().customEmoji.map((e) => ({
	shortcode: e.displayText,
	static_url: e.imageUrl,
	url: e.imageUrl,
	}))
	},
	userHighlightType: {
	get() {
	return useUserHighlightStore().get(this.user.screen_name).type
	},
	set(type) {
	if (type !== 'disabled') {
	useUserHighlightStore().setAndSave({
	user: this.user.screen_name,
	value: { type },
	})
	} else {
	useUserHighlightStore().unsetAndSave({ user: this.user.screen_name })
	}
	},
	},
	userHighlightColor: {
	get() {
	return useUserHighlightStore().get(this.user.screen_name).color
	},
	set(color) {
	useUserHighlightStore().setAndSave({
	user: this.user.screen_name,
	value: { color },
	})
	},
	},
	visibleRole() {
	if (!this.newShowRole) {
	return
	}
	const rights = this.user.rights
	if (!rights) {
	return
	}
	const validRole = rights.admin \|\| rights.moderator
	const roleTitle = rights.admin ? 'admin' : 'moderator'
	return validRole && roleTitle
	},
	hideFollowsCount() {
	return this.isOtherUser && this.user.hide_follows_count
	},
	hideFollowersCount() {
	return this.isOtherUser && this.user.hide_followers_count
	},
	showModerationMenu() {
	const privileges = this.loggedIn.privileges
	return (
	this.loggedIn.role === 'admin' \|\|
	privileges.includes('users_manage_activation_state') \|\|
	privileges.includes('users_delete') \|\|
	privileges.includes('users_manage_tags')
	)
	},
	hasNote() {
	return this.relationship.note
	},
	supportsNote() {
	return 'note' in this.relationship
	},
	muteExpiryAvailable() {
	return Object.hasOwn(this.user, 'mute_expires_at')
	},
	muteExpiry() {
	return this.user.mute_expires_at === false
	? this.$t('user_card.mute_expires_forever')
	: this.$t('user_card.mute_expires_at', [
	new Date(this.user.mute_expires_at).toLocaleString(),
	])
	},
	blockExpiryAvailable() {
	return Object.hasOwn(this.user, 'block_expires_at')
	},
	blockExpiry() {
	return this.user.block_expires_at == null
	? this.$t('user_card.block_expires_forever')
	: this.$t('user_card.block_expires_at', [
	new Date(this.user.mute_expires_at).toLocaleString(),
	])
	},
	formattedBirthday() {
	const browserLocale = localeService.internalToBrowserLocale(
	this.$i18n.locale,
	)
	return (
	this.user.birthday &&
	new Date(Date.parse(this.user.birthday)).toLocaleDateString(
	browserLocale,
	{ timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' },
	)
	)
	},
	formattedJoinDate() {
	const browserLocale = localeService.internalToBrowserLocale(
	this.$i18n.locale,
	)
	return (
	this.user.created_at &&
	new Date(Date.parse(this.user.created_at)).toLocaleDateString(
	browserLocale,
	{ timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' },
	)
	)
	},

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

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

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

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

	this.editImage = false
	}

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

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

	this.newAvatar = null
	this.newAvatarFile = null

	this.newBanner = null
	this.newBannerFile = null

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

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

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

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

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

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

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

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

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

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

	library.add(faCircleNotch)

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

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

	const defaultTabKey = 'statuses'

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

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

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

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

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

	export default UserProfile
	diff --git a/src/hocs/with_load_more/with_load_more.jsx b/src/hocs/with_load_more/with_load_more.jsx
	index 9cb9d78c4a..e839f796f8 100644
	--- a/src/hocs/with_load_more/with_load_more.jsx
	+++ b/src/hocs/with_load_more/with_load_more.jsx
	@@ -1,119 +1,119 @@
	// eslint-disable-next-line no-unused

	-import isEmpty from 'lodash/isEmpty'
	+import { isEmpty } from 'lodash'
	import { h } from 'vue'

	import { getComponentProps } from '../../services/component_utils/component_utils'
	import './with_load_more.scss'

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

	library.add(faCircleNotch)

	const withLoadMore =
	({
	fetch, // function to fetch entries and return a promise
	select, // function to select data from store
	unmounted, // function called at "destroyed" lifecycle
	childPropName = 'entries', // name of the prop to be passed into the wrapped component
	additionalPropNames = [], // additional prop name list of the wrapper component
	}) =>
	(WrappedComponent) => {
	const originalProps = Object.keys(getComponentProps(WrappedComponent))
	const props = originalProps
	.filter((v) => v !== childPropName)
	.concat(additionalPropNames)

	return {
	props,
	data() {
	return {
	loading: false,
	bottomedOut: false,
	error: false,
	entries: [],
	}
	},
	created() {
	window.addEventListener('scroll', this.scrollLoad)
	if (this.entries.length === 0) {
	this.fetchEntries()
	}
	},
	unmounted() {
	window.removeEventListener('scroll', this.scrollLoad)
	unmounted && unmounted(this.$props, this.$store)
	},
	methods: {
	// Entries is not a computed because computed can't track the dynamic
	// selector for changes and won't trigger after fetch.
	updateEntries() {
	this.entries = select(this.$props, this.$store) \|\| []
	},
	fetchEntries() {
	if (!this.loading) {
	this.loading = true
	this.error = false
	fetch(this.$props, this.$store)
	.then((newEntries) => {
	this.loading = false
	this.bottomedOut = isEmpty(newEntries)
	})
	.catch(() => {
	this.loading = false
	this.error = true
	})
	.finally(() => {
	this.updateEntries()
	})
	}
	},
	scrollLoad(e) {
	const bodyBRect = document.body.getBoundingClientRect()
	const height = Math.max(bodyBRect.height, -bodyBRect.y)
	if (
	this.loading === false &&
	this.bottomedOut === false &&
	this.$el.offsetHeight > 0 &&
	window.innerHeight + window.pageYOffset >= height - 750
	) {
	this.fetchEntries()
	}
	},
	},
	render() {
	const props = {
	...this.$props,
	[childPropName]: this.entries,
	}
	const children = this.$slots
	return (
	<div class="with-load-more">
	<WrappedComponent {...props}>{children}</WrappedComponent>
	<div class="with-load-more-footer">
	{this.error && (
	<button
	onClick={this.fetchEntries}
	class="button-unstyled -link -fullwidth alert error"
	>
	{this.$t('general.generic_error')}
	</button>
	)}
	{!this.error && this.loading && (
	<FAIcon spin icon="circle-notch" />
	)}
	{!this.error && !this.loading && !this.bottomedOut && (
	<a onClick={this.fetchEntries} role="button" tabindex="0">
	{this.$t('general.more')}
	</a>
	)}
	</div>
	</div>
	)
	},
	}
	}

	export default withLoadMore
	diff --git a/src/hocs/with_subscription/with_subscription.jsx b/src/hocs/with_subscription/with_subscription.jsx
	index 198be68623..7805161c6d 100644
	--- a/src/hocs/with_subscription/with_subscription.jsx
	+++ b/src/hocs/with_subscription/with_subscription.jsx
	@@ -1,94 +1,94 @@
	// eslint-disable-next-line no-unused

	-import isEmpty from 'lodash/isEmpty'
	+import { isEmpty } from 'lodash'
	import { h } from 'vue'

	import { getComponentProps } from '../../services/component_utils/component_utils'
	import './with_subscription.scss'

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

	library.add(faCircleNotch)

	const withSubscription =
	({
	fetch, // function to fetch entries and return a promise
	select, // function to select data from store
	childPropName = 'content', // name of the prop to be passed into the wrapped component
	additionalPropNames = [], // additional prop name list of the wrapper component
	}) =>
	(WrappedComponent) => {
	const originalProps = Object.keys(getComponentProps(WrappedComponent))
	const props = originalProps
	.filter((v) => v !== childPropName)
	.concat(additionalPropNames)

	return {
	props: [
	...props,
	'refresh', // boolean saying to force-fetch data whenever created
	],
	data() {
	return {
	loading: false,
	error: false,
	}
	},
	computed: {
	fetchedData() {
	return select(this.$props, this.$store)
	},
	},
	created() {
	if (this.refresh \|\| isEmpty(this.fetchedData)) {
	this.fetchData()
	}
	},
	methods: {
	fetchData() {
	if (!this.loading) {
	this.loading = true
	this.error = false
	fetch(this.$props, this.$store)
	.then(() => {
	this.loading = false
	})
	.catch(() => {
	this.error = true
	this.loading = false
	})
	}
	},
	},
	render() {
	if (!this.error && !this.loading) {
	const props = {
	...this.$props,
	[childPropName]: this.fetchedData,
	}
	const children = this.$slots
	return (
	<div class="with-subscription">
	<WrappedComponent {...props}>{children}</WrappedComponent>
	</div>
	)
	} else {
	return (
	<div class="with-subscription-loading">
	{this.error ? (
	<a onClick={this.fetchData} class="alert error">
	{this.$t('general.generic_error')}
	</a>
	) : (
	<FAIcon spin icon="circle-notch" />
	)}
	</div>
	)
	}
	},
	}
	}

	export default withSubscription
	diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
	index f7e2b0b086..2f8892f277 100644
	--- a/src/lib/persisted_state.js
	+++ b/src/lib/persisted_state.js
	@@ -1,265 +1,264 @@
	-import { cloneDeep, each, get, set } from 'lodash'
	-import merge from 'lodash.merge'
	+import { cloneDeep, each, get, set, merge } from 'lodash'

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

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

	let loaded = false

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

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

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

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

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

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

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

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

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

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

	return {}
	}

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

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

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

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

	loadedGuard.loaded = true
	resolveLoaded()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	return
	}
	}

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

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

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

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

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

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

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

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

	let afterDate = false

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

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

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

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

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

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

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

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

	return result
	}

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

	export default ChatService
	diff --git a/src/services/component_utils/component_utils.js b/src/services/component_utils/component_utils.js
	index 49a1108606..1973a79239 100644
	--- a/src/services/component_utils/component_utils.js
	+++ b/src/services/component_utils/component_utils.js
	@@ -1,8 +1,8 @@
	-import isFunction from 'lodash/isFunction'
	+import { isFunction } from 'lodash'

	const getComponentOptions = (Component) =>
	isFunction(Component) ? Component.options : Component

	const getComponentProps = (Component) => getComponentOptions(Component).props

	export { getComponentOptions, getComponentProps }
	diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js
	index 9fe62318c6..bdc07c1ec0 100644
	--- a/src/services/locale/locale.service.js
	+++ b/src/services/locale/locale.service.js
	@@ -1,51 +1,51 @@
	import ISO6391 from 'iso-639-1'
	-import _ from 'lodash'
	+import { map } from 'lodash'

	import languagesObject from '../../i18n/messages'

	const specialLanguageCodes = {
	pdc: 'en',
	ja_easy: 'ja',
	zh_Hant: 'zh-HANT',
	zh: 'zh-Hans',
	}

	const internalToBrowserLocale = (code) => specialLanguageCodes[code] \|\| code

	const internalToBackendLocale = (code) =>
	internalToBrowserLocale(code).replace('_', '-')
	const internalToBackendLocaleMulti = (codes) => {
	const langs = Array.isArray(codes) ? codes : [codes]
	return langs.map(internalToBackendLocale).join(',')
	}

	const getLanguageName = (code) => {
	const specialLanguageNames = {
	pdc: 'Pennsilfaanisch-Deitsch',
	ja_easy: 'やさしいにほんご',
	'nan-TW': '臺語（閩南語）',
	zh: '简体中文',
	zh_Hant: '繁體中文',
	}
	const languageName = specialLanguageNames[code] \|\| ISO6391.getNativeName(code)
	const browserLocale = internalToBrowserLocale(code)
	return (
	languageName.charAt(0).toLocaleUpperCase(browserLocale) +
	languageName.slice(1)
	)
	}

	-const languages = _.map(languagesObject.languages, (code) => ({
	+const languages = map(languagesObject.languages, (code) => ({
	code,
	name: getLanguageName(code),
	})).sort((a, b) => a.name.localeCompare(b.name))

	const localeService = {
	internalToBrowserLocale,
	internalToBackendLocale,
	internalToBackendLocaleMulti,
	languages,
	getLanguageName,
	}

	export default localeService
	diff --git a/src/stores/reports.js b/src/stores/reports.js
	index d2cd4fd7ce..d3acebcb46 100644
	--- a/src/stores/reports.js
	+++ b/src/stores/reports.js
	@@ -1,58 +1,58 @@
	-import filter from 'lodash/filter'
	+import { filter } from 'lodash'
	import { defineStore } from 'pinia'

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

	export const useReportsStore = defineStore('reports', {
	state: () => ({
	reportModal: {
	userId: null,
	statuses: [],
	preTickedIds: [],
	activated: false,
	},
	reports: {},
	}),
	actions: {
	openUserReportingModal({ userId, statusIds = [] }) {
	const preTickedStatuses = statusIds.map(
	(id) => window.vuex.state.statuses.allStatusesObject[id],
	)
	const preTickedIds = statusIds
	const statuses = preTickedStatuses.concat(
	filter(
	window.vuex.state.statuses.allStatuses,
	(status) =>
	status.user.id === userId && !preTickedIds.includes(status.id),
	),
	)

	this.reportModal.userId = userId
	this.reportModal.statuses = statuses
	this.reportModal.preTickedIds = preTickedIds
	this.reportModal.activated = true
	},
	closeUserReportingModal() {
	this.reportModal.activated = false
	},
	setReportState({ id, state }) {
	const oldState = this.reports[id].state
	this.reports[id].state = state
	window.vuex.state.api.backendInteractor
	.setReportState({ id, state })
	.catch((e) => {
	console.error('Failed to set report state', e)
	useInterfaceStore().pushGlobalNotice({
	level: 'error',
	messageKey: 'general.generic_error_message',
	messageArgs: [e.message],
	timeout: 5000,
	})
	this.reports[id].state = oldState
	})
	},
	addReport(report) {
	this.reports[report.id] = report
	},
	},
	})

File Metadata

Mime Type: text/x-diff
Expires: Mon, Nov 2, 3:15 AM (12 h, 8 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1803545
Default Alt Text: (76 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions