From 1d9b458e7482963846cd83b2f4aeaa8c7bdc9b58 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 9 Sep 2026 20:35:51 +0300
Subject: [PATCH 1/8] changelog

---
 changelog.d/virtual-scrolling-2.change | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/virtual-scrolling-2.change

diff --git a/changelog.d/virtual-scrolling-2.change b/changelog.d/virtual-scrolling-2.change
new file mode 100644
index 000000000..74a47c6a9
--- /dev/null
+++ b/changelog.d/virtual-scrolling-2.change
@@ -0,0 +1 @@
+Implemented new virtual scrolling. Opening huge threads should be faster now

From 56c4c29bd7be790e75bb2a9675c5ff1f5e895138 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Sep 2026 16:15:19 +0300
Subject: [PATCH 2/8] make useVirtualScrolling agnostic

---
 src/components/conversation/conversation.js  |  57 +++++--
 src/components/conversation/conversation.vue |  22 +--
 src/composables/useVirtualScrolling.js       | 163 ++++++++-----------
 3 files changed, 120 insertions(+), 122 deletions(-)

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 1fed4c458..316a33bb7 100644
--- a/src/components/conversation/conversation.js
+++ b/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,
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 3a61decf5..744fea0fd 100644
--- a/src/components/conversation/conversation.vue
+++ b/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"
diff --git a/src/composables/useVirtualScrolling.js b/src/composables/useVirtualScrolling.js
index 679f418d9..2062d97f0 100644
--- a/src/composables/useVirtualScrolling.js
+++ b/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(
-  conversation,
+export function useVirtualScrolling({
+  list,
   body,
-  scrollPosition,
+  scrollPositionInstance,
   scrollCompensation,
-  anchorStatus,
-) {
-  const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
-
-  const { mergedConfig } = storeToRefs(useMergedConfigStore())
-  const anchor = computed(() => anchorStatus?.value.id)
-
+  anchorId,
+  getPlaceholderHeight,
+}) {
   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
-  // 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(() => {
-    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)
+  // Add buffer zone to boundary, equal to approx 3 items heights
+  const buffer = computed(() => getPlaceholderHeight().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 status = getStatusObject(id)
+    const chart = list.value.map((item) => {
+      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
-        ? list.find(({ id }) => id === anchor.value)
+      anchorId?.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 =

From c13c007a6025c73f12a8e25b472f3d019168d8f4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Sep 2026 16:15:52 +0300
Subject: [PATCH 3/8] export pause/resume, for use in nested virtual scrolling

---
 src/composables/useVirtualScrolling.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/composables/useVirtualScrolling.js b/src/composables/useVirtualScrolling.js
index 2062d97f0..fe4b27633 100644
--- a/src/composables/useVirtualScrolling.js
+++ b/src/composables/useVirtualScrolling.js
@@ -184,5 +184,7 @@ export function useVirtualScrolling({
     heightChart: heightChartGrouped,
     changeSuspendState,
     updateVirtualHeight,
+    pauseWatchers,
+    resumeWatchers,
   }
 }

From 33d6dbf41cb784b14542ca08d778361cd16e3ef3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Sep 2026 16:36:35 +0300
Subject: [PATCH 4/8] commenting

---
 src/composables/useVirtualScrolling.js | 88 +++++++++++++++++---------
 1 file changed, 57 insertions(+), 31 deletions(-)

diff --git a/src/composables/useVirtualScrolling.js b/src/composables/useVirtualScrolling.js
index fe4b27633..e08d70304 100644
--- a/src/composables/useVirtualScrolling.js
+++ b/src/composables/useVirtualScrolling.js
@@ -3,13 +3,25 @@ import { computed, ref, toValue, watch } from 'vue'
 import { useWindowSize } from 'src/composables/useWindowSize.js'
 
 export function useVirtualScrolling({
+  // List of items
   list,
+  // Container of items, used for measuring scroll position
   body,
+  // useScrollPosition composable, used to prevent dupicating instances
   scrollPositionInstance,
-  scrollCompensation,
+  // ID of anchor element, used for scroll compensation.
+  // Omitting it makes last element the anchor
   anchorId,
+  // whether to use scroll compensation when elements above anchor change
+  scrollCompensation,
+  // Placeholder height specification. Must be a function.
+  // function will be called either:
+  // - without arguments (for generic placeholder, i.e. buffer zone size)
+  // - with id (for specific item placeholders)
+  // function must return ref pointing to height
   getPlaceholderHeight,
 }) {
+  // # Suspension
   const unsuspendibleIds = ref(new Set())
   const changeSuspendState = ({ id, suspend }) => {
     if (!suspend) {
@@ -19,10 +31,7 @@ export function useVirtualScrolling({
     }
   }
 
-  // Add buffer zone to boundary, equal to approx 3 items heights
-  const buffer = computed(() => getPlaceholderHeight().value * 3)
-
-  // Heights map.
+  // # Heights mapping.
   const heights = ref(new Map())
   const heightChart = computed(() => {
     // Map every height and suspendable state
@@ -48,8 +57,16 @@ export function useVirtualScrolling({
 
     return chart
   })
+  const updateVirtualHeight = ({ id, height }) => {
+    heights.value.set(id, height)
+  }
 
-  // Scroll compensation
+  // ## Scroll compensation
+  const {
+    y: scrollY,
+    inProgress: scrollInProgress,
+    scrollBy,
+  } = scrollPositionInstance
   watch(heightChart, async (newVal, oldVal) => {
     if (!toValue(scrollCompensation)) return
     if (scrollInProgress.value) return
@@ -69,27 +86,18 @@ export function useVirtualScrolling({
     const diff = newOffset - oldOffset // Positive = down, Negative = up
 
     if (diff !== 0) {
+      // Scroll by amount offset changed to keep it in view
       topScrollBoundary.value += diff
       bottomScrollBoundary.value += diff
       scrollBy(0, diff)
     }
 
-    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
+  // Real scroll boundary, relative to body's bounds
   const topScrollBoundary = ref(0)
   const bottomScrollBoundary = ref(0)
 
@@ -101,6 +109,11 @@ export function useVirtualScrolling({
     const distanceItemTopToWindowTop = 0 - top
     const distanceItemTopToWindowBottom = windowHeight.value - top
 
+    // Technically, bottom scroll boundary should be distance
+    // from element's top border to window's bottom border,
+    // but it just so happens that it is equal to this.
+    // You can verify it by drawing the boxes and measuring
+    // distances yourself, I know I did. Geometry, man...
     topScrollBoundary.value = distanceItemTopToWindowTop
     bottomScrollBoundary.value = distanceItemTopToWindowBottom
   }
@@ -116,19 +129,26 @@ export function useVirtualScrolling({
     heightWatcher.pause()
     bodyWatcher.pause()
   }
-  const resumeWatchers = () => {
+  const resumeWatchers = (skipUpdate = false) => {
     windowWatcher.resume()
     scrollWatcher.resume()
     heightWatcher.resume()
     bodyWatcher.resume()
+    if (skipUpdate) return
+    updateBoundaries()
   }
 
+  // # Visiblity
+  // Add buffer zone to boundary, equal to approx 3 items heights
+  const buffer = computed(() => getPlaceholderHeight().value * 3)
+
   const heightChartGrouped = computed(() => {
     // Determine visibility state
     const chart = heightChart.value.map((heightChartItem) => {
-      const itemBottomBoundary = heightChartItem.top + heightChartItem.height
       const itemTopBoundary = heightChartItem.top
+      const itemBottomBoundary = heightChartItem.top + heightChartItem.height
 
+      // Include buffer zone
       const finalTopScrollBoundary = topScrollBoundary.value - buffer.value
       const finalBottomScrollBoundary =
         bottomScrollBoundary.value + buffer.value
@@ -149,29 +169,35 @@ export function useVirtualScrolling({
     return chart.reduce((acc, heightChartItem) => {
       const { suspendable, visible, height, top, bottom, id, item } =
         heightChartItem
+      // Bottom value isn't really used otherwise for debugging
       const present = visible || !suspendable
       if (present) {
         return [...acc, { type: 'item', height, top, bottom, id, item }]
       } else {
+        // Reusing previous item if possible
         const previousItem = acc[acc.length - 1]
-        const spacer =
-          previousItem?.type === 'spacer'
-            ? previousItem
-            : {
-                type: 'spacer',
-                top: Number.POSITIVE_INFINITY,
-                bottom: Number.POSITIVE_INFINITY,
-                height: 0,
-                ids: new Set(),
-              }
+        const usingPreviousItem = previousItem?.type === 'spacer'
+        // We only really care for height and id of spacer, everything else
+        // is just for debugging
+        const spacer = usingPreviousItem
+          ? previousItem
+          : {
+              type: 'spacer',
+              top: Number.POSITIVE_INFINITY,
+              bottom: Number.POSITIVE_INFINITY,
+              height: 0,
+              ids: new Set(),
+            }
 
         spacer.ids.add(id)
-        spacer.id = [...spacer.ids].join()
+        spacer.id = [...spacer.ids].join() // used for v-for key attribute
         spacer.height += height
+
         if (top < spacer.top) spacer.top = top
         if (bottom < spacer.bottom) spacer.bottom = bottom
 
-        if (previousItem?.type === 'spacer') {
+        // If we used previous item there is no need to push it to array
+        if (usingPreviousItem) {
           return acc
         } else {
           return [...acc, spacer]

From 5aec3923201c634d1499e97a18f506f5237d64bc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Sep 2026 17:13:36 +0300
Subject: [PATCH 5/8] refactor & fix firefox

---
 src/components/conversation/conversation.js | 29 +++++++-------
 src/composables/useInterfaceSizes.js        | 43 +++++++++++++++++++++
 src/composables/useScrollPosition.js        | 20 +++++++++-
 3 files changed, 77 insertions(+), 15 deletions(-)
 create mode 100644 src/composables/useInterfaceSizes.js

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 316a33bb7..b77ead529 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -19,6 +19,7 @@ import { useConversation } from 'src/composables/useConversation.js'
 import { useScrollPosition } from 'src/composables/useScrollPosition.js'
 import { useTreeConversationTopology } from 'src/composables/useTreeConversationTopology.js'
 import { useVirtualScrolling } from 'src/composables/useVirtualScrolling.js'
+import { useInterfaceSizes } from 'src/composables/useInterfaceSizes.js'
 
 import { WSConnectionStatus } from 'src/api/websocket.js'
 
@@ -83,7 +84,7 @@ export default {
       }
       setFocused(id)
       const target = document.querySelector(`.Status[data-status-id=${id}]`)
-      return await scroller.scrollIntoView(target, { block: 'start' })
+      return await scroller.scrollIntoView(target, { block: 'nearest' })
     }
 
     const { statusId } = toRefs(props)
@@ -148,7 +149,6 @@ export default {
           resetDisplayState()
         }
         if (isPage.value) return
-        await tryScrollTo(currentStatus.value.id)
       },
       { flush: 'post' },
     )
@@ -187,18 +187,7 @@ 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 })
+    const { fontSize } = useInterfaceSizes()
 
     // Placeholder heights.
     const mutedStatusHeight = computed(() => fontSize.value * 1.5)
@@ -218,6 +207,8 @@ export default {
       heightChart: heightChartLinear,
       changeSuspendState: changeSuspendStateLinear,
       updateVirtualHeight: updateVirtualHeightLinear,
+      pauseWatchers,
+      resumeWatchers,
     } = useVirtualScrolling({
       list: conversation,
       body: linearElement,
@@ -227,6 +218,16 @@ export default {
       getPlaceholderHeight,
     })
 
+    watch(
+      expanded,
+      async (value) => {
+        pauseWatchers()
+        await tryScrollTo(currentStatus.value.id)
+        resumeWatchers()
+      },
+      { flush: 'post' },
+    )
+
     // # Tree style stuff
     const isTreeView = computed(() => displayStyle.value === 'tree')
     const {
diff --git a/src/composables/useInterfaceSizes.js b/src/composables/useInterfaceSizes.js
new file mode 100644
index 000000000..43bc79be1
--- /dev/null
+++ b/src/composables/useInterfaceSizes.js
@@ -0,0 +1,43 @@
+import { computed, ref, toValue, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
+export function useInterfaceSizes() {
+  const { mergedConfig } = storeToRefs(useMergedConfigStore())
+
+  // 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 })
+
+  const navbarSize = computed(() => {
+    const string = fontSize.value * window
+      .getComputedStyle(document.body)
+      .getPropertyValue('--navbarSize')
+
+    return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
+  })
+
+  const panelHeaderSize = computed(() => {
+    const string = fontSize.value * window
+      .getComputedStyle(document.body)
+      .getPropertyValue('--panelHeaderSize')
+
+    return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
+  })
+
+  return {
+    fontSize,
+    navbarSize,
+    panelHeaderSize,
+  }
+}
diff --git a/src/composables/useScrollPosition.js b/src/composables/useScrollPosition.js
index 6a5e43b18..1cf337314 100644
--- a/src/composables/useScrollPosition.js
+++ b/src/composables/useScrollPosition.js
@@ -1,5 +1,7 @@
 import { onMounted, onUnmounted, ref } from 'vue'
 
+import { useWindowSize } from 'src/composables/useWindowSize.js'
+
 export function useScrollPosition() {
   const x = ref(0)
   const y = ref(0)
@@ -25,8 +27,24 @@ export function useScrollPosition() {
   }
 
   const scrollIntoView = async (element, options) => {
+    if (element == null) throw new TypeError(`Element is ${element}!`)
     inProgress.value = true
-    await element.scrollIntoViewIfNeeded(options)
+    let call = element.scrollIntoViewIfNeeded
+    if (!call) {
+      call = (options) => {
+        const { height: windowHeight } = useWindowSize()
+        const { top, height } = element.getBoundingClientRect()
+        const bottom = top + height
+
+        const biggerThanScreen = height > windowHeight
+        const aboveTop = top < 0
+        const belowBottom = bottom > windowHeight.value
+        if (aboveTop || belowBottom || biggerThanScreen) {
+          element.scrollIntoView(options)
+        }
+      }
+    }
+    await call(options)
     inProgress.value = false
   }
 

From e53222d632d7a6d59ee3308dddf123ba91df9cda Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Sep 2026 17:15:36 +0300
Subject: [PATCH 6/8] fix chromium

---
 src/composables/useScrollPosition.js | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/composables/useScrollPosition.js b/src/composables/useScrollPosition.js
index 1cf337314..d32f6a261 100644
--- a/src/composables/useScrollPosition.js
+++ b/src/composables/useScrollPosition.js
@@ -29,22 +29,19 @@ export function useScrollPosition() {
   const scrollIntoView = async (element, options) => {
     if (element == null) throw new TypeError(`Element is ${element}!`)
     inProgress.value = true
-    let call = element.scrollIntoViewIfNeeded
-    if (!call) {
-      call = (options) => {
-        const { height: windowHeight } = useWindowSize()
-        const { top, height } = element.getBoundingClientRect()
-        const bottom = top + height
+    if (!element.scrollIntoViewIfNeeded) {
+      const { height: windowHeight } = useWindowSize()
+      const { top, height } = element.getBoundingClientRect()
+      const bottom = top + height
 
-        const biggerThanScreen = height > windowHeight
-        const aboveTop = top < 0
-        const belowBottom = bottom > windowHeight.value
-        if (aboveTop || belowBottom || biggerThanScreen) {
-          element.scrollIntoView(options)
-        }
+      const biggerThanScreen = height > windowHeight
+      const aboveTop = top < 0
+      const belowBottom = bottom > windowHeight.value
+      if (aboveTop || belowBottom || biggerThanScreen) {
+        await element.scrollIntoView(options)
       }
     }
-    await call(options)
+    await element.scrollIntoViewIfNeeded(options)
     inProgress.value = false
   }
 

From 725bec12930034b4dd2bc9dcd44734d1ad8cf5fc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Sep 2026 17:24:22 +0300
Subject: [PATCH 7/8] oops

---
 src/components/conversation/conversation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 744fea0fd..8518565a9 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -97,7 +97,7 @@
             :class="{'thread-ancestor-has-other-replies': getReplies(element.id).size > 1, '-faded': shouldFadeAncestors}"
           >
             <Status
-              v-if="element.type === 'status'"
+              v-if="element.type === 'item'"
               class="conversation-status panel-body"
               :class="getStatusClasses(element.item)"
 

From b7943cac84e217a72a528a43a9fd0ba7238037da Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Sep 2026 19:10:01 +0300
Subject: [PATCH 8/8] scroll.

---
 src/components/conversation/conversation.js   | 18 +++--------
 src/components/conversation/conversation.vue  |  2 ++
 src/composables/useConversation.js            |  2 ++
 .../useTreeConversationTopology.js            |  2 +-
 src/composables/useVirtualScrolling.js        | 32 ++++++++++++++-----
 5 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index b77ead529..863e4f61e 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -133,6 +133,7 @@ export default {
     // # Main things
     const {
       currentStatus,
+      mainStatus,
       conversation,
       replies,
       getReplies,
@@ -201,7 +202,7 @@ export default {
     const isLinearView = computed(() => displayStyle.value !== 'tree')
     const linearElement = useTemplateRef('linear')
     const linearScrollCompensation = computed(
-      () => isLinearView.value && isExpanded.value,
+      () => isLinearView.value,
     )
     const {
       heightChart: heightChartLinear,
@@ -214,20 +215,11 @@ export default {
       body: linearElement,
       scrollPositionInstance: scroller,
       scrollCompensation: linearScrollCompensation,
-      anchorId: currentStatus.id,
+      anchorId: mainStatus.value?.id,
+      anchorRepeatId: currentStatus.value?.id,
       getPlaceholderHeight,
     })
 
-    watch(
-      expanded,
-      async (value) => {
-        pauseWatchers()
-        await tryScrollTo(currentStatus.value.id)
-        resumeWatchers()
-      },
-      { flush: 'post' },
-    )
-
     // # Tree style stuff
     const isTreeView = computed(() => displayStyle.value === 'tree')
     const {
@@ -241,7 +233,7 @@ export default {
 
     const ancestorsElement = useTemplateRef('ancestors')
     const treeScrollCompensation = computed(
-      () => isTreeView.value && isExpanded.value,
+      () => isTreeView.value,
     )
     const {
       heightChart: heightChartAncestors,
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 8518565a9..8d4c4f967 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -107,6 +107,8 @@
               :focused="focused === element.item.id"
               conversation-rank="ancestor"
               :data-status-id="element.id"
+              :data-vs-height="element.height"
+              :data-vs-top="element.top"
 
               @goto="setFocused"
               @dive="diveIntoStatus(element.item.id)"
diff --git a/src/composables/useConversation.js b/src/composables/useConversation.js
index 989e12c61..a0cc960cc 100644
--- a/src/composables/useConversation.js
+++ b/src/composables/useConversation.js
@@ -22,6 +22,7 @@ export function useConversation(statusId, expanded) {
 
   const loadError = ref(null)
   const currentStatus = computed(() => getStatusObject(statusId.value))
+  const mainStatus = computed(() => currentStatus.value?.retweeted_status ?? currentStatus.value)
 
   const sortById = (a, b) => {
     const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@@ -115,6 +116,7 @@ export function useConversation(statusId, expanded) {
 
   return {
     currentStatus,
+    mainStatus,
     conversation,
     replies,
     getReplies,
diff --git a/src/composables/useTreeConversationTopology.js b/src/composables/useTreeConversationTopology.js
index b2ce7e23d..6e7e4fb00 100644
--- a/src/composables/useTreeConversationTopology.js
+++ b/src/composables/useTreeConversationTopology.js
@@ -26,7 +26,7 @@ export function useTreeConversationTopology(conversation, replies, current) {
         if (!result.has(id)) {
           result.set(id, new Set())
         }
-        if (irid) {
+        if (irid && conversation.value.length !== 1) {
           // Setting parent for current item
           result.get(id).add(irid)
         }
diff --git a/src/composables/useVirtualScrolling.js b/src/composables/useVirtualScrolling.js
index e08d70304..bb1f11903 100644
--- a/src/composables/useVirtualScrolling.js
+++ b/src/composables/useVirtualScrolling.js
@@ -1,4 +1,4 @@
-import { computed, ref, toValue, watch } from 'vue'
+import { computed, ref, toValue, watch, nextTick } from 'vue'
 
 import { useWindowSize } from 'src/composables/useWindowSize.js'
 
@@ -12,6 +12,7 @@ export function useVirtualScrolling({
   // ID of anchor element, used for scroll compensation.
   // Omitting it makes last element the anchor
   anchorId,
+  anchorRepeatId,
   // whether to use scroll compensation when elements above anchor change
   scrollCompensation,
   // Placeholder height specification. Must be a function.
@@ -69,27 +70,41 @@ export function useVirtualScrolling({
   } = scrollPositionInstance
   watch(heightChart, async (newVal, oldVal) => {
     if (!toValue(scrollCompensation)) return
-    if (scrollInProgress.value) return
+    if (newVal.length === 0 && oldVal.length === 0) return
     pauseWatchers()
 
     // If we're not given an achor, treat last element as one
     const getAnchoredEl = (list) =>
-      anchorId?.value
-        ? list.find(({ id }) => id === anchorId?.value)
+      toValue(anchorId)
+        ? list.find(({ id }) => id === toValue(anchorId) || id === toValue(anchorRepeatId))
         : 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
+    const diff = (() => {
+      if (oldElement && newElement) {
+        // Generic shifting
+        const oldOffset = toValue(anchorId) ? oldElement.top : (oldElement.top + oldElement.height)
+        const newOffset = toValue(anchorId) ? newElement.top : (newElement.top + newElement.height)
+        return newOffset - oldOffset
+      } else if (!oldElement && newElement) {
+        // Expansion
+        return newElement.top + newElement.height
+      } else if (oldElement && !newElement) {
+        // Collapsing
+        return 0 - oldElement.top - oldElement.height
+      } else {
+        throw new Error("Somehow both new and old elements are missing, this shouldn't happen")
+      }
+    })()
 
     if (diff !== 0) {
       // Scroll by amount offset changed to keep it in view
       topScrollBoundary.value += diff
       bottomScrollBoundary.value += diff
-      scrollBy(0, diff)
+      await nextTick()
+      await scrollBy(0, diff)
     }
 
     resumeWatchers()
@@ -212,5 +227,6 @@ export function useVirtualScrolling({
     updateVirtualHeight,
     pauseWatchers,
     resumeWatchers,
+    updateBoundaries,
   }
 }