scroll to element for linear view

src/components/conversation/conversation.js

@@ -80,6 +80,19 @@ export default {
       )
     }
 
+    const tryScrollTo = async (id) => {
+      if (!id) {
+        return
+      }
+      if (isPage.value) {
+        router.push({ name: 'conversation', params: { statusId: id } })
+      }
+      setFocused(id)
+      const target = document.querySelector(`.Status[data-status-id=${id}]`)
+      await nextTick()
+      target.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }
+
     const { statusId } = toRefs(props)
 
     const router = useRouter()
@@ -105,6 +118,7 @@ export default {
     }
     provide('isExpanded', isExpanded)
     provide('isPage', isPage)
+    provide('expandable', true)
 
     // # Focus
     const focusedId = ref(statusId.value)
@@ -133,12 +147,13 @@ export default {
     } = useConversation(focusedId, isExpanded)
 
     watch(expanded, (value) => {
+      tryScrollTo(currentStatus.value.id)
       if (value) {
         fetchConversation()
       } else {
         resetDisplayState()
       }
-    })
+    }, { flush: 'post' })
 
     const resetDisplayState = () => {
       setFocused(statusId.value)
@@ -181,7 +196,7 @@ export default {
       heightChart: heightChartLinear,
       changeSuspendState: changeSuspendStateLinear,
       updateVirtualHeight: updateVirtualHeightLinear,
-    } = useVirtualScrolling(conversation, linearElement)
+    } = useVirtualScrolling(conversation, linearElement, currentStatus)
 
     // # Tree style stuff
     const isTreeView = computed(() => displayStyle.value === 'tree')
@@ -205,9 +220,10 @@ export default {
     const currentLevelElement = useTemplateRef('currentLevel')
     const {
       heightChart: heightChartCurrentLevel,
+      totalHeight: totalHeightCurrentLevel,
       changeSuspendState: changeSuspendStateCurrentLevel,
       updateVirtualHeight: updateVirtualHeightCurrentLevel,
-    } = useVirtualScrolling(currentLevel, currentLevelElement)
+    } = useVirtualScrolling(currentLevel, currentLevelElement, currentStatus)
 
     const treeViewIsSimple = computed(
       () => !mergedConfig.value.conversationTreeAdvanced,
@@ -223,32 +239,6 @@ export default {
     )
 
     // # Scrolling
-    const tryScrollTo = (id) => {
-      if (!id) {
-        return
-      }
-      if (isPage.value) {
-        router.push({ name: 'conversation', params: { statusId: id } })
-      }
-      // Because the conversation can be unmounted when out of sight
-      // and mounted again when it comes into sight,
-      // the `mounted` or `created` function in `status` should not
-      // 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 `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
-      // removes and adds status components (e.g. an originally child
-      // status becomes an ancestor status, and thus they will be
-      // different).
-      // Here, let the components be rendered first, in order to trigger
-      // the `focused` watcher.
-      nextTick(() => {
-        setFocused(id)
-      })
-    }
     const diveIntoStatus = (id) => {
       tryScrollTo(id)
     }
@@ -261,6 +251,11 @@ export default {
       loadError,
       mobileLayout,
 
+      // # Conversation Expansion
+      isPage,
+      isExpanded,
+      toggleExpanded,
+
       // # Focus
       focused,
       setFocused,
@@ -270,11 +265,6 @@ export default {
       currentStatus,
       getReplies,
 
-      // # Conversation Expansion
-      isPage,
-      isExpanded,
-      toggleExpanded,
-
       // # Misc UI things
       getStatusClasses,
 

src/components/conversation/conversation.vue

@@ -106,6 +106,7 @@
 
               :focused="focused === element.status.id"
               conversation-rank="ancestor"
+              :data-status-id="element.id"
 
               @goto="setFocused"
               @dive="diveIntoStatus(element.status.id)"
@@ -165,6 +166,7 @@
 
             :focused="focused === element.id || focused === element.status.retweeted_status?.id"
 
+            :data-status-id="element.id"
             @goto="setFocused"
             @toggle-expanded="toggleExpanded"
             @suspendable-state-change="changeSuspendStateLinear"

src/components/status/status.js

@@ -121,19 +121,15 @@ const Status = {
   ],
   inject: {
     profileUserId: {
-      type: String,
       default: null,
     },
     isPage: {
-      type: Boolean,
       default: false,
     },
     isExpanded: {
-      type: Boolean,
       default: false,
     },
     expandable: {
-      type: Boolean,
       default: false,
     },
   },

src/components/status/status.vue

@@ -199,7 +199,7 @@
                   />
                 </span>
                 <button
-                  v-if="!isExpanded && !isPreview"
+                  v-if="expandable && !isExpanded && !isPreview"
                   class="button-unstyled"
                   :title="$t('status.expand')"
                   @click.prevent="toggleExpanded"

src/components/thread_tree/thread_tree.vue

@@ -10,6 +10,7 @@
       :replies="getReplies(statusId)"
       :focused="focused === statusId"
 
+      :data-status-id="statusId"
       :conversation-rank="depth === 0 ? 'current' : 'child'"
       :thread-display-state="threadDisplay.get(statusId)"
 

src/composables/useVirtualScrolling.js

@@ -1,5 +1,5 @@
 import { storeToRefs } from 'pinia'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, nextTick } from 'vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useStatusesStore } from 'src/stores/statuses.js'
@@ -7,10 +7,11 @@ import { useStatusesStore } from 'src/stores/statuses.js'
 import { useScrollPosition } from 'src/composables/useScrollPosition.js'
 import { useWindowSize } from 'src/composables/useWindowSize.js'
 
-export function useVirtualScrolling(conversation, body) {
+export function useVirtualScrolling(conversation, body, anchorStatus) {
   const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
 
   const { mergedConfig } = storeToRefs(useMergedConfigStore())
+  const anchor = computed(() => anchorStatus?.value.id)
 
   const unsuspendibleIds = ref(new Set())
   const changeSuspendState = ({ id, suspend }) => {
@@ -32,7 +33,7 @@ export function useVirtualScrolling(conversation, body) {
     fontSize.value = Number.parseInt(string.slice(0, -2), 10) // remove the 'px'
   }
   // Update font size if user changed UI scale
-  watch(fontSizeSetting, updateFontSize)
+  watch(fontSizeSetting, updateFontSize, { immediate: true })
 
   // Placeholder heights.
   const mutedStatusHeight = computed(() => {
@@ -79,10 +80,22 @@ export function useVirtualScrolling(conversation, body) {
     topScrollBoundary.value = distanceItemTopToWindowTop
     bottomScrollBoundary.value = distanceItemTopToWindowBottom
   }
-  watch(windowHeight, updateBoundaries)
+  const windowWatcher = watch(windowHeight, updateBoundaries)
-  watch(scrollY, updateBoundaries)
+  const scrollWatcher = watch(scrollY, updateBoundaries)
-  watch(totalHeight, updateBoundaries)
+  const heightWatcher = watch(totalHeight, updateBoundaries)
-  watch(body, updateBoundaries)
+  const bodyWatcher = watch(body, updateBoundaries)
+  const pauseWatchers = () => {
+    windowWatcher.pause()
+    scrollWatcher.pause()
+    heightWatcher.pause()
+    bodyWatcher.pause()
+  }
+  const resumeWatchers = () => {
+    windowWatcher.resume()
+    scrollWatcher.resume()
+    heightWatcher.resume()
+    bodyWatcher.resume()
+  }
 
   const heightChart = computed(() => {
     // Map every height and suspendable state
@@ -108,8 +121,34 @@ export function useVirtualScrolling(conversation, body) {
       return sum + item.height
     }, 0)
 
+    return chart
+  })
+
+  watch(heightChart, async (newVal, oldVal) => {
+    pauseWatchers()
+    const getAnchoredEl = (list) => anchor.value
+      ? list.find(({ id }) => id === anchor.value)
+      : list[list.length - 1]
+    const oldElement = getAnchoredEl(oldVal)
+    const newElement = getAnchoredEl(newVal)
+    const oldOffset = oldElement?.top ?? 0
+    const newOffset = newElement?.top ?? 0
+
+    const diff = newOffset - oldOffset // Positive = down, Negative = up
+
+    console.log(diff, oldElement, newOffset)
+    topScrollBoundary.value += diff
+    bottomScrollBoundary.value += diff
+    await nextTick()
+    window.scrollBy(0, diff)
+
+    updateBoundaries()
+    resumeWatchers()
+  })
+
+  const heightChartGrouped = computed(() => {
     // Determine visibility state
-    chart.forEach((heightChartItem) => {
+    const chart = heightChart.value.map((heightChartItem) => {
       const itemBottomBoundary = heightChartItem.top + heightChartItem.height
       const itemTopBoundary = heightChartItem.top
 
@@ -123,7 +162,7 @@ export function useVirtualScrolling(conversation, body) {
       const isAboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary
       // This accounts for the case where item's boundaries exceed scroll boundary
 
-      heightChartItem.visible = isBelowTopBoundary && isAboveBottomBoundary
+      return { ...heightChartItem, visible: isBelowTopBoundary && isAboveBottomBoundary }
     })
 
     // Group invisible statuses into spacers
@@ -162,7 +201,7 @@ export function useVirtualScrolling(conversation, body) {
   })
 
   return {
-    heightChart,
+    heightChart: heightChartGrouped,
     changeSuspendState,
     updateVirtualHeight,
   }