fuck it, smooth scroll is unreliable

src/components/conversation/conversation.js

@@ -81,6 +81,7 @@ export default {
       )
     }
 
+    const scroller = useScrollPosition()
     const tryScrollTo = async (id) => {
       if (!id) {
         return
@@ -90,14 +91,12 @@ export default {
       }
       setFocused(id)
       const target = document.querySelector(`.Status[data-status-id=${id}]`)
-      await nextTick()
-      return await target.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      return await scroller.scrollIntoView(target, { block: 'center' })
     }
 
     const { statusId } = toRefs(props)
 
     const router = useRouter()
-    const scroller = useScrollPosition()
 
     // # Main Configuration / global state
     const { mergedConfig } = storeToRefs(useMergedConfigStore())
@@ -195,11 +194,12 @@ export default {
     // # Linear style stuff
     const isLinearView = computed(() => displayStyle.value !== 'tree')
     const linearElement = useTemplateRef('linear')
+    const linearScrollCompensation = computed(() => isLinearView.value && isExpanded.value)
     const {
       heightChart: heightChartLinear,
       changeSuspendState: changeSuspendStateLinear,
       updateVirtualHeight: updateVirtualHeightLinear,
-    } = useVirtualScrolling(conversation, linearElement, scroller, true, currentStatus)
+    } = useVirtualScrolling(conversation, linearElement, scroller, linearScrollCompensation, currentStatus)
 
     // # Tree style stuff
     const isTreeView = computed(() => displayStyle.value === 'tree')
@@ -213,11 +213,12 @@ export default {
     provide('threadDisplay', threadDisplay)
 
     const ancestorsElement = useTemplateRef('ancestors')
+    const treeScrollCompensation = computed(() => isTreeView.value && isExpanded.value)
     const {
       heightChart: heightChartAncestors,
       changeSuspendState: changeSuspendStateAncestors,
       updateVirtualHeight: updateVirtualHeightAncestors,
-    } = useVirtualScrolling(currentAncestors, ancestorsElement, scroller, true)
+    } = useVirtualScrolling(currentAncestors, ancestorsElement, scroller, treeScrollCompensation)
 
     const currentLevel = computed(() => [currentStatus.value].filter(Boolean))
     const currentLevelElement = useTemplateRef('currentLevel')

src/composables/useScrollPosition.js

@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref, nextTick } from 'vue'
 
 export function useScrollPosition() {
   const x = ref(0)
@@ -24,5 +24,11 @@ export function useScrollPosition() {
     inProgress.value = false
   }
 
-  return { x, y, scrollBy, inProgress }
+  const scrollIntoView = async (element, options) => {
+    inProgress.value = true
+    await element.scrollIntoView(options)
+    inProgress.value = false
+  }
+
+  return { x, y, scrollBy, scrollIntoView, inProgress }
 }

src/composables/useVirtualScrolling.js

@@ -1,5 +1,5 @@
 import { storeToRefs } from 'pinia'
-import { computed, ref, watch, nextTick } from 'vue'
+import { computed, ref, watch, nextTick, toValue } from 'vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useStatusesStore } from 'src/stores/statuses.js'
@@ -69,7 +69,7 @@ export function useVirtualScrolling(
   }
 
   // Scrolling
-  const { y: scrollY, inProgress: scrollInProgress } = scrollPosition
+  const { y: scrollY, inProgress: scrollInProgress, scrollBy } = scrollPosition
   const { height: windowHeight } = useWindowSize()
 
   const topScrollBoundary = ref(0)
@@ -130,8 +130,8 @@ export function useVirtualScrolling(
   })
 
   watch(heightChart, async (newVal, oldVal) => {
+    if (!toValue(scrollCompensation)) return
     if (scrollInProgress.value) return
-    if (!scrollCompensation) return
     pauseWatchers()
     const getAnchoredEl = (list) => anchor.value
       ? list.find(({ id }) => id === anchor.value)
@@ -143,10 +143,11 @@ export function useVirtualScrolling(
 
     const diff = newOffset - oldOffset // Positive = down, Negative = up
 
-    topScrollBoundary.value += diff
-    bottomScrollBoundary.value += diff
-    await nextTick()
-    scrollPosition.scrollBy(0, diff)
+    if (diff !== 0) {
+      topScrollBoundary.value += diff
+      bottomScrollBoundary.value += diff
+      scrollBy(0, diff)
+    }
 
     updateBoundaries()
     resumeWatchers()