No OneTemporary
Actions

Authored By

Unknown

Size

44 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
	index 992a2b740b..412a72d084 100644
	--- a/src/components/draft/draft.js
	+++ b/src/components/draft/draft.js
	@@ -1,113 +1,111 @@
	import { cloneDeep } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	import StatusContent from 'src/components/status_content/status_content.vue'
	+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'

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

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

	library.add(faPollH)

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

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

	import Modal from '../modal/modal.vue'
	+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'

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

	const PostStatusModal = {
	components: {
	- PostStatusForm: defineAsyncComponent(
	- () => import('src/components/post_status_form/post_status_form.vue'),
	- ),
	+ PostStatusForm,
	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/status/status.js b/src/components/status/status.js
	index 4e4447f243..507687ce0d 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,669 +1,668 @@
	import { unescape as ldUnescape, uniqBy } from 'lodash'
	import { defineAsyncComponent } from 'vue'

	import AvatarList from 'src/components/avatar_list/avatar_list.vue'
	import EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue'
	import MentionLink from 'src/components/mention_link/mention_link.vue'
	import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import StatusActionButtons from 'src/components/status_action_buttons/status_action_buttons.vue'
	import StatusContent from 'src/components/status_content/status_content.vue'
	import Timeago from 'src/components/timeago/timeago.vue'
	import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
	import UserLink from 'src/components/user_link/user_link.vue'
	import UserListPopover from 'src/components/user_list_popover/user_list_popover.vue'
	import UserPopover from 'src/components/user_popover/user_popover.vue'
	+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import { muteFilterHits } from '../../services/status_parser/status_parser.js'
	import {
	highlightClass,
	highlightStyle,
	} from '../../services/user_highlighter/user_highlighter.js'

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

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

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

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

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

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

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

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

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

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

	'controlledThreadDisplayStatus',
	'controlledToggleThreadDisplay',
	'controlledShowingTall',
	'controlledToggleShowingTall',
	'controlledExpandingSubject',
	'controlledToggleExpandingSubject',
	'controlledShowingLongSubject',
	'controlledToggleShowingLongSubject',
	'controlledReplying',
	'controlledToggleReplying',
	'controlledMediaPlaying',
	'controlledSetMediaPlaying',
	],
	emits: ['goto', 'toggleExpanded'],
	data() {
	return {
	uncontrolledReplying: false,
	unmuted: false,
	userExpanded: false,
	uncontrolledMediaPlaying: [],
	suspendable: true,
	error: null,
	headTailLinks: null,
	}
	},
	computed: {
	...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
	showReasonMutedThread() {
	return (
	(this.status.thread_muted \|\|
	(this.status.reblog && this.status.reblog.thread_muted)) &&
	!this.inConversation
	)
	},
	allowNonSquareEmoji() {
	return this.mergedConfig.nonSquareEmoji
	},
	repeaterClass() {
	const user = this.statusoid.user
	return highlightClass(user)
	},
	userClass() {
	const user = this.retweet
	? this.statusoid.retweeted_status.user
	: this.statusoid.user
	return highlightClass(user)
	},
	deleted() {
	return this.statusoid.deleted
	},
	repeaterStyle() {
	const user = this.statusoid.user
	return highlightStyle(useUserHighlightStore().get(user.screen_name))
	},
	userStyle() {
	if (this.noHeading) return
	const user = this.retweet
	? this.statusoid.retweeted_status.user
	: this.statusoid.user
	return highlightStyle(useUserHighlightStore().get(user.screen_name))
	},
	userProfileLink() {
	return this.generateUserProfileLink(
	this.status.user.id,
	this.status.user.screen_name,
	)
	},
	replyProfileLink() {
	if (this.isReply) {
	const user = this.$store.getters.findUser(
	this.status.in_reply_to_user_id,
	)
	// FIXME Why user not found sometimes???
	return user ? user.statusnet_profile_url : 'NOT_FOUND'
	}
	},
	retweet() {
	return !!this.statusoid.retweeted_status
	},
	retweeterUser() {
	return this.statusoid.user
	},
	retweeter() {
	return this.statusoid.user.name \|\| this.statusoid.user.screen_name_ui
	},
	retweeterHtml() {
	return this.statusoid.user.name
	},
	retweeterProfileLink() {
	return this.generateUserProfileLink(
	this.statusoid.user.id,
	this.statusoid.user.screen_name,
	)
	},
	status() {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	statusFromGlobalRepository() {
	// NOTE: Consider to replace status with statusFromGlobalRepository
	return this.$store.state.statuses.allStatusesObject[this.status.id]
	},
	loggedIn() {
	return !!this.currentUser
	},
	muteFilterHits() {
	return muteFilterHits(
	Object.values(useSyncConfigStore().prefsStorage.simple.muteFilters),
	this.status,
	)
	},
	botStatus() {
	return this.status.user.actor_type === 'Service'
	},
	showActorTypeIndicator() {
	return !this.hideBotIndication
	},
	sensitiveStatus() {
	return this.status.nsfw
	},
	mentionsLine() {
	if (!this.headTailLinks) return []
	const writtenSet = new Set(
	this.headTailLinks.writtenMentions.map((_) => _.url),
	)
	return this.status.attentions
	.filter((attn) => {
	// no reply user
	return (
	attn.id !== this.status.in_reply_to_user_id &&
	// no self-replies
	attn.statusnet_profile_url !==
	this.status.user.statusnet_profile_url &&
	// don't include if mentions is written
	!writtenSet.has(attn.statusnet_profile_url)
	)
	})
	.map((attn) => ({
	url: attn.statusnet_profile_url,
	content: attn.screen_name,
	userId: attn.id,
	}))
	},
	hasMentionsLine() {
	return this.mentionsLine.length > 0
	},
	muteReasons() {
	return [
	this.userIsMuted ? 'user' : null,
	this.status.thread_muted ? 'thread' : null,
	this.muteFilterHits.length > 0 ? 'filtered' : null,
	this.muteBotStatuses && this.botStatus ? 'bot' : null,
	this.muteSensitiveStatuses && this.sensitiveStatus ? 'nsfw' : null,
	].filter((_) => _)
	},
	muteLocalized() {
	if (this.muteReasons.length === 0) return null
	const mainReason = () => {
	switch (this.muteReasons[0]) {
	case 'user':
	return this.$t('status.muted_user')
	case 'thread':
	return this.$t('status.thread_muted')
	case 'filtered':
	return this.$t(
	'status.muted_filters',
	{
	name: this.muteFilterHits[0].name,
	filterMore: this.muteFilterHits.length - 1,
	},
	this.muteFilterHits.length,
	)
	case 'bot':
	return this.$t('status.bot_muted')
	case 'nsfw':
	return this.$t('status.sensitive_muted')
	}
	}
	if (this.muteReasons.length > 1) {
	return this.$t(
	'status.multi_reason_mute',
	{
	main: mainReason(),
	numReasonsMore: this.muteReasons.length - 1,
	},
	this.muteReasons.length - 1,
	)
	} else {
	return mainReason()
	}
	},
	muted() {
	if (this.ignoreMute) return false
	if (this.statusoid.user.id === this.currentUser.id) return false
	return !this.unmuted && !this.shouldNotMute && this.muteReasons.length > 0
	},
	userIsMuted() {
	if (this.statusoid.user.id === this.currentUser.id) return false
	const { status } = this
	const { reblog } = status
	const relationship = this.$store.getters.relationship(status.user.id)
	const relationshipReblog =
	reblog && this.$store.getters.relationship(reblog.user.id)
	return (
	(status.muted && !status.thread_muted) \|\|
	// Reprööt of a muted post according to BE
	(reblog && reblog.muted && !reblog.thread_muted) \|\|
	// Muted user
	relationship.muting \|\|
	// Muted user of a reprööt
	(relationshipReblog && relationshipReblog.muting)
	)
	},
	shouldNotMute() {
	if (this.ignoreMute) return true
	if (this.isFocused) return true
	const { status } = this
	const { reblog } = status
	return (
	((this.inProfile &&
	// Don't mute user's posts on user timeline (except reblogs)
	((!reblog && status.user.id === this.profileUserId) \|\|
	// Same as above but also allow self-reblogs
	(reblog && reblog.user.id === this.profileUserId))) \|\|
	// Don't mute statuses in muted conversation when said conversation is opened
	(this.inConversation && status.thread_muted)) &&
	// No excuses if post has muted words
	!this.muteFilterHits.length > 0
	)
	},
	hideMutedUsers() {
	return this.mergedConfig.hideMutedPosts
	},
	hideMutedThreads() {
	return this.mergedConfig.hideMutedThreads
	},
	hideFilteredStatuses() {
	return this.mergedConfig.hideFilteredStatuses
	},
	hideWordFilteredPosts() {
	return this.mergedConfig.hideWordFilteredPosts
	},
	hideStatus() {
	return (
	!this.shouldNotMute &&
	((this.muted && this.hideFilteredStatuses) \|\|
	(this.userIsMuted && this.hideMutedUsers) \|\|
	(this.status.thread_muted && this.hideMutedThreads) \|\|
	(this.muteFilterHits.length > 0 && this.hideWordFilteredPosts) \|\|
	this.muteFilterHits.some((x) => x.hide))
	)
	},
	isFocused() {
	// retweet or root of an expanded conversation
	if (this.focused) {
	return true
	} else if (!this.inConversation) {
	return false
	}
	// use conversation highlight only when in conversation
	return this.status.id === this.highlight
	},
	isReply() {
	return !!(
	this.status.in_reply_to_status_id && this.status.in_reply_to_user_id
	)
	},
	replyToName() {
	if (this.status.in_reply_to_screen_name) {
	return this.status.in_reply_to_screen_name
	} else {
	const user = this.$store.getters.findUser(
	this.status.in_reply_to_user_id,
	)
	return user && user.screen_name_ui
	}
	},
	replySubject() {
	if (!this.status.summary) return ''
	const decodedSummary = ldUnescape(this.status.summary)
	const behavior = this.mergedConfig.subjectLineBehavior
	const startsWithRe = decodedSummary.match(/^re[: ]/i)
	if ((behavior !== 'noop' && startsWithRe) \|\| behavior === 'masto') {
	return decodedSummary
	} else if (behavior === 'email') {
	return 're: '.concat(decodedSummary)
	} else if (behavior === 'noop') {
	return ''
	}
	},
	combinedFavsAndRepeatsUsers() {
	// Use the status from the global status repository since favs and repeats are saved in it
	const combinedUsers = [].concat(
	this.statusFromGlobalRepository.favoritedBy,
	this.statusFromGlobalRepository.rebloggedBy,
	)
	return uniqBy(combinedUsers, 'id')
	},
	tags() {
	return this.status.tags
	.filter((tagObj) => Object.hasOwn(tagObj, 'name'))
	.map((tagObj) => tagObj.name)
	.join(' ')
	},
	hidePostStats() {
	return this.mergedConfig.hidePostStats
	},
	shouldDisplayFavsAndRepeats() {
	return (
	!this.hidePostStats &&
	this.isFocused &&
	(this.combinedFavsAndRepeatsUsers.length > 0 \|\|
	this.statusFromGlobalRepository.quotes_count)
	)
	},
	muteBotStatuses() {
	return this.mergedConfig.muteBotStatuses
	},
	muteSensitiveStatuses() {
	return this.mergedConfig.muteSensitiveStatuses
	},
	hideBotIndication() {
	return this.mergedConfig.hideBotIndication
	},
	currentUser() {
	return this.$store.state.users.currentUser
	},
	mergedConfig() {
	return useMergedConfigStore().mergedConfig
	},
	isSuspendable() {
	return !this.replying && this.mediaPlaying.length === 0
	},
	inThreadForest() {
	return !!this.controlledThreadDisplayStatus
	},
	threadShowing() {
	return this.controlledThreadDisplayStatus === 'showing'
	},
	visibilityLocalized() {
	return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
	},
	isEdited() {
	return this.status.edited_at !== null
	},
	editingAvailable() {
	return useInstanceCapabilitiesStore().editingAvailable
	},
	quoteId() {
	return this.status.quote_id
	},
	quoteUrl() {
	return this.status.quote_url
	},
	quoteVisible() {
	return this.status.quote_visible
	},
	quoteExpanded() {
	return !this.inQuote
	},
	scrobblePresent() {
	if (this.mergedConfig.hideScrobbles) return false
	if (!this.status.user?.latestScrobble) return false
	const value = this.mergedConfig.hideScrobblesAfter.match(/\d+/gs)[0]
	const unit = this.mergedConfig.hideScrobblesAfter.match(/\D+/gs)[0]
	let multiplier = 60 * 1000 // minutes is smallest unit
	switch (unit) {
	case 'm':
	break
	case 'h':
	multiplier *= 60 // hour
	break
	case 'd':
	multiplier *= 60 // hour
	multiplier *= 24 // day
	break
	}
	const maxAge = Number(value) * multiplier
	const createdAt = Date.parse(this.status.user.latestScrobble.created_at)
	const age = Date.now() - createdAt
	if (age > maxAge) return false
	return this.status.user.latestScrobble.artist
	},
	scrobble() {
	return this.status.user?.latestScrobble
	},
	},
	methods: {
	visibilityIcon(visibility) {
	switch (visibility) {
	case 'private':
	return 'lock'
	case 'unlisted':
	return 'lock-open'
	case 'direct':
	return 'envelope'
	case 'local':
	return 'igloo'
	default:
	return 'globe'
	}
	},
	showError(error) {
	this.error = error
	},
	clearError() {
	this.error = undefined
	},
	toggleReplying() {
	if (this.replying) {
	this.$refs.postStatusForm.requestClose()
	} else {
	this.doToggleReplying()
	}
	},
	doToggleReplying() {
	controlledOrUncontrolledToggle(this, 'replying')
	},
	gotoOriginal(id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded() {
	this.$emit('toggleExpanded')
	},
	toggleMute() {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded() {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink(id, name) {
	return generateProfileLink(
	id,
	name,
	useInstanceStore().restrictedNicknames,
	)
	},
	addMediaPlaying(id) {
	controlledOrUncontrolledSet(
	this,
	'mediaPlaying',
	this.mediaPlaying.concat(id),
	)
	},
	removeMediaPlaying(id) {
	controlledOrUncontrolledSet(
	this,
	'mediaPlaying',
	this.mediaPlaying.filter((mediaId) => mediaId !== id),
	)
	},
	setHeadTailLinks(headTailLinks) {
	this.headTailLinks = headTailLinks
	},
	toggleThreadDisplay() {
	this.controlledToggleThreadDisplay()
	},
	scrollIfHighlighted(highlightId) {
	if (this.$el.getBoundingClientRect == null) return
	const id = highlightId
	if (this.status.id === id) {
	const rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.height >= window.innerHeight - 50) {
	// Post we want to see is taller than screen so match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.bottom > window.innerHeight - 50) {
	// Post is below screen, match its bottom to screen bottom
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	},
	},
	watch: {
	highlight: function (id) {
	this.scrollIfHighlighted(id)
	},
	'status.repeat_num': function (num) {
	// refetch repeats when repeat_num is changed in any way
	if (
	this.isFocused &&
	this.statusFromGlobalRepository.rebloggedBy &&
	this.statusFromGlobalRepository.rebloggedBy.length !== num
	) {
	this.$store.dispatch('fetchRepeats', this.status.id)
	}
	},
	'status.fave_num': function (num) {
	// refetch favs when fave_num is changed in any way
	if (
	this.isFocused &&
	this.statusFromGlobalRepository.favoritedBy &&
	this.statusFromGlobalRepository.favoritedBy.length !== num
	) {
	this.$store.dispatch('fetchFavs', this.status.id)
	}
	},
	isSuspendable: function (val) {
	this.suspendable = val
	},
	},
	}

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

	+import AccountActions from 'src/components/account_actions/account_actions.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	-import 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 ColorInput from 'src/components/color_input/color_input.vue'
	import UserNote from '../user_note/user_note.vue'

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

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

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

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

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

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

	return {
	followRequestInProgress: false,

	// Editable stuff
	editImage: false,

	newName: user.name_unescaped,
	editingName: false,

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

	newAvatar: null,
	newAvatarFile: null,

	newBanner: null,
	newBannerFile: null,

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

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

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

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

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

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

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

	this.editImage = false
	}

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

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

	this.newAvatar = null
	this.newAvatarFile = null

	this.newBanner = null
	this.newBannerFile = null

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

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

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

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

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

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

	this.$store.state.api.backendInteractor
	.updateProfile({ params })
	.then((user) => {
	this.newFields.splice(this.newFields.length)
	merge(this.newFields, user.fields)
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	this.resetState()
	})
	.catch((error) => {
	this.displayUploadError(error)
	})
	},
	displayUploadError(error) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'upload.error.message',
	messageArgs: [error.message],
	level: 'error',
	})
	},
	},
	}
	diff --git a/src/components/user_panel/user_panel.js b/src/components/user_panel/user_panel.js
	index e6ac8bf5f2..a3b67edb8c 100644
	--- a/src/components/user_panel/user_panel.js
	+++ b/src/components/user_panel/user_panel.js
	@@ -1,24 +1,22 @@
	import { defineAsyncComponent } from 'vue'
	import { mapState } from 'vuex'
	+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	+import UserCard from 'src/components/user_card/user_card.vue'

	const UserPanel = {
	computed: {
	signedIn() {
	return this.user
	},
	...mapState({ user: (state) => state.users.currentUser }),
	},
	components: {
	AuthForm: defineAsyncComponent(
	() => import('src/components/auth_form/auth_form.js'),
	),
	- PostStatusForm: defineAsyncComponent(
	- () => import('src/components/post_status_form/post_status_form.vue'),
	- ),
	- UserCard: defineAsyncComponent(
	- () => import('src/components/user_card/user_card.vue'),
	- ),
	+ PostStatusForm,
	+ UserCard,
	},
	}

	export default UserPanel

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 30, 3:59 AM (1 d, 4 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1797191
Default Alt Text: (44 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions