hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix and refactor the way status focusing work

Browse source
This commit is contained in:
Henry Jameson 2026-07-06 19:43:08 +03:00
commit ddc126f696
6 changed files with 32 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/conversation/conversation.js
View file

@ -97,7 +97,7 @@ const conversation = {
},
data() {
return {
highlight: null,
focused: null,
expanded: false,
threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
inlineDivePosition: null,
@ -389,6 +389,9 @@ const conversation = {
canDive() {
return this.isTreeView && this.isExpanded
},
maybeFocused() {
return this.isExpanded ? this.focused : null
},
...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
...mapState({
mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
@ -411,7 +414,7 @@ const conversation = {
oldConversationId &&
newConversationId === oldConversationId
) {
this.setHighlight(this.originalStatusId)
this.setFocused(this.originalStatusId)
} else {
this.fetchConversation()
}
@ -439,7 +442,7 @@ const conversation = {
}).then(({ data: { ancestors, descendants } }) => {
this.$store.dispatch('addNewStatuses', { statuses: ancestors })
this.$store.dispatch('addNewStatuses', { statuses: descendants })
this.setHighlight(this.originalStatusId)
this.setFocused(this.originalStatusId)
})
} else {
this.loadStatusError = null
@ -457,18 +460,12 @@ const conversation = {
})
}
},
isFocused(id) {
return this.isExpanded && id === this.highlight
},
getReplies(id) {
return this.replies[id] || []
},
maybeHighlight() {
return this.isExpanded ? this.highlight : null
},
setHighlight(id) {
setFocused(id) {
if (!id) return
this.highlight = id
this.focused = id
if (!this.streamingEnabled) {
this.$store.dispatch('fetchStatus', id)
@ -533,7 +530,7 @@ const conversation = {
// only used when we are not on a page
undive() {
this.inlineDivePosition = null
this.setHighlight(this.statusId)
this.setFocused(this.statusId)
},
tryScrollTo(id) {
if (!id) {
@ -551,7 +548,7 @@ const conversation = {
// contain scrolling calls, as we do not want the page to jump
// when we scroll with an expanded conversation.
//
// Now the method is to rely solely on the `highlight` watcher
// Now the method is to rely solely on the `focused` watcher
// in `status` components.
// In linear views, all statuses are rendered at all times, but
// in tree views, it is possible that a change in active status
@ -559,9 +556,9 @@ const conversation = {
// status becomes an ancestor status, and thus they will be
// different).
// Here, let the components be rendered first, in order to trigger
// the `highlight` watcher.
// the `focused` watcher.
this.$nextTick(() => {
this.setHighlight(id)
this.setFocused(id)
})
},
goToCurrent() {

15
src/components/conversation/conversation.vue
View file

@ -96,8 +96,7 @@
:replies="getReplies(status.id)"
:expandable="!isExpanded"
:focused="isFocused(status.id)"
:highlight="maybeHighlight"
:focused="maybeFocused === status.id"
:inline-expanded="collapsable && isExpanded"
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
:in-profile="inProfile"
@ -107,7 +106,7 @@
:show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
can-dive
@goto="setHighlight"
@goto="setFocused"
@dive="() => diveIntoStatus(status.id)"
@suspendable-state-change="onStatusSuspendStateChange"
/>
@ -154,9 +153,8 @@
:pinned-status-ids-object="pinnedStatusIdsObject"
:profile-user-id="profileUserId"
:is-focused-function="isFocused"
:get-replies="getReplies"
:highlight="maybeHighlight"
:focused="maybeFocused"
:toggle-expanded="toggleExpanded"
:simple="treeViewIsSimple"
@ -166,7 +164,7 @@
:total-reply-depth="totalReplyDepth"
:can-dive="canDive"
@goto="setHighlight"
@goto="setFocused"
@dive="diveIntoStatus"
@suspendable-state-change="onStatusSuspendStateChange"
/>
@ -185,15 +183,14 @@
:replies="getReplies(status.id)"
:expandable="!isExpanded"
:focused="isFocused(status.id)"
:highlight="maybeHighlight === status.id"
:focused="maybeFocused === status.id || maybeFocused === status.retweeted_status?.id"
:inline-expanded="collapsable && isExpanded"
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
:in-profile="inProfile"
:in-conversation="isExpanded"
:profile-user-id="profileUserId"
@goto="setHighlight"
@goto="setFocused"
@toggle-expanded="toggleExpanded"
@suspendable-state-change="onStatusSuspendStateChange"
/>

27
src/components/status/status.js
View file

@ -97,7 +97,6 @@ const Status = {
expandable: Boolean,
focused: Boolean,
highlight: Boolean,
compact: Boolean,
isPreview: Boolean,
noHeading: Boolean,
@ -320,7 +319,7 @@ const Status = {
},
shouldNotMute() {
if (this.ignoreMute) return true
if (this.isFocused) return true
if (this.focused) return true
const { status } = this
const { reblog } = status
return (
@ -357,16 +356,6 @@ const Status = {
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
@ -415,7 +404,7 @@ const Status = {
shouldDisplayFavsAndRepeats() {
return (
!this.hidePostStats &&
this.isFocused &&
this.focused &&
(this.combinedFavsAndRepeatsUsers.length > 0 ||
this.statusFromGlobalRepository.quotes_count)
)
@ -558,9 +547,9 @@ const Status = {
toggleThreadDisplay() {
this.controlledToggleThreadDisplay()
},
scrollIfHighlighted(highlightId) {
scrollIfFocused(focusedId) {
if (this.$el.getBoundingClientRect == null) return
const id = highlightId
const id = focusedId
if (this.status.id === id) {
const rect = this.$el.getBoundingClientRect()
if (rect.top < 100) {
@ -577,13 +566,13 @@ const Status = {
},
},
watch: {
highlight: function (id) {
this.scrollIfHighlighted(id)
focused: function (id) {
this.scrollIfFocused(id)
},
'status.repeat_num': function (num) {
// refetch repeats when repeat_num is changed in any way
if (
this.isFocused &&
this.focused &&
this.statusFromGlobalRepository.rebloggedBy &&
this.statusFromGlobalRepository.rebloggedBy.length !== num
) {
@ -593,7 +582,7 @@ const Status = {
'status.fave_num': function (num) {
// refetch favs when fave_num is changed in any way
if (
this.isFocused &&
this.focused &&
this.statusFromGlobalRepository.favoritedBy &&
this.statusFromGlobalRepository.favoritedBy.length !== num
) {

7
src/components/status/status.vue
View file

@ -3,7 +3,7 @@
v-if="!hideStatus"
ref="root"
class="Status"
:class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
:class="[{ '-focused': focused }, { '-conversation': inlineExpanded }]"
>
<div
v-if="error"
@ -409,8 +409,7 @@
<StatusContent
ref="content"
:status="status"
:highlight="highlight"
:focused="isFocused"
:focused="focused"
:in-conversation="inConversation"
@mediaplay="addMediaPlaying($event)"
@mediapause="removeMediaPlaying($event)"
@ -507,7 +506,7 @@
</transition>
<EmojiReactions
v-if="(mergedConfig.emojiReactionsOnTimeline || isFocused) && (!noHeading && !isPreview)"
v-if="(mergedConfig.emojiReactionsOnTimeline || focused) && (!noHeading && !isPreview)"
:status="status"
/>

4
src/components/thread_tree/thread_tree.js
View file

@ -19,10 +19,8 @@ const ThreadTree = {
pinnedStatusIdsObject: Object,
profileUserId: String,
isFocusedFunction: Function,
highlight: String,
focused: String,
getReplies: Function,
setHighlight: Function,
toggleExpanded: Function,
simple: Boolean,

7
src/components/thread_tree/thread_tree.vue
View file

@ -8,9 +8,8 @@
:inline-expanded="collapsable && isExpanded"
:expandable="!isExpanded"
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
:focused="isFocusedFunction(status.id)"
:in-conversation="isExpanded"
:highlight="highlight === status.id"
:focused="focused === status.id || focused === status.retweeted_status?.id"
:in-profile="inProfile"
:profile-user-id="profileUserId"
class="conversation-status conversation-status-treeview status-fadein panel-body"
@ -42,10 +41,8 @@
:pinned-status-ids-object="pinnedStatusIdsObject"
:profile-user-id="profileUserId"
:is-focused-function="isFocusedFunction"
:get-replies="getReplies"
:highlight="highlight"
:set-highlight="setHighlight"
:focused="focused"
:toggle-expanded="toggleExpanded"
:simple="simple"