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(
-      conversation,
-      linearElement,
-      scroller,
-      linearScrollCompensation,
-      currentStatus,
-    )
+    } = useVirtualScrolling({
+      list: conversation,
+      body: linearElement,
+      scrollPositionInstance: scroller,
+      scrollCompensation: linearScrollCompensation,
+      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(
-      currentAncestors,
-      ancestorsElement,
-      scroller,
-      treeScrollCompensation,
-    )
+    } = useVirtualScrolling({
+      list: currentAncestors,
+      body: ancestorsElement,
+      scrollPositionInstance: scroller,
+      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"
-              :replies="getReplies(element.status.id)"
+              :status-id="element.item.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)"
-            :status-id="element.status.id"
-            :replies="getReplies(element.status.id)"
+            :class="getStatusClasses(element.item)"
+            :status-id="element.item.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"