fix and refactor the way status focusing work

src/components/conversation/conversation.js

@@ -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() {

src/components/conversation/conversation.vue

@@ -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"
           />