make useVirtualScrolling agnostic

src/components/conversation/conversation.js

@@ -187,6 +187,27 @@ export default {
       '-last': status.id === lastStatus.value?.id,
     })
 
+    // Getting the actual font size in pixels since UI might have
+    // a different scale
+    const fontSizeSetting = computed(() => mergedConfig.value.textSize)
+    const fontSize = ref(0)
+    const updateFontSize = () => {
+      const string = window
+        .getComputedStyle(document.body)
+        .getPropertyValue('font-size')
+      fontSize.value = Number.parseInt(string.slice(0, -2), 10) // remove the 'px'
+    }
+    // Update font size if user changed UI scale
+    watch(fontSizeSetting, updateFontSize, { immediate: true })
+
+    // Placeholder heights.
+    const mutedStatusHeight = computed(() => fontSize.value * 1.5)
+    const normalStatusHeight = computed(() => fontSize.value * 10)
+    const getPlaceholderHeight = (id) =>
+      conversation.value.find((item) => item.id === id)?.muted
+        ? mutedStatusHeight
+        : normalStatusHeight
+
     // # Linear style stuff
     const isLinearView = computed(() => displayStyle.value !== 'tree')
     const linearElement = useTemplateRef('linear')
@@ -197,13 +218,14 @@ export default {
       heightChart: heightChartLinear,
       changeSuspendState: changeSuspendStateLinear,
       updateVirtualHeight: updateVirtualHeightLinear,
-    } = useVirtualScrolling(
+    } = useVirtualScrolling({
-      conversation,
+      list: conversation,
-      linearElement,
+      body: linearElement,
-      scroller,
+      scrollPositionInstance: scroller,
-      linearScrollCompensation,
+      scrollCompensation: linearScrollCompensation,
-      currentStatus,
+      anchorId: currentStatus.id,
-    )
+      getPlaceholderHeight,
+    })
 
     // # Tree style stuff
     const isTreeView = computed(() => displayStyle.value === 'tree')
@@ -224,12 +246,13 @@ export default {
       heightChart: heightChartAncestors,
       changeSuspendState: changeSuspendStateAncestors,
       updateVirtualHeight: updateVirtualHeightAncestors,
-    } = useVirtualScrolling(
+    } = useVirtualScrolling({
-      currentAncestors,
+      list: currentAncestors,
-      ancestorsElement,
+      body: ancestorsElement,
-      scroller,
+      scrollPositionInstance: scroller,
-      treeScrollCompensation,
+      scrollCompensation: treeScrollCompensation,
-    )
+      getPlaceholderHeight,
+    })
 
     const currentLevel = computed(() => [currentStatus.value].filter(Boolean))
     const currentLevelElement = useTemplateRef('currentLevel')
@@ -237,7 +260,13 @@ export default {
       heightChart: heightChartCurrentLevel,
       changeSuspendState: changeSuspendStateCurrentLevel,
       updateVirtualHeight: updateVirtualHeightCurrentLevel,
-    } = useVirtualScrolling(currentLevel, currentLevelElement, scroller, false)
+    } = useVirtualScrolling({
+      list: currentLevel,
+      body: currentLevelElement,
+      scrollPositionInstance: scroller,
+      scrollCompensation: false,
+      getPlaceholderHeight,
+    })
 
     const treeViewIsSimple = computed(
       () => !mergedConfig.value.conversationTreeAdvanced,

src/components/conversation/conversation.vue

@@ -99,17 +99,17 @@
             <Status
               v-if="element.type === 'status'"
               class="conversation-status panel-body"
-              :class="getStatusClasses(element.status)"
+              :class="getStatusClasses(element.item)"
 
-              :status-id="element.status.id"
+              :status-id="element.item.id"
-              :replies="getReplies(element.status.id)"
+              :replies="getReplies(element.item.id)"
 
-              :focused="focused === element.status.id"
+              :focused="focused === element.item.id"
               conversation-rank="ancestor"
               :data-status-id="element.id"
 
               @goto="setFocused"
-              @dive="diveIntoStatus(element.status.id)"
+              @dive="diveIntoStatus(element.item.id)"
               @suspendable-state-change="changeSuspendStateAncestors"
               @height-change="updateVirtualHeightAncestors"
             />
@@ -128,7 +128,7 @@
           <!-- it's more convenient for us to use a v-for here -->
           <template v-for="element in heightChartCurrentLevel">
             <ThreadTree
-              v-if="element.type === 'status'"
+              v-if="element.type === 'item'"
               :status-id="currentStatus.id"
               :depth="0"
 
@@ -158,13 +158,13 @@
           :key="element.id ?? element.ids"
         >
           <Status
-            v-if="element.type === 'status'"
+            v-if="element.type === 'item'"
             class="conversation-status"
-            :class="getStatusClasses(element.status)"
+            :class="getStatusClasses(element.item)"
-            :status-id="element.status.id"
+            :status-id="element.item.id"
-            :replies="getReplies(element.status.id)"
+            :replies="getReplies(element.item.id)"
 
-            :focused="focused === element.id || focused === element.status.retweeted_status?.id"
+            :focused="focused === element.id || focused === element.item.retweeted_status?.id"
 
             :data-status-id="element.id"
             @goto="setFocused"

src/composables/useVirtualScrolling.js

@@ -1,23 +1,15 @@
-import { storeToRefs } from 'pinia'
 import { computed, ref, toValue, watch } from 'vue'
 
-import { useMergedConfigStore } from 'src/stores/merged_config.js'
-import { useStatusesStore } from 'src/stores/statuses.js'
-
 import { useWindowSize } from 'src/composables/useWindowSize.js'
 
-export function useVirtualScrolling(
+export function useVirtualScrolling({
-  conversation,
+  list,
   body,
-  scrollPosition,
+  scrollPositionInstance,
   scrollCompensation,
-  anchorStatus,
+  anchorId,
-) {
+  getPlaceholderHeight,
-  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 }) => {
     if (!suspend) {
@@ -27,97 +19,25 @@ export function useVirtualScrolling(
     }
   }
 
-  // Getting the actual font size in pixels since UI might have
+  // Add buffer zone to boundary, equal to approx 3 items heights
-  // a different scale
+  const buffer = computed(() => getPlaceholderHeight().value * 3)
-  const fontSizeSetting = computed(() => mergedConfig.value.textSize)
-  const fontSize = ref(0)
-  const updateFontSize = () => {
-    const string = window
-      .getComputedStyle(document.body)
-      .getPropertyValue('font-size')
-    fontSize.value = Number.parseInt(string.slice(0, -2), 10) // remove the 'px'
-  }
-  // Update font size if user changed UI scale
-  watch(fontSizeSetting, updateFontSize, { immediate: true })
-
-  // Placeholder heights.
-  const mutedStatusHeight = computed(() => {
-    return fontSize.value * 1.5
-  })
-  const normalStatusHeight = computed(() => {
-    return fontSize.value * 10
-  })
-
-  // Add buffer zone to boundary, equal to approx 3 statuses heights
-  const buffer = computed(() => normalStatusHeight.value * 3)
 
   // Heights map.
   const heights = ref(new Map())
-  const totalHeight = computed(() =>
-    conversation.value.reduce((acc, item) => {
-      if (heights.value.has(item.id)) {
-        return acc + heights.value.get(item.id)
-      } else if (item.muted) {
-        return acc + mutedStatusHeight.value
-      } else {
-        return acc + normalStatusHeight.value
-      }
-    }, 0),
-  )
-  const updateVirtualHeight = ({ id, height }) => {
-    heights.value.set(id, height)
-  }
-
-  // Scrolling
-  const { y: scrollY, inProgress: scrollInProgress, scrollBy } = scrollPosition
-  const { height: windowHeight } = useWindowSize()
-
-  const topScrollBoundary = ref(0)
-  const bottomScrollBoundary = ref(0)
-  const updateBoundaries = () => {
-    if (!body.value) return // Not mounted yet
-
-    const { top } = body.value.getBoundingClientRect()
-
-    const distanceItemTopToWindowTop = 0 - top
-    const distanceItemTopToWindowBottom = windowHeight.value - top
-
-    topScrollBoundary.value = distanceItemTopToWindowTop
-    bottomScrollBoundary.value = distanceItemTopToWindowBottom
-  }
-  const windowWatcher = watch(windowHeight, updateBoundaries)
-  const scrollWatcher = watch(scrollY, updateBoundaries)
-  const heightWatcher = watch(totalHeight, 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
-    const chart = conversation.value.map(({ id }) => {
+    const chart = list.value.map((item) => {
-      const status = getStatusObject(id)
+      const { id } = item
       const height =
         (() => {
           if (heights.value.has(id)) {
             return heights.value.get(id)
-          } else if (status?.muted) {
-            return mutedStatusHeight.value
           } else {
-            return normalStatusHeight.value
+            return getPlaceholderHeight(id).value
           }
         })() + 1 //including border
       const suspendable = !unsuspendibleIds.value.has(id)
-      return { id, height, suspendable, status }
+      return { id, height, suspendable, item }
     })
 
     // Walk over the list to set top offsets
@@ -129,14 +49,18 @@ export function useVirtualScrolling(
     return chart
   })
 
+  // Scroll compensation
   watch(heightChart, async (newVal, oldVal) => {
     if (!toValue(scrollCompensation)) return
     if (scrollInProgress.value) return
     pauseWatchers()
+
+    // If we're not given an achor, treat last element as one
     const getAnchoredEl = (list) =>
-      anchor.value
+      anchorId?.value
-        ? list.find(({ id }) => id === anchor.value)
+        ? list.find(({ id }) => id === anchorId?.value)
         : list[list.length - 1]
+
     const oldElement = getAnchoredEl(oldVal)
     const newElement = getAnchoredEl(newVal)
     const oldOffset = oldElement?.top ?? 0
@@ -153,6 +77,51 @@ export function useVirtualScrolling(
     updateBoundaries()
     resumeWatchers()
   })
+  const updateVirtualHeight = ({ id, height }) => {
+    heights.value.set(id, height)
+  }
+
+  // Scrolling
+  const {
+    y: scrollY,
+    inProgress: scrollInProgress,
+    scrollBy,
+  } = scrollPositionInstance
+  const { height: windowHeight } = useWindowSize()
+
+  // Real scroll boundary relative to body's bounds
+  const topScrollBoundary = ref(0)
+  const bottomScrollBoundary = ref(0)
+
+  const updateBoundaries = () => {
+    if (!body.value) return // Not mounted yet
+
+    const { top } = body.value.getBoundingClientRect()
+
+    const distanceItemTopToWindowTop = 0 - top
+    const distanceItemTopToWindowBottom = windowHeight.value - top
+
+    topScrollBoundary.value = distanceItemTopToWindowTop
+    bottomScrollBoundary.value = distanceItemTopToWindowBottom
+  }
+
+  const windowWatcher = watch(windowHeight, updateBoundaries)
+  const scrollWatcher = watch(scrollY, updateBoundaries)
+  const heightWatcher = watch(heightChart, 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 heightChartGrouped = computed(() => {
     // Determine visibility state
@@ -176,13 +145,13 @@ export function useVirtualScrolling(
       }
     })
 
-    // Group invisible statuses into spacers
+    // Group invisible items into spacers
     return chart.reduce((acc, heightChartItem) => {
-      const { suspendable, visible, height, top, bottom, id, status } =
+      const { suspendable, visible, height, top, bottom, id, item } =
         heightChartItem
       const present = visible || !suspendable
       if (present) {
-        return [...acc, { type: 'status', height, top, bottom, id, status }]
+        return [...acc, { type: 'item', height, top, bottom, id, item }]
       } else {
         const previousItem = acc[acc.length - 1]
         const spacer =