From b5edf601f49b648d3dab6aa36e96c2827bc0ceff Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 4 Sep 2026 16:45:10 +0300
Subject: [PATCH 01/14] more unused deps

---
 package.json |  2 --
 yarn.lock    | 38 --------------------------------------
 2 files changed, 40 deletions(-)

diff --git a/package.json b/package.json
index 674828e26..29ef7bf5a 100644
--- a/package.json
+++ b/package.json
@@ -67,8 +67,6 @@
     "@vue/devtools-api": "8.2.0",
     "@vue/test-utils": "2.5.0",
     "autoprefixer": "10.5.4",
-    "chalk": "6.0.0",
-    "cross-spawn": "7.0.6",
     "iso-639-1": "3.1.6",
     "playwright": "1.61.0",
     "postcss": "8.5.28",
diff --git a/yarn.lock b/yarn.lock
index 741639b8f..606d9d438 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1499,11 +1499,6 @@ chai@^6.2.2:
   resolved "https://registry.yarnpkg.com/chai/-/chai-6.2.2.tgz#ae41b52c9aca87734505362717f3255facda360e"
   integrity sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==
 
-chalk@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-6.0.0.tgz#a3bae843bc8454f41ef66ef3fd584dcf34dd805d"
-  integrity sha512-2uNTXIuTTxk7ciZgAU1BQcgnchcG0xXnrs6jzkQfj9SsRa9M2s5zE8WT96hS6KmG4MzWHSrvH43DF1m4XRkrFg==
-
 chokidar@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-5.0.0.tgz#949c126a9238a80792be9a0265934f098af369a5"
@@ -1608,15 +1603,6 @@ cropperjs@2.2.0:
     "@cropper/elements" "^2.2.0"
     "@cropper/utils" "^2.2.0"
 
-cross-spawn@7.0.6:
-  version "7.0.6"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
-  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
-  dependencies:
-    path-key "^3.1.0"
-    shebang-command "^2.0.0"
-    which "^2.0.1"
-
 crossws@^0.4.12:
   version "0.4.12"
   resolved "https://registry.yarnpkg.com/crossws/-/crossws-0.4.12.tgz#3be6300b1e5a06db08e890e72eb1c7f6c809c9af"
@@ -2617,11 +2603,6 @@ path-exists@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
-path-key@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
-  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
-
 path-scurry@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-2.0.2.tgz#6be0d0ee02a10d9e0de7a98bae65e182c9061f85"
@@ -3083,18 +3064,6 @@ setprototypeof@~1.2.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
-shebang-command@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
-  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
-  dependencies:
-    shebang-regex "^3.0.0"
-
-shebang-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
-  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
-
 siginfo@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/siginfo/-/siginfo-2.0.0.tgz#32e76c70b79724e3bb567cb9d543eb858ccfaf30"
@@ -3603,13 +3572,6 @@ which@^1.3.1:
   dependencies:
     isexe "^2.0.0"
 
-which@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
-  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
-  dependencies:
-    isexe "^2.0.0"
-
 why-is-node-running@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/why-is-node-running/-/why-is-node-running-2.3.0.tgz#a3f69a97107f494b3cdc3bdddd883a7d65cebf04"

From d0366b24c1fadee1c557f2ed08e633ff6d0aa686 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 4 Sep 2026 17:31:47 +0300
Subject: [PATCH 02/14] try to use vue-virtual-scroller for timeline

---
 src/components/timeline/timeline.js   | 69 +--------------------------
 src/components/timeline/timeline.scss |  4 ++
 src/components/timeline/timeline.vue  | 40 ++++++++++------
 3 files changed, 31 insertions(+), 82 deletions(-)

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 7600e1765..1f4486647 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -38,7 +38,6 @@ const Timeline = {
       showScrollTop: false,
       paused: false,
       unfocused: false,
-      virtualScrollIndex: 0,
       blockingClicks: false,
     }
   },
@@ -102,20 +101,7 @@ const Timeline = {
       }
     },
     statusesToDisplay() {
-      if (!this.virtualScrollingEnabled) {
-        return new Set(this.filteredVisibleStatuses.map(({ id }) => id))
-      }
-
-      const amount = this.timeline.visibleStatusIds.size
-      const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
-      const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)
-      const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide)
-      return new Set(
-        this.filteredVisibleStatuses.slice(min, max).map(({ id }) => id),
-      )
-    },
-    virtualScrollingEnabled() {
-      return useMergedConfigStore().mergedConfig.virtualScrolling
+      return new Set(this.filteredVisibleStatuses.map(({ id }) => id))
     },
     ...mapState(useInterfaceStore, {
       mobileLayout: (store) => store.layoutType === 'mobile',
@@ -135,7 +121,6 @@ const Timeline = {
     }
     window.addEventListener('keydown', this.handleShortKey)
     window.addEventListener('scroll', this.handleScroll)
-    setTimeout(this.determineVisibleStatuses, 250)
   },
   unmounted() {
     this.timelineChange(null, this.timelineRef)
@@ -193,54 +178,6 @@ const Timeline = {
       1000,
       this,
     ),
-    determineVisibleStatuses() {
-      if (!this.$refs.timeline) return
-      if (!this.virtualScrollingEnabled) return
-
-      const statuses = this.$refs.timeline.children
-      if (statuses.length === 0) return
-      const cappedScrollIndex = Math.max(
-        0,
-        Math.min(this.virtualScrollIndex, statuses.length - 1),
-      )
-
-      const height = Math.max(document.body.offsetHeight, window.pageYOffset)
-
-      const centerOfScreen = window.pageYOffset + window.innerHeight * 0.5
-
-      // Start from approximating the index of some visible status by using the
-      // the center of the screen on the timeline.
-      let approxIndex = Math.min(
-        Math.floor(statuses.length * (centerOfScreen / height)),
-        statuses.length - 1,
-      )
-      let err = statuses[approxIndex].getBoundingClientRect().y
-
-      // if we have a previous scroll index that can be used, test if it's
-      // closer than the previous approximation, use it if so
-
-      const virtualScrollIndexY =
-        statuses[cappedScrollIndex].getBoundingClientRect().y
-      if (Math.abs(err) > virtualScrollIndexY) {
-        approxIndex = cappedScrollIndex
-        err = virtualScrollIndexY
-      }
-
-      // if the status is too far from viewport, check the next/previous ones if
-      // they happen to be better
-      while (err < -20 && approxIndex < statuses.length - 1) {
-        err += statuses[approxIndex].offsetHeight
-        approxIndex++
-      }
-      while (err > window.innerHeight + 100 && approxIndex > 0) {
-        approxIndex--
-        err -= statuses[approxIndex].offsetHeight
-      }
-
-      // this status is now the center point for virtual scrolling and visible
-      // statuses will be nearby statuses before and after it
-      this.virtualScrollIndex = approxIndex
-    },
     scrollLoad() {
       // TODO simplify this logic
       const bodyBRect = document.body.getBoundingClientRect()
@@ -253,7 +190,6 @@ const Timeline = {
       }
     },
     handleScroll: throttle(function (e) {
-      this.determineVisibleStatuses()
       this.scrollLoad(e)
     }, 200),
     handleVisibilityChange() {
@@ -264,9 +200,6 @@ const Timeline = {
     timelineRef(newTimeline, oldTimeline) {
       this.timelineChange(newTimeline, oldTimeline)
     },
-    filteredVisibleStatuses() {
-      this.determineVisibleStatuses()
-    },
     newStatusCount(count) {
       if (!useMergedConfigStore().mergedConfig.streaming) {
         return
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 984129bf4..364882232 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -4,6 +4,10 @@
     backdrop-filter: none;
   }
 
+  .vue-recycle-scroller.timeline {
+    overflow: visible;
+  }
+
   .timeline-placeholder {
     background: var(--background);
     display: flex;
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 5b34551bc..7ee4bcfc5 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -77,23 +77,35 @@
       />
     </div>
     <div :class="classes.body">
-      <div
-        ref="timeline"
+      <DynamicScroller
         class="timeline"
+        ref="timeline"
+        :min-item-size="120"
+        :buffer="120"
+        :items="filteredVisibleStatuses"
+        :emit-update="true"
+        flow-mode
         role="feed"
       >
-        <Conversation
-          v-for="status in filteredVisibleStatuses"
-          :key="status.id"
-          role="listitem"
-          class="status-fadein"
-          :status-id="status.id"
-          :in-profile="inProfile"
-          :profile-user-id="timelineRef.argument"
-          :virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.has(status.id)"
-          collapsable
-        />
-      </div>
+        <template #default="{ item: status, index, active }">
+          <DynamicScrollerItem
+            :item="status"
+            :active="active"
+            :index="index"
+            :size-dependencies="[status.status]"
+          >
+            <Conversation
+              :key="status.id"
+              role="listitem"
+              class="status-fadein"
+              :status-id="status.id"
+              :in-profile="inProfile"
+              :profile-user-id="timelineRef.argument"
+              collapsable
+            />
+          </DynamicScrollerItem>
+        </template>
+      </DynamicScroller>
       <template v-if="!hideEmpty && count === 0">
         <div
           v-if="timeline.fetcher.loadingNewer || timeline.fetcher.loadingOlder"

From 78e40e4ce2ca61e3d7ac75d7b1f63cc79ae65d22 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 7 Sep 2026 18:07:01 +0300
Subject: [PATCH 03/14] experimentation

---
 src/components/conversation/conversation.js   |   7 +
 src/components/conversation/conversation.scss |  27 ++-
 src/components/conversation/conversation.vue  | 179 ++++++++++--------
 src/components/status/status.scss             |  15 --
 .../status_history_modal.vue                  |   2 +-
 src/components/thread_tree/thread_tree.vue    |   2 +-
 src/components/timeline/timeline.vue          |   9 +-
 7 files changed, 124 insertions(+), 117 deletions(-)

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 7f0686491..cef442de2 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -495,6 +495,13 @@ const conversation = {
         [id]: nextStatus,
       }
     },
+    getStatusClasses(status, active) {
+      return {
+        '-virtual-active': active,
+        '-last': status.id === this.conversation[this.conversation.length - 1].id,
+        '-first': status.id === this.conversation[0].id,
+      }
+    },
     toggleThreadDisplay(id) {
       const curStatus = this.threadDisplayStatus[id]
       const nextStatus = curStatus === 'showing' ? 'hidden' : 'showing'
diff --git a/src/components/conversation/conversation.scss b/src/components/conversation/conversation.scss
index 99ecb338a..ae06dbfa7 100644
--- a/src/components/conversation/conversation.scss
+++ b/src/components/conversation/conversation.scss
@@ -6,6 +6,15 @@
     backdrop-filter: var(--__panel-backdrop-filter);
   }
 
+  .conversation-status:not(.-last) {
+    border-bottom: 1px solid var(--border);
+  }
+
+  .conversation-status:not(.-last)
+  .conversation-status:not(.-first) {
+    border-radius: 0;
+  }
+
   .conversation-dive-to-top-level-box {
     padding: var(--status-margin);
     border-bottom: 1px solid var(--border);
@@ -49,26 +58,12 @@
     padding: var(--status-margin);
   }
 
-  .conversation-status {
-    border-bottom: 1px solid var(--border);
-    border-radius: 0;
-  }
-
-  .thread-ancestor-has-other-replies .conversation-status,
-  &:last-child:not(.-expanded) .conversation-status,
-  &.-expanded .conversation-status:last-child,
-  .thread-ancestor:last-child .conversation-status,
-  .thread-ancestor:last-child .thread-ancestor-dive-box,
-  &.-expanded .thread-tree .conversation-status {
-    border-bottom: none;
-  }
-
   .thread-ancestors + .thread-tree > .conversation-status {
     border-top: 1px solid var(--border);
   }
 
   /* expanded conversation in timeline */
-  &.status-fadein.-expanded .thread-body {
+  &.-expanded .thread-body {
     border-left: 4px solid var(--cRed);
     border-radius: var(--roundness);
     border-top-left-radius: 0;
@@ -76,7 +71,7 @@
     border-bottom: 1px solid var(--border);
   }
 
-  &.-expanded.status-fadein {
+  &.-expanded:not(.-page) {
     --___margin: calc(var(--status-margin) / 2);
 
     background: var(--background);
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 94c4db188..5199f4443 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -2,7 +2,7 @@
   <div
     v-if="!hide"
     class="Conversation"
-    :class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
+    :class="{ '-expanded' : isExpanded, '-page': isPage, 'panel' : isExpanded }"
   >
     <div
       v-if="isExpanded"
@@ -86,68 +86,78 @@
             </template>
           </i18n-t>
         </div>
-        <div
+        <DynamicScroller
           v-if="shouldShowAncestors"
           class="thread-ancestors"
+          :min-item-size="15"
+          :buffer="500"
+          :items="ancestorsOf(diveRoot)"
+          role="feed"
+          list-tag="article"
+          item-tag="article"
+          :item-class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors, 'thread-ancestor': true }"
+          flow-mode
+          page-mode
         >
-          <article
-            v-for="status in ancestorsOf(diveRoot)"
-            :key="status.id"
-            class="thread-ancestor"
-            :class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
-          >
-            <Status
-              ref="statusComponent"
-              class="conversation-status status-fadein panel-body"
-
-              :status-id="status.id"
-              :replies="getReplies(status.id)"
-
-              :expandable="!isExpanded"
-              :focused="maybeFocused === status.id"
-              :inline-expanded="collapsable && isExpanded"
-              :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-              :in-profile="inProfile"
-              :in-conversation="isExpanded"
-              :profile-user-id="profileUserId"
-              :simple-tree="treeViewIsSimple"
-              :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
-              can-dive
-
-              @goto="setFocused"
-              @dive="() => diveIntoStatus(status.id)"
-              @suspendable-state-change="onStatusSuspendStateChange"
-              @height-change="updateVirtualHeight"
-            />
-            <div
-              v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
-              class="thread-ancestor-dive-box"
+          <template #default="{ item: status, active }">
+            <DynamicScrollerItem
+              :item="status"
+              :active="active"
             >
+              <Status
+                ref="statusComponent"
+                class="conversation-status panel-body"
+                :class="getStatusClasses(status, active)"
+
+                :status-id="status.id"
+                :replies="getReplies(status.id)"
+
+                :expandable="!isExpanded"
+                :focused="maybeFocused === status.id"
+                :inline-expanded="collapsable && isExpanded"
+                :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+                :in-profile="inProfile"
+                :in-conversation="isExpanded"
+                :profile-user-id="profileUserId"
+                :simple-tree="treeViewIsSimple"
+                :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
+                can-dive
+
+                @goto="setFocused"
+                @dive="() => diveIntoStatus(status.id)"
+                @suspendable-state-change="onStatusSuspendStateChange"
+                @height-change="updateVirtualHeight"
+              />
               <div
-                class="thread-ancestor-dive-box-inner"
+                v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
+                class="thread-ancestor-dive-box"
               >
-                <i18n-t
-                  tag="button"
-                  scope="global"
-                  keypath="status.ancestor_follow_with_icon"
-                  class="button-unstyled -link thread-tree-show-replies-button"
-                  @click.prevent="diveIntoStatus(status.id)"
+                <div
+                  class="thread-ancestor-dive-box-inner"
                 >
-                  <template #icon>
-                    <FAIcon
-                      icon="angle-double-right"
-                    />
-                  </template>
-                  <template #text>
-                    <span>
-                      {{ $t('status.ancestor_follow', { numReplies: getReplies(status.id, getReplies(status.id).length - 1).length - 1 }) }}
-                    </span>
-                  </template>
-                </i18n-t>
+                  <i18n-t
+                    tag="button"
+                    scope="global"
+                    keypath="status.ancestor_follow_with_icon"
+                    class="button-unstyled -link thread-tree-show-replies-button"
+                    @click.prevent="diveIntoStatus(status.id)"
+                  >
+                    <template #icon>
+                      <FAIcon
+                        icon="angle-double-right"
+                      />
+                    </template>
+                    <template #text>
+                      <span>
+                        {{ $t('status.ancestor_follow', { numReplies: getReplies(status.id, getReplies(status.id).length - 1).length - 1 }) }}
+                      </span>
+                    </template>
+                  </i18n-t>
+                </div>
               </div>
-            </div>
-          </article>
-        </div>
+            </DynamicScrollerItem>
+          </template>
+        </DynamicScroller>
         <ThreadTree
           v-for="status in showingTopLevel"
           :key="status.id"
@@ -179,34 +189,47 @@
           @height-change="updateVirtualHeight"
         />
       </div>
-      <div
+      <DynamicScroller
         v-else-if="isLinearView"
         class="thread-body"
+        :min-item-size="15"
+        :buffer="500"
+        :items="conversation"
+        page-mode
+        flow-mode
+        role="feed"
+        item-tag="article"
+        item-class="panel-body"
       >
-        <article>
-          <Status
-            v-for="status in conversation"
-            :key="status.id"
-            ref="statusComponent"
-            class="conversation-status status-fadein panel-body"
-            :status-id="status.id"
-            :replies="getReplies(status.id)"
+        <template #default="{ item: status, active }">
+          <DynamicScrollerItem
+            :item="status"
+            :active="active"
+          >
+            <Status
+              :key="status.id"
+              ref="statusComponent"
+              class="conversation-status"
+              :class="getStatusClasses(status, active)"
+              :status-id="status.id"
+              :replies="getReplies(status.id)"
 
-            :expandable="!isExpanded"
-            :focused="maybeFocused === status.id || maybeFocused === status.retweeted_status?.id"
-            :inline-expanded="collapsable && isExpanded"
-            :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-            :in-profile="inProfile"
-            :in-conversation="isExpanded"
-            :profile-user-id="profileUserId"
+              :expandable="!isExpanded"
+              :focused="maybeFocused === status.id || maybeFocused === status.retweeted_status?.id"
+              :inline-expanded="collapsable && isExpanded"
+              :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+              :in-profile="inProfile"
+              :in-conversation="isExpanded"
+              :profile-user-id="profileUserId"
 
-            @goto="setFocused"
-            @toggle-expanded="toggleExpanded"
-            @suspendable-state-change="onStatusSuspendStateChange"
-            @height-change="updateVirtualHeight"
-          />
-        </article>
-      </div>
+              @goto="setFocused"
+              @toggle-expanded="toggleExpanded"
+              @suspendable-state-change="onStatusSuspendStateChange"
+              @height-change="updateVirtualHeight"
+            />
+          </DynamicScrollerItem>
+        </template>
+      </DynamicScroller>
     </div>
   </div>
   <div
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 1b0e3cf3e..74a50355a 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -271,21 +271,6 @@
     }
   }
 
-  .status-fadein {
-    animation-duration: 0.4s;
-    animation-name: fadein;
-  }
-
-  @keyframes fadein {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
   .status-actions {
     position: relative;
     width: 100%;
diff --git a/src/components/status_history_modal/status_history_modal.vue b/src/components/status_history_modal/status_history_modal.vue
index ee5f77fd2..5403844d3 100644
--- a/src/components/status_history_modal/status_history_modal.vue
+++ b/src/components/status_history_modal/status_history_modal.vue
@@ -20,7 +20,7 @@
             :key="status.id"
             :statusoid="status"
             :is-preview="true"
-            class="conversation-status status-fadein panel-body"
+            class="conversation-status panel-body"
           />
         </div>
       </div>
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index be95f8698..d7ae9cd10 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -12,7 +12,7 @@
       :focused="focused === statusId"
       :in-profile="inProfile"
       :profile-user-id="profileUserId"
-      class="conversation-status conversation-status-treeview status-fadein panel-body"
+      class="conversation-status conversation-status-treeview panel-body"
 
       :simple-tree="simple"
       :thread-display-status="threadDisplayStatus[statusId]"
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 7ee4bcfc5..a0087a68d 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -80,24 +80,21 @@
       <DynamicScroller
         class="timeline"
         ref="timeline"
-        :min-item-size="120"
+        :min-item-size="15"
         :buffer="120"
         :items="filteredVisibleStatuses"
-        :emit-update="true"
         flow-mode
+        page-mode
         role="feed"
       >
-        <template #default="{ item: status, index, active }">
+        <template #default="{ item: status, active }">
           <DynamicScrollerItem
             :item="status"
             :active="active"
-            :index="index"
-            :size-dependencies="[status.status]"
           >
             <Conversation
               :key="status.id"
               role="listitem"
-              class="status-fadein"
               :status-id="status.id"
               :in-profile="inProfile"
               :profile-user-id="timelineRef.argument"

From 74f8ef0719669972d5569e1780682f961b2bcfaf Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Sep 2026 03:01:22 +0300
Subject: [PATCH 04/14] massive revision of conversation component,
 specificially threading stuff

---
 src/boot/routes.js                            |   3 +-
 src/components/conversation/conversation.js   | 870 ++++++++----------
 src/components/conversation/conversation.vue  |  36 +-
 src/components/draft/draft.vue                |   2 +-
 src/components/notification/notification.vue  |   2 +-
 src/components/report/report.vue              |   2 +-
 src/components/status/status.js               |  12 +-
 src/components/status/status.vue              |  14 +-
 .../buttons_definitions.js                    |   4 +-
 src/components/thread_tree/thread_tree.js     |  78 +-
 src/components/thread_tree/thread_tree.vue    |  23 +-
 11 files changed, 469 insertions(+), 577 deletions(-)

diff --git a/src/boot/routes.js b/src/boot/routes.js
index 04ad81000..5c911d516 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -83,8 +83,9 @@ export default () => {
     },
     {
       name: 'conversation',
-      path: '/notice/:id',
+      path: '/notice/:statusId',
       component: ConversationPage,
+      props: true,
       meta: { dontScroll: true },
     },
     {
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index cef442de2..3e8932d94 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -1,5 +1,7 @@
 import { get, reduce } from 'lodash-es'
-import { mapState } from 'pinia'
+import { storeToRefs } from 'pinia'
+import { computed, nextTick, ref, watch, toRefs } from 'vue'
+import { useRouter } from 'vue-router'
 
 import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
 import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
@@ -14,7 +16,7 @@ import { useOAuthStore } from 'src/stores/oauth.js'
 import { useStatusesStore } from 'src/stores/statuses.js'
 import { useStreamingStore } from 'src/stores/streaming.js'
 
-import { fetchConversation, fetchStatus } from 'src/api/public.js'
+import { fetchConversation as apiFetchConversation, fetchStatus } from 'src/api/public.js'
 import { WSConnectionStatus } from 'src/api/websocket.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -52,7 +54,7 @@ const sortById = (a, b) => {
   }
 }
 
-const conversation = {
+export default {
   props: {
     statusId: {
       // Main thing
@@ -94,313 +96,6 @@ const conversation = {
     },
   },
   emits: ['update:virtualHeight'],
-  data() {
-    return {
-      focused: null,
-      expanded: false,
-      threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
-      inlineDivePosition: null,
-      loadStatusError: null,
-      unsuspendibleIds: new Set(),
-      virtualHeight: 120,
-    }
-  },
-  created() {
-    if (this.isPage) {
-      this.fetchConversation()
-    }
-  },
-  mounted() {
-    this.updateVirtualHeight()
-  },
-  computed: {
-    status() {
-      return useStatusesStore().allStatuses.get(this.statusId)
-    },
-    maxDepthToShowByDefault() {
-      // maxDepthInThread = max number of depths that is *visible*
-      // since our depth starts with 0 and "showing" means "showing children"
-      // there is a -2 here
-      const maxDepth = this.mergedConfig.maxDepthInThread - 2
-      return maxDepth >= 1 ? maxDepth : 1
-    },
-    streamingEnabled() {
-      return (
-        this.mergedConfig.useStreamingApi &&
-        this.mastoUserSocketStatus === WSConnectionStatus.JOINED
-      )
-    },
-    displayStyle() {
-      return this.mergedConfig.conversationDisplay
-    },
-    treeViewIsSimple() {
-      return !this.mergedConfig.conversationTreeAdvanced
-    },
-    isTreeView() {
-      return this.displayStyle === 'tree'
-    },
-    isLinearView() {
-      return this.displayStyle !== 'tree'
-    },
-    shouldFadeAncestors() {
-      return this.mergedConfig.conversationTreeFadeAncestors
-    },
-    otherRepliesButtonPosition() {
-      return this.mergedConfig.conversationOtherRepliesButton
-    },
-    showOtherRepliesButtonBelowStatus() {
-      return this.otherRepliesButtonPosition === 'below'
-    },
-    showOtherRepliesButtonInsideStatus() {
-      return this.otherRepliesButtonPosition === 'inside'
-    },
-    suspendable() {
-      return this.unsuspendibleIds.size === 0
-    },
-    hide() {
-      return this.virtualHidden && this.suspendable
-    },
-    originalStatusId() {
-      if (this.status.retweeted_status) {
-        return this.status.retweeted_status.id
-      } else {
-        return this.statusId
-      }
-    },
-    conversationId() {
-      return this.getConversationId(this.statusId)
-    },
-    conversation() {
-      if (!this.status) {
-        return []
-      }
-
-      if (!this.isExpanded) {
-        return [this.status]
-      }
-
-      const conversation = useStatusesStore().conversations.get(
-        this.conversationId,
-      )
-
-      return [...conversation.keys()]
-        .map((k) => useStatusesStore().allStatuses.get(k))
-        .filter((status) => status.type != 'repeat') // Old backend behavior?
-        .toSorted(sortById)
-    },
-    statusMap() {
-      return this.conversation.reduce((res, s) => {
-        res[s.id] = s
-        return res
-      }, {})
-    },
-    threadTree() {
-      const reverseLookupTable = this.conversation.reduce(
-        (table, status, index) => {
-          table[status.id] = index
-          return table
-        },
-        {},
-      )
-
-      const threads = this.conversation.reduce(
-        (a, cur) => {
-          const id = cur.id
-          a.forest[id] = this.getReplies(id).map((s) => s.id)
-
-          return a
-        },
-        {
-          forest: {},
-        },
-      )
-
-      const walk = (forest, topLevel, depth = 0, processed = {}) =>
-        topLevel
-          .map((id) => {
-            if (processed[id]) {
-              return []
-            }
-
-            processed[id] = true
-            return [
-              {
-                status: this.conversation[reverseLookupTable[id]],
-                id,
-                depth,
-              },
-              walk(forest, forest[id], depth + 1, processed),
-            ].flat()
-          })
-          .flat()
-
-      const linearized = walk(
-        threads.forest,
-        this.topLevel.map((k) => k.id),
-      )
-
-      return linearized
-    },
-    replyIds() {
-      return this.conversation
-        .map((k) => k.id)
-        .reduce((res, id) => {
-          res[id] = (this.replies[id] || []).map((k) => k.id)
-          return res
-        }, {})
-    },
-    totalReplyCount() {
-      const sizes = {}
-      const subTreeSizeFor = (id) => {
-        if (sizes[id]) {
-          return sizes[id]
-        }
-        sizes[id] =
-          1 +
-          this.replyIds[id]
-            .map((cid) => subTreeSizeFor(cid))
-            .reduce((a, b) => a + b, 0)
-        return sizes[id]
-      }
-      this.conversation.map((k) => k.id).map(subTreeSizeFor)
-      return Object.keys(sizes).reduce((res, id) => {
-        res[id] = sizes[id] - 1 // exclude itself
-        return res
-      }, {})
-    },
-    totalReplyDepth() {
-      const depths = {}
-      const subTreeDepthFor = (id) => {
-        if (depths[id]) {
-          return depths[id]
-        }
-        depths[id] =
-          1 +
-          this.replyIds[id]
-            .map((cid) => subTreeDepthFor(cid))
-            .reduce((a, b) => (a > b ? a : b), 0)
-        return depths[id]
-      }
-      this.conversation.map((k) => k.id).map(subTreeDepthFor)
-      return Object.keys(depths).reduce((res, id) => {
-        res[id] = depths[id] - 1 // exclude itself
-        return res
-      }, {})
-    },
-    depths() {
-      return this.threadTree.reduce((a, k) => {
-        a[k.id] = k.depth
-        return a
-      }, {})
-    },
-    topLevel() {
-      const topLevel = this.conversation.reduce(
-        (tl, cur) =>
-          tl.filter(
-            (k) =>
-              !this.getReplies(cur.id)
-                .map((v) => v.id)
-                .includes(k.id),
-          ),
-        this.conversation,
-      )
-      return topLevel
-    },
-    otherTopLevelCount() {
-      return this.topLevel.length - 1
-    },
-    showingTopLevel() {
-      if (this.canDive && this.diveRoot) {
-        return [this.statusMap[this.diveRoot]]
-      }
-      return this.topLevel
-    },
-    diveRoot() {
-      const statusId = this.inlineDivePosition || this.statusId
-      const isTopLevel = !this.parentOf(statusId)
-      return isTopLevel ? null : statusId
-    },
-    diveDepth() {
-      return this.canDive && this.diveRoot ? this.depths[this.diveRoot] : 0
-    },
-    diveMode() {
-      return this.canDive && !!this.diveRoot
-    },
-    shouldShowAllConversationButton() {
-      // The "show all conversation" button tells the user that there exist
-      // other toplevel statuses, so do not show it if there is only a single root
-      return (
-        this.isTreeView &&
-        this.isExpanded &&
-        this.diveMode &&
-        this.topLevel.length > 1
-      )
-    },
-    shouldShowAncestors() {
-      return (
-        this.isTreeView &&
-        this.isExpanded &&
-        this.ancestorsOf(this.diveRoot).length
-      )
-    },
-    replies() {
-      let i = 1
-
-      return reduce(
-        this.conversation,
-        (result, { id, in_reply_to_status_id: irid }) => {
-          if (irid) {
-            result[irid] = result[irid] || []
-            result[irid].push({
-              name: `#${i}`,
-              id,
-            })
-          }
-          i++
-          return result
-        },
-        {},
-      )
-    },
-    isExpanded() {
-      return !!(this.expanded || this.isPage)
-    },
-    hiddenStyle() {
-      return { height: this.virtualHeight + 'px' }
-    },
-    threadDisplayStatus() {
-      return this.conversation.reduce((a, k) => {
-        const id = k.id
-        const depth = this.depths[id]
-        const status = (() => {
-          if (this.threadDisplayStatusObject[id]) {
-            return this.threadDisplayStatusObject[id]
-          }
-          if (depth - this.diveDepth <= this.maxDepthToShowByDefault) {
-            return 'showing'
-          } else {
-            return 'hidden'
-          }
-        })()
-
-        a[id] = status
-        return a
-      }, {})
-    },
-    canDive() {
-      return this.isTreeView && this.isExpanded
-    },
-    maybeFocused() {
-      return this.isExpanded ? this.focused : null
-    },
-    ...mapState(useMergedConfigStore, ['mergedConfig']),
-    ...mapState(useStreamingStore, {
-      mastoUserSocketStatus: (state) => state.state,
-    }),
-    ...mapState(useInterfaceStore, {
-      mobileLayout: (store) => store.layoutType === 'mobile',
-    }),
-  },
   components: {
     ThreadTree,
     QuickFilterSettings,
@@ -409,149 +104,316 @@ const conversation = {
     PostStatusForm,
     RichContent,
   },
-  watch: {
-    statusId(newVal, oldVal) {
-      const newConversationId = this.getConversationId(newVal)
-      const oldConversationId = this.getConversationId(oldVal)
-      if (
-        newConversationId &&
-        oldConversationId &&
-        newConversationId === oldConversationId
-      ) {
-        this.setFocused(this.originalStatusId)
-      } else {
-        this.fetchConversation()
-      }
-    },
-    expanded(value) {
-      if (value) {
-        this.fetchConversation()
-      } else {
-        this.resetDisplayState()
-      }
-    },
-    virtualHidden() {
-      this.updateVirtualHeight()
-    },
-  },
-  methods: {
-    fetchConversation() {
-      if (this.status) {
-        fetchConversation({
-          id: this.statusId,
-          credentials: useOAuthStore().token,
-        }).then(({ data: { ancestors, descendants }, timestamp }) => {
-          useStatusesStore().addNewStatuses({ statuses: ancestors, timestamp })
-          useStatusesStore().addNewStatuses({
-            statuses: descendants,
-            timestamp,
-          })
-          this.setFocused(this.originalStatusId)
-        })
-      } else {
-        this.loadStatusError = null
-        fetchStatus({
-          id: this.statusId,
-          credentials: useOAuthStore().token,
-        })
-          .then(({ data: status }) => {
-            useStatusesStore().addNewStatuses({ statuses: [status] })
-            this.fetchConversation()
-          })
-          .catch((error) => {
-            console.error(error)
-            this.loadStatusError = error
-          })
-      }
-    },
-    getReplies(id) {
-      return this.replies[id] || []
-    },
-    setFocused(id) {
-      if (!id) return
-      this.focused = id
+  setup(props, ctx) {
+    const { emit } = ctx
+    const {
+      statusId,
+      collapsable,
+      pinnedStatusIdsObject,
+      inProfile,
+      profileUserId,
+      virtualHidden,
+    } = toRefs(props)
+    const router = useRouter()
 
-      if (!this.streamingEnabled) {
-        useStatusesStore().fetchStatus(id)
-      }
+    const hoisted = {}
 
-      useStatusesStore().fetchFavsAndRepeats(id)
-      useStatusesStore().fetchEmojiReactions(id)
-    },
-    toggleExpanded() {
-      this.expanded = !this.expanded
-    },
-    getConversationId(statusId) {
-      const status = useStatusesStore().allStatuses.get(statusId)
+    // # Main Configuration
+    const { mergedConfig } = storeToRefs(useMergedConfigStore())
+    const { mastoUserSocketStatus } = storeToRefs(useStreamingStore())
+    const displayStyle = computed(() => mergedConfig.value.conversationDisplay)
+    const streamingEnabled = computed(() =>
+      mergedConfig.value.useStreamingApi &&
+        mastoUserSocketStatus === WSConnectionStatus.JOINED
+    )
+
+    // # Main things
+    const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
+    const getConversationId = (statusId) => {
+      const status = getStatusObject(statusId)
       return get(
         status,
         'retweeted_status.statusnet_conversation_id',
         get(status, 'statusnet_conversation_id'),
       )
-    },
-    setThreadDisplay(id, nextStatus) {
-      this.threadDisplayStatusObject = {
-        ...this.threadDisplayStatusObject,
-        [id]: nextStatus,
+    }
+
+    const status = computed(() => getStatusObject(statusId.value))
+    const mainStatusId = computed(() => {
+      if (status.value.retweeted_status) {
+        return status.value.retweeted_status.id
+      } else {
+        return statusId.value
       }
-    },
-    getStatusClasses(status, active) {
-      return {
-        '-virtual-active': active,
-        '-last': status.id === this.conversation[this.conversation.length - 1].id,
-        '-first': status.id === this.conversation[0].id,
+    })
+    const conversationId = computed(() => getConversationId(statusId.value))
+    const conversation = computed(() => {
+      if (!status.value) {
+        return []
       }
-    },
-    toggleThreadDisplay(id) {
-      const curStatus = this.threadDisplayStatus[id]
-      const nextStatus = curStatus === 'showing' ? 'hidden' : 'showing'
-      this.setThreadDisplay(id, nextStatus)
-    },
-    setThreadDisplayRecursively(id, nextStatus) {
-      this.setThreadDisplay(id, nextStatus)
-      this.getReplies(id)
-        .map((k) => k.id)
-        .map((id) => this.setThreadDisplayRecursively(id, nextStatus))
-    },
-    showThreadRecursively(id) {
-      this.setThreadDisplayRecursively(id, 'showing')
-    },
-    leastVisibleAncestor(id) {
-      let cur = id
-      let parent = this.parentOf(cur)
-      while (cur) {
-        // if the parent is showing it means cur is visible
-        if (this.threadDisplayStatus[parent] === 'showing') {
-          return cur
-        }
-        parent = this.parentOf(parent)
-        cur = this.parentOf(cur)
+
+      if (!isExpanded.value) {
+        return [status.value]
       }
-      // nothing found, fall back to toplevel
-      return this.topLevel[0] ? this.topLevel[0].id : undefined
-    },
-    diveIntoStatus(id) {
-      this.tryScrollTo(id)
-    },
-    diveToTopLevel() {
-      this.tryScrollTo(
-        this.topLevelAncestorOrSelfId(this.diveRoot) || this.topLevel[0].id,
+
+      const conversation = useStatusesStore().conversations.get(
+        conversationId.value,
       )
-    },
-    // only used when we are not on a page
-    undive() {
-      this.inlineDivePosition = null
-      this.setFocused(this.statusId)
-    },
-    tryScrollTo(id) {
+
+      return [...conversation.keys()]
+        .map((k) => useStatusesStore().allStatuses.get(k))
+        .filter((status) => status.type != 'repeat') // Old backend behavior?
+        .toSorted(sortById)
+    })
+    const replies = computed(() =>
+      conversation.value.reduce(
+        (
+          result,
+          { id, in_reply_to_status_id: irid },
+          index,
+        ) => {
+          if (irid) {
+            if (!result.has(irid)) {
+              result.set(irid, new Set())
+            }
+            result.get(irid).add({
+              name: `#${index}`,
+              id,
+            })
+          }
+          return result
+        },
+        new Map(),
+      )
+    )
+    const getReplies = (id) => replies.value.get(id) ?? new Set()
+
+    const fetchConversation = async () => {
+      if (status.value) {
+        const {
+          data: {
+            ancestors,
+            descendants
+          },
+          timestamp
+        } = await apiFetchConversation({
+          id: statusId.value,
+          credentials: useOAuthStore().token,
+        })
+
+        useStatusesStore().addNewStatuses({ statuses: ancestors, timestamp })
+        useStatusesStore().addNewStatuses({
+          statuses: descendants,
+          timestamp,
+        })
+        setFocused(mainStatusId.value)
+      } else {
+        try {
+          loadStatusError.value = null
+
+          const { data: status } = await fetchStatus({
+            id: statusId.value,
+            credentials: useOAuthStore().token,
+          })
+
+          useStatusesStore().addNewStatuses({ statuses: [status] })
+          fetchConversation()
+        } catch (error) {
+          console.error(error)
+          loadStatusError.value = error
+        }
+      }
+    }
+    const resetDisplayState = () => {
+      hoisted.undive()
+      threadDisplay.value = new Map()
+    }
+
+    // # Virtual scrolling stuff
+    const unsuspendibleIds = ref(new Set())
+    const suspendable = computed(() => unsuspendibleIds.value.size === 0)
+    const hide = computed(() => virtualHidden.value && suspendable.value)
+    const onStatusSuspendStateChange = ({ id, suspend }) => {
+      if (!suspend) {
+        unsuspendibleIds.value.add(id)
+      } else {
+        unsuspendibleIds.value.delete(id)
+      }
+    }
+
+    // # Misc UI things
+    const loadStatusError = ref(null)
+
+    const { layoutType } = storeToRefs(useInterfaceStore())
+    const mobileLayout = computed(() => layoutType.value === 'mobile')
+    const firstStatus = computed(() => conversation.value[0])
+    const lastStatus = computed(() => conversation.value[conversation.value.legnth - 1])
+    const getStatusClasses = (status, active) => ({
+      '-virtual-active': active,
+      '-first': status.id === firstStatus.value?.id,
+      '-last': status.id === lastStatus.value?.id,
+    })
+
+    // # Conversation Expansion
+    const expanded = ref(false)
+    const { isPage } = toRefs(props)
+    const isExpanded = computed(() => !!(expanded.value || isPage.value))
+    const toggleExpanded = () => {
+      expanded.value = !expanded.value
+    }
+    watch(expanded, (value) => {
+      if (value) {
+        fetchConversation()
+      } else {
+        resetDisplayState()
+      }
+    })
+
+    // # Focus
+    const focused = ref(null)
+    const maybeFocused = computed(() => isExpanded.value ? focused.value : null)
+    const setFocused = (id) => {
+      if (!id) return
+      focused.value = id
+
+      if (!streamingEnabled.value) {
+        useStatusesStore().fetchStatus(id)
+      }
+
+      useStatusesStore().fetchFavsAndRepeats(id)
+      useStatusesStore().fetchEmojiReactions(id)
+    }
+    watch(statusId, (newVal, oldVal) => {
+      const newConversationId = getConversationId(newVal)
+      const oldConversationId = getConversationId(oldVal)
+      if (
+        newConversationId &&
+        oldConversationId &&
+        newConversationId === oldConversationId
+      ) {
+        setFocused(mainStatusId.value)
+      } else {
+        fetchConversation()
+      }
+    })
+
+    // Component created
+    if (isPage.value) {
+      fetchConversation()
+    }
+
+    // # Linear style stuff
+    const isLinearView = computed(() => displayStyle.value !== 'tree')
+
+    // # Tree style stuff
+    const isTreeView = computed(() => displayStyle.value === 'tree')
+
+    // ## Tree view settings
+    const treeViewIsSimple = computed(() => !mergedConfig.value.conversationTreeAdvanced)
+    const shouldFadeAncestors = computed(() => mergedConfig.value.conversationTreeFadeAncestors)
+    const otherRepliesButtonPosition = computed(() => mergedConfig.value.conversationOtherRepliesButton)
+    const showOtherRepliesButtonBelowStatus = computed(() => otherRepliesButtonPosition.value === 'below')
+    const showOtherRepliesButtonInsideStatus = computed(() => otherRepliesButtonPosition.value === 'inside')
+    const maxDepthToShowByDefault = computed(() => {
+      // maxDepthInThread = max number of depths that is *visible*
+      // since our depth starts with 0 and "showing" means "showing children"
+      // there is a -2 here
+      const maxDepth = mergedConfig.value.maxDepthInThread - 2
+      return Math.min(1, maxDepth)
+    })
+
+    // ## Tree style state
+    // ### Dive
+    const inlineDivePosition = ref(null)
+    const currentStatusId = computed(() => inlineDivePosition.value ?? statusId.value)
+
+    // ### Topology
+    const ancestors = computed(() => {
+      // First we fill map with empty sets and add given id's parent
+      // as set's only element (if any)
+      const parentMap = conversation.value.reduce(
+        (
+          result,
+          { id, in_reply_to_status_id: irid },
+        ) => {
+          if (!result.has(id)) {
+            result.set(id, new Set())
+          }
+          if (irid) {
+            // Setting parent for current item
+            result.get(id).add(irid)
+          }
+          return result
+        },
+        new Map()
+      )
+
+      // Next we iterate over each entry and fill the whole ancestry chain
+      parentMap.entries().forEach(([originId, originSet]) => {
+        let current = originSet.values().next().value
+        while (current) {
+          originSet.add(current)
+
+          const parent = parentMap.get(current) ?? new Set()
+
+          current = parent.values().next().value
+        }
+      })
+      return parentMap
+    })
+    const getAncestorIds = (id) => ancestors.value.get(id) ?? new Set()
+    const getAncestors = (id) => [...getAncestorIds(id)].map(getStatusObject).filter(Boolean)
+    const currentAncestors = computed(() => getAncestors(currentStatusId.value).reverse())
+    const currentDepth = computed(() => currentAncestors.value.length)
+    const topLevel = computed(() => [...ancestors.value.entries()]
+      .filter(([id, ancestors]) => ancestors.size === 0)
+      .map(([id]) => getStatusObject(id))
+    )
+    const currentStatus = computed(() => getStatusObject(currentStatusId.value))
+
+    // ### Thread Display
+    const threadDisplay = ref(new Map()) // id => 'showing' | 'hidden'
+    const threadDisplayDefault = computed(() => {
+      return conversation.value.reduce((map, status) => {
+        const { id } = status
+        const depth = ancestors.value.get(id).size
+
+        const state = (() => {
+          if (depth - currentDepth.value <= maxDepthToShowByDefault.value) {
+            return 'showing'
+          } else {
+            return 'hidden'
+          }
+        })()
+
+        map.set(id, state)
+        return map
+      }, new Map())
+    })
+
+    const setThreadDisplayRecursively = (id, value) => {
+      threadDisplay.value.set(id, value)
+      ;[...getReplies(id)]
+        .map((k) => k.id)
+        .map((id) => setThreadDisplayRecursively(id, value))
+    }
+    const showThreadRecursively = (id) => {
+      setThreadDisplayRecursively(id, 'showing')
+    }
+
+    // ## Derived values
+    const shouldShowAllConversationButton = computed(() => currentAncestors.value.length > 0 && topLevel.value.length > 1)
+    const shouldShowAncestors = computed(() => isExpanded.value && ancestors.value.get(currentStatusId.value) != null)
+
+    // # Scrolling / diving
+    const tryScrollTo = (id) => {
       if (!id) {
         return
       }
-      if (this.isPage) {
-        // set statusId
-        this.$router.push({ name: 'conversation', params: { id } })
+      if (isPage.value) {
+        router.push({ name: 'conversation', params: { statusId: id } })
       } else {
-        this.inlineDivePosition = id
+        inlineDivePosition.value = id
       }
       // Because the conversation can be unmounted when out of sight
       // and mounted again when it comes into sight,
@@ -568,78 +430,64 @@ const conversation = {
       // different).
       // Here, let the components be rendered first, in order to trigger
       // the `focused` watcher.
-      this.$nextTick(() => {
-        this.setFocused(id)
+      nextTick(() => {
+        setFocused(id)
       })
-    },
-    goToCurrent() {
-      this.tryScrollTo(this.diveRoot || this.topLevel[0].id)
-    },
-    statusById(id) {
-      return this.statusMap[id]
-    },
-    parentOf(id) {
-      const status = this.statusById(id)
-      if (!status) {
-        return undefined
-      }
-      const { in_reply_to_status_id: parentId } = status
-      if (!this.statusMap[parentId]) {
-        return undefined
-      }
-      return parentId
-    },
-    parentOrSelf(id) {
-      return this.parentOf(id) || id
-    },
-    // Ancestors of some status, from top to bottom
-    ancestorsOf(id) {
-      const ancestors = []
-      let cur = this.parentOf(id)
-      while (cur) {
-        ancestors.unshift(this.statusMap[cur])
-        cur = this.parentOf(cur)
-      }
-      return ancestors
-    },
-    topLevelAncestorOrSelfId(id) {
-      let cur = id
-      let parent = this.parentOf(id)
-      while (parent) {
-        cur = this.parentOf(cur)
-        parent = this.parentOf(parent)
-      }
-      return cur
-    },
-    resetDisplayState() {
-      this.undive()
-      this.threadDisplayStatusObject = {}
-    },
-    onStatusSuspendStateChange({ id, suspend }) {
-      if (!suspend) {
-        this.unsuspendibleIds.add(id)
-      } else {
-        this.unsuspendibleIds.delete(id)
-      }
-    },
-    onPosted(data) {
-      if (this.isPage) {
-        this.$router.push({ name: 'conversation', params: { id: data.id } })
-      }
-    },
-    updateVirtualHeight() {
-      if (this.hide) return // no updates when not rendering
-      if (!this.status) return // not loaded yet
-      this.$nextTick(() => {
-        this.virtualHeight = this.$refs.body.getBoundingClientRect().height
-        this.$emit('update:virtualHeight', {
-          id: this.status.id,
-          height: this.virtualHeight,
-          top: this.$el.clientTop,
-        })
-      })
-    },
-  },
-}
+    }
+    const goToCurrent = () => {
+      tryScrollTo(diveRoot)
+    }
+    const diveIntoStatus = (id) => {
+      tryScrollTo(id)
+    }
+    const diveToTopLevel = () => {
+      tryScrollTo(currentAncestors.value[0].id)
+    }
+    const undive = () => {
+      inlineDivePosition.value = null
+      setFocused(statusId.value)
+    }
+    hoisted.undive = undive
 
-export default conversation
+    return {
+      ...hoisted,
+      isLinearView,
+      isTreeView,
+      isExpanded,
+      conversation,
+      hide,
+      collapsable,
+      mobileLayout,
+      toggleExpanded,
+      isPage,
+      status,
+      loadStatusError,
+      maybeFocused,
+      setFocused,
+      showOtherRepliesButtonBelowStatus,
+      showOtherRepliesButtonInsideStatus,
+      onStatusSuspendStateChange,
+      getStatusClasses,
+      getReplies,
+      currentAncestors,
+      statusId,
+      collapsable,
+      pinnedStatusIdsObject,
+      inProfile,
+      profileUserId,
+      virtualHidden,
+      shouldShowAncestors,
+      shouldShowAllConversationButton,
+      topLevel,
+      shouldFadeAncestors,
+      currentStatus,
+      treeViewIsSimple,
+      diveToTopLevel,
+      threadDisplay,
+      threadDisplayDefault,
+      replies,
+      diveIntoStatus,
+      showThreadRecursively,
+    }
+  }
+}
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 5199f4443..87c52c814 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -81,7 +81,7 @@
             </template>
             <template #text>
               <span>
-                {{ $t('status.show_all_conversation', { numStatus: otherTopLevelCount }, otherTopLevelCount) }}
+                {{ $t('status.show_all_conversation', { numStatus: topLevel.length - 1 }, topLevel.length - 1) }}
               </span>
             </template>
           </i18n-t>
@@ -91,11 +91,11 @@
           class="thread-ancestors"
           :min-item-size="15"
           :buffer="500"
-          :items="ancestorsOf(diveRoot)"
+          :items="currentAncestors"
           role="feed"
           list-tag="article"
           item-tag="article"
-          :item-class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors, 'thread-ancestor': true }"
+          :item-class="{'thread-ancestor-has-other-replies': getReplies(status.id).size > 1, '-faded': shouldFadeAncestors, 'thread-ancestor': true }"
           flow-mode
           page-mode
         >
@@ -105,7 +105,6 @@
               :active="active"
             >
               <Status
-                ref="statusComponent"
                 class="conversation-status panel-body"
                 :class="getStatusClasses(status, active)"
 
@@ -119,17 +118,15 @@
                 :in-profile="inProfile"
                 :in-conversation="isExpanded"
                 :profile-user-id="profileUserId"
-                :simple-tree="treeViewIsSimple"
                 :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
                 can-dive
 
                 @goto="setFocused"
                 @dive="() => diveIntoStatus(status.id)"
                 @suspendable-state-change="onStatusSuspendStateChange"
-                @height-change="updateVirtualHeight"
               />
               <div
-                v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
+                v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).size > 1"
                 class="thread-ancestor-dive-box"
               >
                 <div
@@ -149,7 +146,7 @@
                     </template>
                     <template #text>
                       <span>
-                        {{ $t('status.ancestor_follow', { numReplies: getReplies(status.id, getReplies(status.id).length - 1).length - 1 }) }}
+                        {{ $t('status.ancestor_follow', { numReplies: getReplies(status.id, getReplies(status.id).size - 1).size - 1 }) }}
                       </span>
                     </template>
                   </i18n-t>
@@ -159,12 +156,10 @@
           </template>
         </DynamicScroller>
         <ThreadTree
-          v-for="status in showingTopLevel"
-          :key="status.id"
-          ref="statusComponent"
+          :key="currentStatus.id"
           :depth="0"
 
-          :status-id="status.id"
+          :status-id="currentStatus.id"
           :in-profile="inProfile"
           :conversation="conversation"
           :collapsable="collapsable"
@@ -172,21 +167,18 @@
           :pinned-status-ids-object="pinnedStatusIdsObject"
           :profile-user-id="profileUserId"
 
-          :get-replies="getReplies"
+          :replies="replies"
           :focused="maybeFocused"
-          :toggle-expanded="toggleExpanded"
 
-          :simple="treeViewIsSimple"
-          :thread-display-status="threadDisplayStatus"
-          :show-thread-recursively="showThreadRecursively"
-          :total-reply-count="totalReplyCount"
-          :total-reply-depth="totalReplyDepth"
-          :can-dive="canDive"
+          :thread-display="threadDisplay"
+          :thread-display-default="threadDisplayDefault"
+          :can-dive="isExpanded"
 
           @goto="setFocused"
           @dive="diveIntoStatus"
+          @toggle-expanded="toggleExpanded"
+          @show-thread-recursively="showThreadRecursively"
           @suspendable-state-change="onStatusSuspendStateChange"
-          @height-change="updateVirtualHeight"
         />
       </div>
       <DynamicScroller
@@ -208,7 +200,6 @@
           >
             <Status
               :key="status.id"
-              ref="statusComponent"
               class="conversation-status"
               :class="getStatusClasses(status, active)"
               :status-id="status.id"
@@ -225,7 +216,6 @@
               @goto="setFocused"
               @toggle-expanded="toggleExpanded"
               @suspendable-state-change="onStatusSuspendStateChange"
-              @height-change="updateVirtualHeight"
             />
           </DynamicScrollerItem>
         </template>
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
index a644eb6d7..6c266fd27 100644
--- a/src/components/draft/draft.vue
+++ b/src/components/draft/draft.vue
@@ -13,7 +13,7 @@
           <template #statusLink>
             <router-link
               class="faint-link"
-              :to="{ name: 'conversation', params: { id: draft.refId } }"
+              :to="{ name: 'conversation', params: { statusId: draft.refId } }"
             >
               {{ refStatus ? refStatus.external_url : $t('drafts.unavailable') }}
             </router-link>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 156c9ac11..c076ac783 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -166,7 +166,7 @@
           >
             <router-link
               v-if="notification.status"
-              :to="{ name: 'conversation', params: { id: notification.status.id } }"
+              :to="{ name: 'conversation', params: { statusId: notification.status.id } }"
               class="timeago-link faint"
             >
               <Timeago
diff --git a/src/components/report/report.vue b/src/components/report/report.vue
index 32aaaffdc..0ba4da515 100644
--- a/src/components/report/report.vue
+++ b/src/components/report/report.vue
@@ -38,7 +38,7 @@
       <router-link
         v-for="status in report.statuses"
         :key="status.id"
-        :to="{ name: 'conversation', params: { id: status.id } }"
+        :to="{ name: 'conversation', params: { statusId: status.id } }"
         class="reported-status"
       >
         <div class="reported-status-heading">
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 814b3e3c8..8ad8d684b 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -96,7 +96,7 @@ const Status = {
   props: {
     statusId: String,
     statusoid: Object,
-    replies: Array,
+    replies: Set,
 
     expandable: Boolean,
     focused: Boolean,
@@ -109,12 +109,11 @@ const Status = {
     inQuote: Boolean,
 
     profileUserId: String,
-    simpleTree: Boolean,
     showOtherRepliesAsButton: Boolean,
     canDive: Boolean,
     ignoreMute: Boolean,
 
-    threadDisplayStatus: String,
+    threadDisplayState: String,
   },
   emits: [
     'goto',
@@ -166,6 +165,9 @@ const Status = {
     user() {
       return useUsersStore().findUser(this.mainStatus.user.id)
     },
+    simpleTree() {
+      return !this.mergedConfig.conversationTreeAdvanced
+    },
     showReasonMutedThread() {
       return (
         (this.mainStatus.thread_muted || this.repeatStatus?.thread_muted) &&
@@ -436,10 +438,10 @@ const Status = {
       return !this.replying && this.mediaPlaying.size === 0
     },
     inThreadForest() {
-      return !!this.threadDisplayStatus
+      return !!this.threadDisplayState
     },
     threadShowing() {
-      return this.threadDisplayStatus === 'showing'
+      return this.threadDisplayState === 'showing'
     },
     visibilityLocalized() {
       return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index db303daae..4322c6033 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -180,7 +180,7 @@
                 </span>
                 <router-link
                   class="timeago faint"
-                  :to="{ name: 'conversation', params: { id: status.id } }"
+                  :to="{ name: 'conversation', params: { statusId: status.id } }"
                 >
                   <Timeago
                     :time="mainStatus.created_at"
@@ -222,7 +222,7 @@
                   />
                 </button>
                 <button
-                  v-if="inThreadForest && replies?.length && !simpleTree"
+                  v-if="inThreadForest && replies?.size && !simpleTree"
                   class="button-unstyled"
                   :title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
                   :aria-expanded="threadShowing ? 'true' : 'false'"
@@ -423,16 +423,16 @@
           />
 
           <div
-            v-if="inConversation && !isPreview && replies?.length"
+            v-if="inConversation && !isPreview && replies?.size"
             class="replies"
           >
             <button
-              v-if="showOtherRepliesAsButton && replies.length > 1"
+              v-if="showOtherRepliesAsButton && replies.size > 1"
               class="button-unstyled -link"
-              :title="$t('status.ancestor_follow', { numReplies: replies.length - 1 }, replies.length - 1)"
+              :title="$t('status.ancestor_follow', { numReplies: replies.size - 1 }, replies.size - 1)"
               @click.prevent="$emit('dive')"
             >
-              {{ $t('status.replies_list_with_others', { numReplies: replies.length - 1 }, replies.length - 1) }}
+              {{ $t('status.replies_list_with_others', { numReplies: replies.size - 1 }, replies.size - 1) }}
             </button>
             <span
               v-else
@@ -441,7 +441,7 @@
               {{ $t('status.replies_list') }}
             </span>
             <StatusPopover
-              v-for="reply in replies"
+              v-for="reply in replies.values()"
               :key="reply.id"
               :status-id="reply.id"
             >
diff --git a/src/components/status_action_buttons/buttons_definitions.js b/src/components/status_action_buttons/buttons_definitions.js
index 762b5be6a..1fc6c8ae9 100644
--- a/src/components/status_action_buttons/buttons_definitions.js
+++ b/src/components/status_action_buttons/buttons_definitions.js
@@ -234,7 +234,7 @@ export const BUTTONS = [
       return chatView
     },
     action({ router, status }) {
-      router.push({ name: 'conversation', params: { id: status.id } })
+      router.push({ name: 'conversation', params: { statusId: status.id } })
     },
   },
   {
@@ -293,7 +293,7 @@ export const BUTTONS = [
       navigator.clipboard.writeText(
         [
           useInstanceStore().server,
-          router.resolve({ name: 'conversation', params: { id: status.id } })
+          router.resolve({ name: 'conversation', params: { statusId: status.id } })
             .href,
         ].join(''),
       )
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index 6bcfa469f..1c3b3560a 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -4,41 +4,95 @@ import {
   faAngleDoubleRight,
 } from '@fortawesome/free-solid-svg-icons'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 library.add(faAngleDoubleDown, faAngleDoubleRight)
 
 const ThreadTree = {
   components: {},
   name: 'ThreadTree',
   props: {
-    depth: Number,
     statusId: String,
     inProfile: Boolean,
-    conversation: Array,
     collapsable: Boolean,
     isExpanded: Boolean,
     pinnedStatusIdsObject: Object,
     profileUserId: String,
 
+    depth: Number,
+    conversation: Array,
     focused: String,
-    getReplies: Function,
-    toggleExpanded: Function,
+    replies: Map,
 
-    simple: Boolean,
     canDive: Boolean,
-    threadDisplayStatus: Object,
-    showThreadRecursively: Function,
-    totalReplyCount: Object,
-    totalReplyDepth: Object,
+    threadDisplay: Map,
+    threadDisplayDefault: Map,
   },
-  emits: ['suspendableStateChange', 'goto', 'dive', 'heightChange'],
+  emits: [
+    'suspendableStateChange',
+    'goto',
+    'dive',
+    'heightChange',
+    'toggleExpanded',
+    'showThreadRecursively',
+  ],
   computed: {
     currentReplies() {
-      return this.getReplies(this.statusId).map(({ id }) => id)
+      return [...this.getReplies(this.statusId)].map(({ id }) => id)
+    },
+    simple() {
+      return !useMergedConfigStore().mergedConfig.conversationTreeAdvanced
     },
     threadShowing() {
-      return this.threadDisplayStatus[this.statusId] === 'showing'
+      const result = this.threadDisplay.get(this.statusId) ?? this.threadDisplayDefault.get(this.statusId)
+      return result === 'showing'
+    },
+    totalReplyCount() {
+      const sizes = {}
+      const subTreeSizeFor = (id) => {
+        if (sizes[id]) {
+          return sizes[id]
+        }
+        sizes[id] =
+          1 +
+          [...this.getReplies(id)]
+            .map(({ id }) => id)
+            .map((cid) => subTreeSizeFor(cid))
+            .reduce((a, b) => a + b, 0)
+        return sizes[id]
+      }
+      this.conversation.map((k) => k.id).forEach(subTreeSizeFor)
+      return Object.keys(sizes).reduce((res, id) => {
+        res[id] = sizes[id] - 1 // exclude itself
+        return res
+      }, {})
+    },
+    totalReplyDepth() {
+      const depths = {}
+      const subTreeDepthFor = (id) => {
+        if (depths[id]) {
+          return depths[id]
+        }
+        depths[id] =
+          1 +
+          [...this.getReplies(id)]
+            .map(({ id }) => id)
+            .map((cid) => subTreeDepthFor(cid))
+            .reduce((a, b) => (a > b ? a : b), 0)
+        return depths[id]
+      }
+      this.conversation.map((k) => k.id).forEach(subTreeDepthFor)
+      return Object.keys(depths).reduce((res, id) => {
+        res[id] = depths[id] - 1 // exclude itself
+        return res
+      }, {})
     },
   },
+  methods: {
+    getReplies(id) {
+      return this.replies.get(id) ?? new Set()
+    },
+  }
 }
 
 export default ThreadTree
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index d7ae9cd10..3d21daa8d 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -14,15 +14,14 @@
       :profile-user-id="profileUserId"
       class="conversation-status conversation-status-treeview panel-body"
 
-      :simple-tree="simple"
-      :thread-display-status="threadDisplayStatus[statusId]"
+      :thread-display-state="threadDisplay.get(statusId)"
       :can-dive="canDive"
 
       @dive="$emit('dive', statusId)"
       @goto="$emit('goto', statusId)"
-      @toggle-expanded="toggleExpanded"
-      @suspendable-state-change="e => $emit('suspendableStateChange', e)"
-      @height-change="e => $emit('heightChange', e)"
+      @toggle-expanded="$emit('toggleExpanded', statusId)"
+      @suspendable-state-change="$emit('suspendableStateChange', e)"
+      @height-change="$emit('heightChange', e)"
     />
     <div
       v-if="currentReplies.length > 0 && threadShowing"
@@ -42,20 +41,18 @@
         :pinned-status-ids-object="pinnedStatusIdsObject"
         :profile-user-id="profileUserId"
 
-        :get-replies="getReplies"
+        :replies="replies"
         :focused="focused"
-        :toggle-expanded="toggleExpanded"
 
-        :simple="simple"
-        :thread-display-status="threadDisplayStatus"
-        :show-thread-recursively="showThreadRecursively"
-        :total-reply-count="totalReplyCount"
-        :total-reply-depth="totalReplyDepth"
+        :thread-display="threadDisplay"
+        :thread-display-default="threadDisplayDefault"
 
         :can-dive="canDive"
+        @show-thread-recursively="(e) => $emit('showThreadRecursively', e)"
         @goto="(e) => $emit('goto', e)"
         @dive="(e) => $emit('dive', e)"
         @suspendable-state-change="e => $emit('suspendableStateChange', e)"
+        @toggle-expanded="(e) => $emit('toggleExpanded', e)"
         @height-change="e => $emit('heightChange', e)"
       />
     </div>
@@ -88,7 +85,7 @@
         tag="button"
         keypath="status.thread_show_full_with_icon"
         class="button-unstyled -link thread-tree-show-replies-button"
-        @click.prevent="showThreadRecursively(statusId)"
+        @click.prevent="$emit('showThreadRecursively', statusId)"
       >
         <template #icon>
           <FAIcon

From 6ef8b36c73e189cd191ab310ee87c7e3107bad9b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Sep 2026 16:11:08 +0300
Subject: [PATCH 05/14] big cleanup, lint, relying on provide/inject instead of
 drilling props

---
 src/components/conversation/conversation.js   | 200 +++++++-----------
 src/components/conversation/conversation.vue  | 138 +++++-------
 src/components/quote/quote.vue                |   2 +-
 src/components/status/status.js               |  21 +-
 src/components/status/status.vue              |   6 +-
 .../buttons_definitions.js                    |   6 +-
 src/components/thread_tree/thread_tree.js     |  35 +--
 src/components/thread_tree/thread_tree.vue    |  25 +--
 src/components/timeline/timeline.js           |   5 +
 src/components/timeline/timeline.vue          |   2 -
 10 files changed, 178 insertions(+), 262 deletions(-)

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 3e8932d94..152289098 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -1,6 +1,6 @@
-import { get, reduce } from 'lodash-es'
+import { get } from 'lodash-es'
 import { storeToRefs } from 'pinia'
-import { computed, nextTick, ref, watch, toRefs } from 'vue'
+import { computed, nextTick, provide, ref, toRefs, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
@@ -16,7 +16,10 @@ import { useOAuthStore } from 'src/stores/oauth.js'
 import { useStatusesStore } from 'src/stores/statuses.js'
 import { useStreamingStore } from 'src/stores/streaming.js'
 
-import { fetchConversation as apiFetchConversation, fetchStatus } from 'src/api/public.js'
+import {
+  fetchConversation as apiFetchConversation,
+  fetchStatus,
+} from 'src/api/public.js'
 import { WSConnectionStatus } from 'src/api/websocket.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -36,24 +39,6 @@ library.add(
   faTimes,
 )
 
-const sortById = (a, b) => {
-  const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
-  const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id
-  const seqA = Number(idA)
-  const seqB = Number(idB)
-  const isSeqA = !Number.isNaN(seqA)
-  const isSeqB = !Number.isNaN(seqB)
-  if (isSeqA && isSeqB) {
-    return seqA < seqB ? -1 : 1
-  } else if (isSeqA && !isSeqB) {
-    return -1
-  } else if (!isSeqA && isSeqB) {
-    return 1
-  } else {
-    return idA < idB ? -1 : 1
-  }
-}
-
 export default {
   props: {
     statusId: {
@@ -61,34 +46,12 @@ export default {
       type: String,
       required: true,
     },
-    collapsable: {
-      // Whether conversation can be collapsed
-      // i.e. when it's not a page
-      type: Boolean,
-      default: false,
-    },
     isPage: {
       // Whether conversation is rendered as a standalone page
       // as opposed to embedded into a timeline
       type: Boolean,
       default: false,
     },
-    pinnedStatusIdsObject: {
-      // Used for user profile, map of pinned statuses
-      type: Object,
-      default: null,
-    },
-    inProfile: {
-      // Whether conversation is rendered in a user profile
-      // used for overriding muted status
-      type: Boolean,
-      default: false,
-    },
-    profileUserId: {
-      // used with inProfile, user id of the profile
-      type: String,
-      default: null,
-    },
     virtualHidden: {
       // Whether conversation is suspended. Controls rendering of statuses
       type: Boolean,
@@ -106,25 +69,18 @@ export default {
   },
   setup(props, ctx) {
     const { emit } = ctx
-    const {
-      statusId,
-      collapsable,
-      pinnedStatusIdsObject,
-      inProfile,
-      profileUserId,
-      virtualHidden,
-    } = toRefs(props)
-    const router = useRouter()
+    const { statusId } = toRefs(props)
 
-    const hoisted = {}
+    const router = useRouter()
 
     // # Main Configuration
     const { mergedConfig } = storeToRefs(useMergedConfigStore())
     const { mastoUserSocketStatus } = storeToRefs(useStreamingStore())
     const displayStyle = computed(() => mergedConfig.value.conversationDisplay)
-    const streamingEnabled = computed(() =>
-      mergedConfig.value.useStreamingApi &&
-        mastoUserSocketStatus === WSConnectionStatus.JOINED
+    const streamingEnabled = computed(
+      () =>
+        mergedConfig.value.useStreamingApi &&
+        mastoUserSocketStatus === WSConnectionStatus.JOINED,
     )
 
     // # Main things
@@ -146,6 +102,24 @@ export default {
         return statusId.value
       }
     })
+
+    const sortById = (a, b) => {
+      const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
+      const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id
+      const seqA = Number(idA)
+      const seqB = Number(idB)
+      const isSeqA = !Number.isNaN(seqA)
+      const isSeqB = !Number.isNaN(seqB)
+      if (isSeqA && isSeqB) {
+        return seqA < seqB ? -1 : 1
+      } else if (isSeqA && !isSeqB) {
+        return -1
+      } else if (!isSeqA && isSeqB) {
+        return 1
+      } else {
+        return idA < idB ? -1 : 1
+      }
+    }
     const conversationId = computed(() => getConversationId(statusId.value))
     const conversation = computed(() => {
       if (!status.value) {
@@ -167,11 +141,7 @@ export default {
     })
     const replies = computed(() =>
       conversation.value.reduce(
-        (
-          result,
-          { id, in_reply_to_status_id: irid },
-          index,
-        ) => {
+        (result, { id, in_reply_to_status_id: irid }, index) => {
           if (irid) {
             if (!result.has(irid)) {
               result.set(irid, new Set())
@@ -184,18 +154,18 @@ export default {
           return result
         },
         new Map(),
-      )
+      ),
     )
     const getReplies = (id) => replies.value.get(id) ?? new Set()
 
+    provide('conversation', conversation)
+    provide('replies', replies)
+
     const fetchConversation = async () => {
       if (status.value) {
         const {
-          data: {
-            ancestors,
-            descendants
-          },
-          timestamp
+          data: { ancestors, descendants },
+          timestamp,
         } = await apiFetchConversation({
           id: statusId.value,
           credentials: useOAuthStore().token,
@@ -225,11 +195,12 @@ export default {
       }
     }
     const resetDisplayState = () => {
-      hoisted.undive()
+      setFocused(statusId.value)
       threadDisplay.value = new Map()
     }
 
     // # Virtual scrolling stuff
+    const { virtualHidden } = toRefs(props)
     const unsuspendibleIds = ref(new Set())
     const suspendable = computed(() => unsuspendibleIds.value.size === 0)
     const hide = computed(() => virtualHidden.value && suspendable.value)
@@ -243,13 +214,13 @@ export default {
 
     // # Misc UI things
     const loadStatusError = ref(null)
-
     const { layoutType } = storeToRefs(useInterfaceStore())
     const mobileLayout = computed(() => layoutType.value === 'mobile')
     const firstStatus = computed(() => conversation.value[0])
-    const lastStatus = computed(() => conversation.value[conversation.value.legnth - 1])
+    const lastStatus = computed(
+      () => conversation.value[conversation.value.legnth - 1],
+    )
     const getStatusClasses = (status, active) => ({
-      '-virtual-active': active,
       '-first': status.id === firstStatus.value?.id,
       '-last': status.id === lastStatus.value?.id,
     })
@@ -268,13 +239,15 @@ export default {
         resetDisplayState()
       }
     })
+    provide('isExpanded', isExpanded)
+    provide('isPage', isPage)
 
     // # Focus
-    const focused = ref(null)
-    const maybeFocused = computed(() => isExpanded.value ? focused.value : null)
+    const focusedId = ref(statusId.value)
+    const focused = computed(() => (isExpanded.value ? focusedId.value : null))
     const setFocused = (id) => {
       if (!id) return
-      focused.value = id
+      focusedId.value = id
 
       if (!streamingEnabled.value) {
         useStatusesStore().fetchStatus(id)
@@ -296,6 +269,7 @@ export default {
         fetchConversation()
       }
     })
+    provide('focused', focused)
 
     // Component created
     if (isPage.value) {
@@ -309,11 +283,15 @@ export default {
     const isTreeView = computed(() => displayStyle.value === 'tree')
 
     // ## Tree view settings
-    const treeViewIsSimple = computed(() => !mergedConfig.value.conversationTreeAdvanced)
-    const shouldFadeAncestors = computed(() => mergedConfig.value.conversationTreeFadeAncestors)
-    const otherRepliesButtonPosition = computed(() => mergedConfig.value.conversationOtherRepliesButton)
-    const showOtherRepliesButtonBelowStatus = computed(() => otherRepliesButtonPosition.value === 'below')
-    const showOtherRepliesButtonInsideStatus = computed(() => otherRepliesButtonPosition.value === 'inside')
+    const treeViewIsSimple = computed(
+      () => !mergedConfig.value.conversationTreeAdvanced,
+    )
+    const shouldFadeAncestors = computed(
+      () => mergedConfig.value.conversationTreeFadeAncestors,
+    )
+    const showOtherRepliesButtonBelowStatus = computed(
+      () => mergedConfig.value.conversationOtherRepliesButton === 'below',
+    )
     const maxDepthToShowByDefault = computed(() => {
       // maxDepthInThread = max number of depths that is *visible*
       // since our depth starts with 0 and "showing" means "showing children"
@@ -323,19 +301,12 @@ export default {
     })
 
     // ## Tree style state
-    // ### Dive
-    const inlineDivePosition = ref(null)
-    const currentStatusId = computed(() => inlineDivePosition.value ?? statusId.value)
-
     // ### Topology
     const ancestors = computed(() => {
       // First we fill map with empty sets and add given id's parent
       // as set's only element (if any)
       const parentMap = conversation.value.reduce(
-        (
-          result,
-          { id, in_reply_to_status_id: irid },
-        ) => {
+        (result, { id, in_reply_to_status_id: irid }) => {
           if (!result.has(id)) {
             result.set(id, new Set())
           }
@@ -345,7 +316,7 @@ export default {
           }
           return result
         },
-        new Map()
+        new Map(),
       )
 
       // Next we iterate over each entry and fill the whole ancestry chain
@@ -361,15 +332,19 @@ export default {
       })
       return parentMap
     })
-    const getAncestorIds = (id) => ancestors.value.get(id) ?? new Set()
-    const getAncestors = (id) => [...getAncestorIds(id)].map(getStatusObject).filter(Boolean)
-    const currentAncestors = computed(() => getAncestors(currentStatusId.value).reverse())
-    const currentDepth = computed(() => currentAncestors.value.length)
-    const topLevel = computed(() => [...ancestors.value.entries()]
-      .filter(([id, ancestors]) => ancestors.size === 0)
-      .map(([id]) => getStatusObject(id))
+    const topLevel = computed(() =>
+      [...ancestors.value.entries()]
+        .filter(([id, ancestors]) => ancestors.size === 0)
+        .map(([id]) => getStatusObject(id)),
     )
-    const currentStatus = computed(() => getStatusObject(currentStatusId.value))
+    const getAncestorIds = (id) => ancestors.value.get(id) ?? new Set()
+    const getAncestors = (id) =>
+      [...getAncestorIds(id)].map(getStatusObject).filter(Boolean)
+    const currentAncestors = computed(() =>
+      getAncestors(focusedId.value).reverse(),
+    )
+    const currentDepth = computed(() => currentAncestors.value.length)
+    const currentStatus = computed(() => getStatusObject(focusedId.value))
 
     // ### Thread Display
     const threadDisplay = ref(new Map()) // id => 'showing' | 'hidden'
@@ -390,6 +365,8 @@ export default {
         return map
       }, new Map())
     })
+    provide('threadDisplay', threadDisplay)
+    provide('threadDisplayDefault', threadDisplayDefault)
 
     const setThreadDisplayRecursively = (id, value) => {
       threadDisplay.value.set(id, value)
@@ -402,8 +379,12 @@ export default {
     }
 
     // ## Derived values
-    const shouldShowAllConversationButton = computed(() => currentAncestors.value.length > 0 && topLevel.value.length > 1)
-    const shouldShowAncestors = computed(() => isExpanded.value && ancestors.value.get(currentStatusId.value) != null)
+    const shouldShowAllConversationButton = computed(
+      () => currentAncestors.value.length > 0 && topLevel.value.length > 1,
+    )
+    const shouldShowAncestors = computed(
+      () => isExpanded.value && ancestors.value.get(focusedId.value) != null,
+    )
 
     // # Scrolling / diving
     const tryScrollTo = (id) => {
@@ -412,8 +393,6 @@ export default {
       }
       if (isPage.value) {
         router.push({ name: 'conversation', params: { statusId: id } })
-      } else {
-        inlineDivePosition.value = id
       }
       // Because the conversation can be unmounted when out of sight
       // and mounted again when it comes into sight,
@@ -434,47 +413,32 @@ export default {
         setFocused(id)
       })
     }
-    const goToCurrent = () => {
-      tryScrollTo(diveRoot)
-    }
     const diveIntoStatus = (id) => {
       tryScrollTo(id)
     }
     const diveToTopLevel = () => {
       tryScrollTo(currentAncestors.value[0].id)
     }
-    const undive = () => {
-      inlineDivePosition.value = null
-      setFocused(statusId.value)
-    }
-    hoisted.undive = undive
 
     return {
-      ...hoisted,
+      hide,
       isLinearView,
       isTreeView,
       isExpanded,
       conversation,
-      hide,
-      collapsable,
       mobileLayout,
       toggleExpanded,
       isPage,
       status,
       loadStatusError,
-      maybeFocused,
+      focused,
       setFocused,
       showOtherRepliesButtonBelowStatus,
-      showOtherRepliesButtonInsideStatus,
       onStatusSuspendStateChange,
       getStatusClasses,
       getReplies,
       currentAncestors,
       statusId,
-      collapsable,
-      pinnedStatusIdsObject,
-      inProfile,
-      profileUserId,
       virtualHidden,
       shouldShowAncestors,
       shouldShowAllConversationButton,
@@ -489,5 +453,5 @@ export default {
       diveIntoStatus,
       showThreadRecursively,
     }
-  }
+  },
 }
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 87c52c814..b5d92401c 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -19,19 +19,19 @@
         </template>
       </h1>
       <button
-        v-if="collapsable"
+        v-if="!isPage"
         class="button-unstyled -link"
         @click.prevent="toggleExpanded"
       >
         {{ $t('timeline.collapse') }}
       </button>
       <QuickFilterSettings
-        v-if="!collapsable && mobileLayout"
+        v-if="isPage && mobileLayout"
         :conversation="true"
         class="rightside-button"
       />
       <QuickViewSettings
-        v-if="!collapsable"
+        v-if="isPage"
         :conversation="true"
         class="rightside-button"
       />
@@ -86,93 +86,61 @@
             </template>
           </i18n-t>
         </div>
-        <DynamicScroller
+        <div
           v-if="shouldShowAncestors"
           class="thread-ancestors"
-          :min-item-size="15"
-          :buffer="500"
-          :items="currentAncestors"
-          role="feed"
-          list-tag="article"
-          item-tag="article"
-          :item-class="{'thread-ancestor-has-other-replies': getReplies(status.id).size > 1, '-faded': shouldFadeAncestors, 'thread-ancestor': true }"
-          flow-mode
-          page-mode
         >
-          <template #default="{ item: status, active }">
-            <DynamicScrollerItem
-              :item="status"
-              :active="active"
+          <article
+            v-for="status in currentAncestors"
+            class="thread-ancestor"
+            :class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
+          >
+            <Status
+              class="conversation-status panel-body"
+              :class="getStatusClasses(status)"
+
+              :status-id="status.id"
+              :replies="getReplies(status.id)"
+
+              :focused="focused === status.id"
+              can-dive
+
+              @goto="setFocused"
+              @dive="() => diveIntoStatus(status.id)"
+              @suspendable-state-change="onStatusSuspendStateChange"
+            />
+            <div
+              v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).size > 1"
+              class="thread-ancestor-dive-box"
             >
-              <Status
-                class="conversation-status panel-body"
-                :class="getStatusClasses(status, active)"
-
-                :status-id="status.id"
-                :replies="getReplies(status.id)"
-
-                :expandable="!isExpanded"
-                :focused="maybeFocused === status.id"
-                :inline-expanded="collapsable && isExpanded"
-                :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-                :in-profile="inProfile"
-                :in-conversation="isExpanded"
-                :profile-user-id="profileUserId"
-                :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
-                can-dive
-
-                @goto="setFocused"
-                @dive="() => diveIntoStatus(status.id)"
-                @suspendable-state-change="onStatusSuspendStateChange"
-              />
               <div
-                v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).size > 1"
-                class="thread-ancestor-dive-box"
+                class="thread-ancestor-dive-box-inner"
               >
-                <div
-                  class="thread-ancestor-dive-box-inner"
+                <i18n-t
+                  tag="button"
+                  scope="global"
+                  keypath="status.ancestor_follow_with_icon"
+                  class="button-unstyled -link thread-tree-show-replies-button"
+                  @click.prevent="diveIntoStatus(status.id)"
                 >
-                  <i18n-t
-                    tag="button"
-                    scope="global"
-                    keypath="status.ancestor_follow_with_icon"
-                    class="button-unstyled -link thread-tree-show-replies-button"
-                    @click.prevent="diveIntoStatus(status.id)"
-                  >
-                    <template #icon>
-                      <FAIcon
-                        icon="angle-double-right"
-                      />
-                    </template>
-                    <template #text>
-                      <span>
-                        {{ $t('status.ancestor_follow', { numReplies: getReplies(status.id, getReplies(status.id).size - 1).size - 1 }) }}
-                      </span>
-                    </template>
-                  </i18n-t>
-                </div>
+                  <template #icon>
+                    <FAIcon
+                      icon="angle-double-right"
+                    />
+                  </template>
+                  <template #text>
+                    <span>
+                      {{ $t('status.ancestor_follow', { numReplies: getReplies(status.id, getReplies(status.id).size - 1).size - 1 }) }}
+                    </span>
+                  </template>
+                </i18n-t>
               </div>
-            </DynamicScrollerItem>
-          </template>
-        </DynamicScroller>
+            </div>
+          </article>
+        </div>
         <ThreadTree
-          :key="currentStatus.id"
-          :depth="0"
-
           :status-id="currentStatus.id"
-          :in-profile="inProfile"
-          :conversation="conversation"
-          :collapsable="collapsable"
-          :is-expanded="isExpanded"
-          :pinned-status-ids-object="pinnedStatusIdsObject"
-          :profile-user-id="profileUserId"
-
-          :replies="replies"
-          :focused="maybeFocused"
-
-          :thread-display="threadDisplay"
-          :thread-display-default="threadDisplayDefault"
-          :can-dive="isExpanded"
+          :depth="0"
 
           @goto="setFocused"
           @dive="diveIntoStatus"
@@ -201,17 +169,11 @@
             <Status
               :key="status.id"
               class="conversation-status"
-              :class="getStatusClasses(status, active)"
+              :class="getStatusClasses(status)"
               :status-id="status.id"
               :replies="getReplies(status.id)"
 
-              :expandable="!isExpanded"
-              :focused="maybeFocused === status.id || maybeFocused === status.retweeted_status?.id"
-              :inline-expanded="collapsable && isExpanded"
-              :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-              :in-profile="inProfile"
-              :in-conversation="isExpanded"
-              :profile-user-id="profileUserId"
+              :focused="focused === status.id || focused === status.retweeted_status?.id"
 
               @goto="setFocused"
               @toggle-expanded="toggleExpanded"
diff --git a/src/components/quote/quote.vue b/src/components/quote/quote.vue
index f518db7ab..bdfc4f930 100644
--- a/src/components/quote/quote.vue
+++ b/src/components/quote/quote.vue
@@ -27,7 +27,7 @@
     <Status
       v-if="shouldDisplayQuote"
       :statusoid="quotedStatus"
-      :in-quote="true"
+      in-quote
     />
   </article>
   <p
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 8ad8d684b..bd6144971 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -98,19 +98,12 @@ const Status = {
     statusoid: Object,
     replies: Set,
 
-    expandable: Boolean,
     focused: Boolean,
     compact: Boolean,
     isPreview: Boolean,
     noHeading: Boolean,
-    inlineExpanded: Boolean,
-    inProfile: Boolean,
-    inConversation: Boolean,
     inQuote: Boolean,
 
-    profileUserId: String,
-    showOtherRepliesAsButton: Boolean,
-    canDive: Boolean,
     ignoreMute: Boolean,
 
     threadDisplayState: String,
@@ -122,6 +115,11 @@ const Status = {
     'suspendableStateChange',
     'heightChange',
   ],
+  inject: {
+    profileUserId: { default: null },
+    isPage: { default: false },
+    isExpanded: { default: false },
+  },
   data() {
     return {
       replying: false,
@@ -139,6 +137,12 @@ const Status = {
     status() {
       return this.statusoid ?? useStatusesStore().allStatuses.get(this.statusId)
     },
+    inConversation() {
+      return this.isExpanded
+    },
+    inProfile() {
+      return this.profileUserId != null
+    },
     // Status repeated
     repeatedStatus() {
       if (this.status.retweeted_status === undefined) return undefined
@@ -168,6 +172,9 @@ const Status = {
     simpleTree() {
       return !this.mergedConfig.conversationTreeAdvanced
     },
+    showOtherRepliesAsButton() {
+      return this.mergedConfig.conversationOtherRepliesButton === 'inside'
+    },
     showReasonMutedThread() {
       return (
         (this.mainStatus.thread_muted || this.repeatStatus?.thread_muted) &&
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 4322c6033..86e33cbbf 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -3,7 +3,7 @@
     v-if="!hideStatus"
     ref="root"
     class="Status"
-    :class="[{ '-focused': focused }, { '-conversation': inlineExpanded }]"
+    :class="[{ '-focused': focused }, { '-conversation': !isPage && isExpanded }]"
   >
     <div
       v-if="error"
@@ -199,7 +199,7 @@
                   />
                 </span>
                 <button
-                  v-if="expandable && !isPreview"
+                  v-if="!isExpanded && !isPreview"
                   class="button-unstyled"
                   :title="$t('status.expand')"
                   @click.prevent="toggleExpanded"
@@ -235,7 +235,7 @@
                   />
                 </button>
                 <button
-                  v-if="canDive && !simpleTree"
+                  v-if="isExpanded && !simpleTree"
                   class="button-unstyled"
                   :title="$t('status.show_only_conversation_under_this')"
                   @click.prevent="$emit('dive')"
diff --git a/src/components/status_action_buttons/buttons_definitions.js b/src/components/status_action_buttons/buttons_definitions.js
index 1fc6c8ae9..28497f5f5 100644
--- a/src/components/status_action_buttons/buttons_definitions.js
+++ b/src/components/status_action_buttons/buttons_definitions.js
@@ -293,8 +293,10 @@ export const BUTTONS = [
       navigator.clipboard.writeText(
         [
           useInstanceStore().server,
-          router.resolve({ name: 'conversation', params: { statusId: status.id } })
-            .href,
+          router.resolve({
+            name: 'conversation',
+            params: { statusId: status.id },
+          }).href,
         ].join(''),
       )
       return Promise.resolve()
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index 1c3b3560a..3d2fe3244 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -1,11 +1,11 @@
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAngleDoubleDown,
   faAngleDoubleRight,
 } from '@fortawesome/free-solid-svg-icons'
 
-import { useMergedConfigStore } from 'src/stores/merged_config.js'
-
 library.add(faAngleDoubleDown, faAngleDoubleRight)
 
 const ThreadTree = {
@@ -13,20 +13,7 @@ const ThreadTree = {
   name: 'ThreadTree',
   props: {
     statusId: String,
-    inProfile: Boolean,
-    collapsable: Boolean,
-    isExpanded: Boolean,
-    pinnedStatusIdsObject: Object,
-    profileUserId: String,
-
     depth: Number,
-    conversation: Array,
-    focused: String,
-    replies: Map,
-
-    canDive: Boolean,
-    threadDisplay: Map,
-    threadDisplayDefault: Map,
   },
   emits: [
     'suspendableStateChange',
@@ -36,6 +23,15 @@ const ThreadTree = {
     'toggleExpanded',
     'showThreadRecursively',
   ],
+  inject: [
+    'conversation',
+    'focused',
+    'replies',
+    'threadDisplay',
+    'threadDisplayDefault',
+    'isExpanded',
+    'isPage',
+  ],
   computed: {
     currentReplies() {
       return [...this.getReplies(this.statusId)].map(({ id }) => id)
@@ -44,9 +40,14 @@ const ThreadTree = {
       return !useMergedConfigStore().mergedConfig.conversationTreeAdvanced
     },
     threadShowing() {
-      const result = this.threadDisplay.get(this.statusId) ?? this.threadDisplayDefault.get(this.statusId)
+      const result =
+        this.threadDisplay.get(this.statusId) ??
+        this.threadDisplayDefault.get(this.statusId)
       return result === 'showing'
     },
+    canDive() {
+      return this.isExpanded
+    },
     totalReplyCount() {
       const sizes = {}
       const subTreeSizeFor = (id) => {
@@ -92,7 +93,7 @@ const ThreadTree = {
     getReplies(id) {
       return this.replies.get(id) ?? new Set()
     },
-  }
+  },
 }
 
 export default ThreadTree
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index 3d21daa8d..7d4854487 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -2,20 +2,12 @@
   <article class="thread-tree">
     <Status
       :key="statusId"
-      ref="statusComponent"
+      class="conversation-status conversation-status-treeview panel-body"
       :status-id="statusId"
       :replies="getReplies(statusId)"
-      :inline-expanded="collapsable && isExpanded"
-      :expandable="!isExpanded"
-      :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-      :in-conversation="isExpanded"
       :focused="focused === statusId"
-      :in-profile="inProfile"
-      :profile-user-id="profileUserId"
-      class="conversation-status conversation-status-treeview panel-body"
 
       :thread-display-state="threadDisplay.get(statusId)"
-      :can-dive="canDive"
 
       @dive="$emit('dive', statusId)"
       @goto="$emit('goto', statusId)"
@@ -30,24 +22,9 @@
       <ThreadTree
         v-for="replyStatusId in currentReplies"
         :key="replyStatusId"
-        ref="childComponent"
         :depth="depth + 1"
         :status-id="replyStatusId"
 
-        :in-profile="inProfile"
-        :conversation="conversation"
-        :collapsable="collapsable"
-        :is-expanded="isExpanded"
-        :pinned-status-ids-object="pinnedStatusIdsObject"
-        :profile-user-id="profileUserId"
-
-        :replies="replies"
-        :focused="focused"
-
-        :thread-display="threadDisplay"
-        :thread-display-default="threadDisplayDefault"
-
-        :can-dive="canDive"
         @show-thread-recursively="(e) => $emit('showThreadRecursively', e)"
         @goto="(e) => $emit('goto', e)"
         @dive="(e) => $emit('dive', e)"
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 1f4486647..79b8f493b 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -41,6 +41,11 @@ const Timeline = {
       blockingClicks: false,
     }
   },
+  provide() {
+    return {
+      profileUserId: this.inProfile && this.timelineRef.argument,
+    }
+  },
   components: {
     ScrollTopButton,
     Conversation,
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index a0087a68d..7a0be1a50 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -96,8 +96,6 @@
               :key="status.id"
               role="listitem"
               :status-id="status.id"
-              :in-profile="inProfile"
-              :profile-user-id="timelineRef.argument"
               collapsable
             />
           </DynamicScrollerItem>

From 06d3c41b6326902aa9c887abb182471e88d95f7f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Sep 2026 17:17:24 +0300
Subject: [PATCH 06/14] cleanup and organization

---
 src/components/conversation/conversation.js  | 303 ++++++++++---------
 src/components/conversation/conversation.vue |  12 +-
 2 files changed, 164 insertions(+), 151 deletions(-)

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 152289098..eb759a712 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -18,7 +18,7 @@ import { useStreamingStore } from 'src/stores/streaming.js'
 
 import {
   fetchConversation as apiFetchConversation,
-  fetchStatus,
+  fetchStatus as apiFetchStatus,
 } from 'src/api/public.js'
 import { WSConnectionStatus } from 'src/api/websocket.js'
 
@@ -83,6 +83,27 @@ export default {
         mastoUserSocketStatus === WSConnectionStatus.JOINED,
     )
 
+    // # Misc
+    const loadStatusError = ref(null)
+    const { layoutType } = storeToRefs(useInterfaceStore())
+    const mobileLayout = computed(() => layoutType.value === 'mobile')
+
+    // # Focus
+    const focusedId = ref(statusId.value)
+    const focused = computed(() => (isExpanded.value ? focusedId.value : null))
+    const setFocused = (id) => {
+      if (!id) return
+      focusedId.value = id
+
+      if (!streamingEnabled.value) {
+        useStatusesStore().fetchStatus(id)
+      }
+
+      useStatusesStore().fetchFavsAndRepeats(id)
+      useStatusesStore().fetchEmojiReactions(id)
+    }
+    provide('focused', focused)
+
     // # Main things
     const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
     const getConversationId = (statusId) => {
@@ -93,13 +114,56 @@ export default {
         get(status, 'statusnet_conversation_id'),
       )
     }
+    const status = computed(() => getStatusObject(focusedId.value))
 
-    const status = computed(() => getStatusObject(statusId.value))
-    const mainStatusId = computed(() => {
-      if (status.value.retweeted_status) {
-        return status.value.retweeted_status.id
+    const fetchConversation = async () => {
+      if (status.value) {
+        const {
+          data: { ancestors, descendants },
+          timestamp,
+        } = await apiFetchConversation({
+          id: statusId.value,
+          credentials: useOAuthStore().token,
+        })
+
+        useStatusesStore().addNewStatuses({ statuses: ancestors, timestamp })
+        useStatusesStore().addNewStatuses({
+          statuses: descendants,
+          timestamp,
+        })
       } else {
-        return statusId.value
+        try {
+          loadStatusError.value = null
+
+          const { data: status } = await apiFetchStatus({
+            id: statusId.value,
+            credentials: useOAuthStore().token,
+          })
+
+          useStatusesStore().addNewStatuses({ statuses: [status] })
+          fetchConversation()
+        } catch (error) {
+          console.error(error)
+          loadStatusError.value = error
+        }
+      }
+    }
+    const resetDisplayState = () => {
+      setFocused(statusId.value)
+      threadDisplay.value = new Map()
+    }
+    watch(statusId, (newVal, oldVal) => {
+      const newConversationId = getConversationId(newVal)
+      const oldConversationId = getConversationId(oldVal)
+      if (
+        newConversationId &&
+        oldConversationId &&
+        newConversationId === oldConversationId
+      ) {
+        setFocused(newVal)
+      } else {
+        resetDisplayState()
+        fetchConversation()
       }
     })
 
@@ -157,74 +221,13 @@ export default {
       ),
     )
     const getReplies = (id) => replies.value.get(id) ?? new Set()
+    const statusReplies = computed(() => {
+      return getReplies(status.value.id)
+    })
 
     provide('conversation', conversation)
     provide('replies', replies)
 
-    const fetchConversation = async () => {
-      if (status.value) {
-        const {
-          data: { ancestors, descendants },
-          timestamp,
-        } = await apiFetchConversation({
-          id: statusId.value,
-          credentials: useOAuthStore().token,
-        })
-
-        useStatusesStore().addNewStatuses({ statuses: ancestors, timestamp })
-        useStatusesStore().addNewStatuses({
-          statuses: descendants,
-          timestamp,
-        })
-        setFocused(mainStatusId.value)
-      } else {
-        try {
-          loadStatusError.value = null
-
-          const { data: status } = await fetchStatus({
-            id: statusId.value,
-            credentials: useOAuthStore().token,
-          })
-
-          useStatusesStore().addNewStatuses({ statuses: [status] })
-          fetchConversation()
-        } catch (error) {
-          console.error(error)
-          loadStatusError.value = error
-        }
-      }
-    }
-    const resetDisplayState = () => {
-      setFocused(statusId.value)
-      threadDisplay.value = new Map()
-    }
-
-    // # Virtual scrolling stuff
-    const { virtualHidden } = toRefs(props)
-    const unsuspendibleIds = ref(new Set())
-    const suspendable = computed(() => unsuspendibleIds.value.size === 0)
-    const hide = computed(() => virtualHidden.value && suspendable.value)
-    const onStatusSuspendStateChange = ({ id, suspend }) => {
-      if (!suspend) {
-        unsuspendibleIds.value.add(id)
-      } else {
-        unsuspendibleIds.value.delete(id)
-      }
-    }
-
-    // # Misc UI things
-    const loadStatusError = ref(null)
-    const { layoutType } = storeToRefs(useInterfaceStore())
-    const mobileLayout = computed(() => layoutType.value === 'mobile')
-    const firstStatus = computed(() => conversation.value[0])
-    const lastStatus = computed(
-      () => conversation.value[conversation.value.legnth - 1],
-    )
-    const getStatusClasses = (status, active) => ({
-      '-first': status.id === firstStatus.value?.id,
-      '-last': status.id === lastStatus.value?.id,
-    })
-
     // # Conversation Expansion
     const expanded = ref(false)
     const { isPage } = toRefs(props)
@@ -242,65 +245,41 @@ export default {
     provide('isExpanded', isExpanded)
     provide('isPage', isPage)
 
-    // # Focus
-    const focusedId = ref(statusId.value)
-    const focused = computed(() => (isExpanded.value ? focusedId.value : null))
-    const setFocused = (id) => {
-      if (!id) return
-      focusedId.value = id
-
-      if (!streamingEnabled.value) {
-        useStatusesStore().fetchStatus(id)
-      }
-
-      useStatusesStore().fetchFavsAndRepeats(id)
-      useStatusesStore().fetchEmojiReactions(id)
-    }
-    watch(statusId, (newVal, oldVal) => {
-      const newConversationId = getConversationId(newVal)
-      const oldConversationId = getConversationId(oldVal)
-      if (
-        newConversationId &&
-        oldConversationId &&
-        newConversationId === oldConversationId
-      ) {
-        setFocused(mainStatusId.value)
-      } else {
-        fetchConversation()
-      }
-    })
-    provide('focused', focused)
-
     // Component created
     if (isPage.value) {
       fetchConversation()
     }
 
+    // # Virtual scrolling stuff
+    const { virtualHidden } = toRefs(props)
+    const unsuspendibleIds = ref(new Set())
+    const suspendable = computed(() => unsuspendibleIds.value.size === 0)
+    const hide = computed(() => virtualHidden.value && suspendable.value)
+    const onStatusSuspendStateChange = ({ id, suspend }) => {
+      if (!suspend) {
+        unsuspendibleIds.value.add(id)
+      } else {
+        unsuspendibleIds.value.delete(id)
+      }
+    }
+
+    // # Misc UI things
+    const firstStatus = computed(() => conversation.value[0])
+    const lastStatus = computed(
+      () => conversation.value[conversation.value.legnth - 1],
+    )
+    const getStatusClasses = (status, active) => ({
+      '-first': status.id === firstStatus.value?.id,
+      '-last': status.id === lastStatus.value?.id,
+    })
+
     // # Linear style stuff
     const isLinearView = computed(() => displayStyle.value !== 'tree')
 
     // # Tree style stuff
     const isTreeView = computed(() => displayStyle.value === 'tree')
 
-    // ## Tree view settings
-    const treeViewIsSimple = computed(
-      () => !mergedConfig.value.conversationTreeAdvanced,
-    )
-    const shouldFadeAncestors = computed(
-      () => mergedConfig.value.conversationTreeFadeAncestors,
-    )
-    const showOtherRepliesButtonBelowStatus = computed(
-      () => mergedConfig.value.conversationOtherRepliesButton === 'below',
-    )
-    const maxDepthToShowByDefault = computed(() => {
-      // maxDepthInThread = max number of depths that is *visible*
-      // since our depth starts with 0 and "showing" means "showing children"
-      // there is a -2 here
-      const maxDepth = mergedConfig.value.maxDepthInThread - 2
-      return Math.min(1, maxDepth)
-    })
-
-    // ## Tree style state
+    // ## Tree state
     // ### Topology
     const ancestors = computed(() => {
       // First we fill map with empty sets and add given id's parent
@@ -344,7 +323,6 @@ export default {
       getAncestors(focusedId.value).reverse(),
     )
     const currentDepth = computed(() => currentAncestors.value.length)
-    const currentStatus = computed(() => getStatusObject(focusedId.value))
 
     // ### Thread Display
     const threadDisplay = ref(new Map()) // id => 'showing' | 'hidden'
@@ -378,15 +356,31 @@ export default {
       setThreadDisplayRecursively(id, 'showing')
     }
 
-    // ## Derived values
+    // ## Derived values and config
+    const treeViewIsSimple = computed(
+      () => !mergedConfig.value.conversationTreeAdvanced,
+    )
+    const maxDepthToShowByDefault = computed(() => {
+      // maxDepthInThread = max number of depths that is *visible*
+      // since our depth starts with 0 and "showing" means "showing children"
+      // there is a -2 here
+      const maxDepth = mergedConfig.value.maxDepthInThread - 2
+      return Math.min(1, maxDepth)
+    })
     const shouldShowAllConversationButton = computed(
       () => currentAncestors.value.length > 0 && topLevel.value.length > 1,
     )
     const shouldShowAncestors = computed(
       () => isExpanded.value && ancestors.value.get(focusedId.value) != null,
     )
+    const shouldFadeAncestors = computed(
+      () => mergedConfig.value.conversationTreeFadeAncestors,
+    )
+    const shouldShowOtherRepliesButton = computed(
+      () => mergedConfig.value.conversationOtherRepliesButton === 'below',
+    )
 
-    // # Scrolling / diving
+    // # Scrolling
     const tryScrollTo = (id) => {
       if (!id) {
         return
@@ -421,37 +415,56 @@ export default {
     }
 
     return {
-      hide,
-      isLinearView,
-      isTreeView,
-      isExpanded,
-      conversation,
-      mobileLayout,
-      toggleExpanded,
-      isPage,
-      status,
+      // # Misc
       loadStatusError,
+      mobileLayout,
+
+      // # Focus
       focused,
       setFocused,
-      showOtherRepliesButtonBelowStatus,
+
+      // # Main things
+      status,
+      statusReplies,
+      conversation,
+
+      // # Conversation Expansion
+      isPage,
+      isExpanded,
+      toggleExpanded,
+
+      // # Virtual scrolling stuff
+      hide,
       onStatusSuspendStateChange,
-      getStatusClasses,
-      getReplies,
-      currentAncestors,
-      statusId,
       virtualHidden,
-      shouldShowAncestors,
-      shouldShowAllConversationButton,
+
+      // # Misc UI things
+      getStatusClasses,
+
+      // # Linear style stuff
+      isLinearView,
+
+      // # Tree style stuff
+      isTreeView,
+
+      // ## Tree state
+      // ### Topology
       topLevel,
-      shouldFadeAncestors,
-      currentStatus,
-      treeViewIsSimple,
-      diveToTopLevel,
-      threadDisplay,
-      threadDisplayDefault,
-      replies,
-      diveIntoStatus,
+      currentAncestors,
+
+      // ### Thread Display
       showThreadRecursively,
+
+      // ## Derived values and config
+      treeViewIsSimple,
+      shouldShowAllConversationButton,
+      shouldShowAncestors,
+      shouldFadeAncestors,
+      shouldShowOtherRepliesButton,
+
+      // # Scrolling
+      diveToTopLevel,
+      diveIntoStatus,
     }
   },
 }
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index b5d92401c..18ddce63e 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -93,24 +93,24 @@
           <article
             v-for="status in currentAncestors"
             class="thread-ancestor"
-            :class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
+            :class="{'thread-ancestor-has-other-replies': statusReplies.size > 1, '-faded': shouldFadeAncestors}"
           >
             <Status
               class="conversation-status panel-body"
               :class="getStatusClasses(status)"
 
               :status-id="status.id"
-              :replies="getReplies(status.id)"
+              :replies="statusReplies"
 
               :focused="focused === status.id"
               can-dive
 
               @goto="setFocused"
-              @dive="() => diveIntoStatus(status.id)"
+              @dive="diveIntoStatus(status.id)"
               @suspendable-state-change="onStatusSuspendStateChange"
             />
             <div
-              v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).size > 1"
+              v-if="shouldShowOtherRepliesButton && statusReplies.size > 1"
               class="thread-ancestor-dive-box"
             >
               <div
@@ -130,7 +130,7 @@
                   </template>
                   <template #text>
                     <span>
-                      {{ $t('status.ancestor_follow', { numReplies: getReplies(status.id, getReplies(status.id).size - 1).size - 1 }) }}
+                      {{ $t('status.ancestor_follow', { numReplies: statusReplies.size - 1 }) }}
                     </span>
                   </template>
                 </i18n-t>
@@ -139,7 +139,7 @@
           </article>
         </div>
         <ThreadTree
-          :status-id="currentStatus.id"
+          :status-id="status.id"
           :depth="0"
 
           @goto="setFocused"

From 5971c5bb79f835f7b61c177cbf8d8300ac4df10d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Sep 2026 17:21:06 +0300
Subject: [PATCH 07/14] stop using vue-virtual-scroller

---
 src/components/conversation/conversation.js  |  1 +
 src/components/conversation/conversation.vue | 46 ++++++++------------
 2 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index eb759a712..92c93eade 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -426,6 +426,7 @@ export default {
       // # Main things
       status,
       statusReplies,
+      getReplies,
       conversation,
 
       // # Conversation Expansion
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 18ddce63e..03bcfef86 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -149,39 +149,29 @@
           @suspendable-state-change="onStatusSuspendStateChange"
         />
       </div>
-      <DynamicScroller
+      <div
         v-else-if="isLinearView"
         class="thread-body"
-        :min-item-size="15"
-        :buffer="500"
-        :items="conversation"
-        page-mode
-        flow-mode
-        role="feed"
-        item-tag="article"
-        item-class="panel-body"
       >
-        <template #default="{ item: status, active }">
-          <DynamicScrollerItem
-            :item="status"
-            :active="active"
-          >
-            <Status
-              :key="status.id"
-              class="conversation-status"
-              :class="getStatusClasses(status)"
-              :status-id="status.id"
-              :replies="getReplies(status.id)"
+        <article
+          v-for="status in conversation"
+          class="panel-body"
+        >
+          <Status
+            :key="status.id"
+            class="conversation-status"
+            :class="getStatusClasses(status)"
+            :status-id="status.id"
+            :replies="getReplies(status.id)"
 
-              :focused="focused === status.id || focused === status.retweeted_status?.id"
+            :focused="focused === status.id || focused === status.retweeted_status?.id"
 
-              @goto="setFocused"
-              @toggle-expanded="toggleExpanded"
-              @suspendable-state-change="onStatusSuspendStateChange"
-            />
-          </DynamicScrollerItem>
-        </template>
-      </DynamicScroller>
+            @goto="setFocused"
+            @toggle-expanded="toggleExpanded"
+            @suspendable-state-change="onStatusSuspendStateChange"
+          />
+        </article>
+      </div>
     </div>
   </div>
   <div

From 2b272ee2499185bf701fc4a237c55326c116a2f8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Sep 2026 17:44:16 +0300
Subject: [PATCH 08/14] restored virtual scrolling things

---
 src/components/conversation/conversation.js  | 33 +++++++++++++++++++-
 src/components/conversation/conversation.vue |  6 ++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 92c93eade..bbb55cd04 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -1,6 +1,15 @@
 import { get } from 'lodash-es'
 import { storeToRefs } from 'pinia'
-import { computed, nextTick, provide, ref, toRefs, watch } from 'vue'
+import {
+  computed,
+  nextTick,
+  onMounted,
+  provide,
+  ref,
+  toRefs,
+  useTemplateRef,
+  watch,
+} from 'vue'
 import { useRouter } from 'vue-router'
 
 import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
@@ -251,7 +260,12 @@ export default {
     }
 
     // # Virtual scrolling stuff
+    const body = useTemplateRef('body')
     const { virtualHidden } = toRefs(props)
+    const virtualHeight = ref(120)
+    const hiddenStyle = computed(() => ({
+      height: this.virtualHeight + 'px',
+    }))
     const unsuspendibleIds = ref(new Set())
     const suspendable = computed(() => unsuspendibleIds.value.size === 0)
     const hide = computed(() => virtualHidden.value && suspendable.value)
@@ -262,6 +276,21 @@ export default {
         unsuspendibleIds.value.delete(id)
       }
     }
+    const updateVirtualHeight = () => {
+      if (hide) return // no updates when not rendering
+      if (!status.value) return // not loaded yet
+      nextTick(() => {
+        virtualHeight.value = body.value.getBoundingClientRect().height
+        emit('update:virtualHeight', {
+          id: status.value.id,
+          height: virtualHeight.value,
+          top: body.value.clientTop,
+        })
+      })
+    }
+    onMounted(() => {
+      updateVirtualHeight()
+    })
 
     // # Misc UI things
     const firstStatus = computed(() => conversation.value[0])
@@ -437,7 +466,9 @@ export default {
       // # Virtual scrolling stuff
       hide,
       onStatusSuspendStateChange,
+      updateVirtualHeight,
       virtualHidden,
+      hiddenStyle,
 
       // # Misc UI things
       getStatusClasses,
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 03bcfef86..cebb9a10d 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="!hide"
+    ref="body"
     class="Conversation"
     :class="{ '-expanded' : isExpanded, '-page': isPage, 'panel' : isExpanded }"
   >
@@ -39,7 +40,6 @@
     <div
       v-if="isPage && !status"
       class="conversation-body"
-      ref="body"
       :class="{ 'panel-body': isExpanded }"
     >
       <p v-if="!loadStatusError">
@@ -56,7 +56,6 @@
     <div
       v-else
       class="conversation-body"
-      ref="body"
       :class="{ 'panel-body': isExpanded }"
     >
       <div
@@ -108,6 +107,7 @@
               @goto="setFocused"
               @dive="diveIntoStatus(status.id)"
               @suspendable-state-change="onStatusSuspendStateChange"
+              @height-change="updateVirtualHeight"
             />
             <div
               v-if="shouldShowOtherRepliesButton && statusReplies.size > 1"
@@ -147,6 +147,7 @@
           @toggle-expanded="toggleExpanded"
           @show-thread-recursively="showThreadRecursively"
           @suspendable-state-change="onStatusSuspendStateChange"
+          @height-change="updateVirtualHeight"
         />
       </div>
       <div
@@ -169,6 +170,7 @@
             @goto="setFocused"
             @toggle-expanded="toggleExpanded"
             @suspendable-state-change="onStatusSuspendStateChange"
+            @height-change="updateVirtualHeight"
           />
         </article>
       </div>

From 0411bc8f470644fd614ea45a696fe62c6fbedb22 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Sep 2026 17:56:18 +0300
Subject: [PATCH 09/14] sorting

---
 src/components/conversation/conversation.js | 24 +++++++++++----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index bbb55cd04..63c843057 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -261,21 +261,10 @@ export default {
 
     // # Virtual scrolling stuff
     const body = useTemplateRef('body')
-    const { virtualHidden } = toRefs(props)
     const virtualHeight = ref(120)
     const hiddenStyle = computed(() => ({
       height: this.virtualHeight + 'px',
     }))
-    const unsuspendibleIds = ref(new Set())
-    const suspendable = computed(() => unsuspendibleIds.value.size === 0)
-    const hide = computed(() => virtualHidden.value && suspendable.value)
-    const onStatusSuspendStateChange = ({ id, suspend }) => {
-      if (!suspend) {
-        unsuspendibleIds.value.add(id)
-      } else {
-        unsuspendibleIds.value.delete(id)
-      }
-    }
     const updateVirtualHeight = () => {
       if (hide) return // no updates when not rendering
       if (!status.value) return // not loaded yet
@@ -288,6 +277,19 @@ export default {
         })
       })
     }
+
+    const unsuspendibleIds = ref(new Set())
+    const suspendable = computed(() => unsuspendibleIds.value.size === 0)
+    const onStatusSuspendStateChange = ({ id, suspend }) => {
+      if (!suspend) {
+        unsuspendibleIds.value.add(id)
+      } else {
+        unsuspendibleIds.value.delete(id)
+      }
+    }
+
+    const { virtualHidden } = toRefs(props)
+    const hide = computed(() => virtualHidden.value && suspendable.value)
     onMounted(() => {
       updateVirtualHeight()
     })

From f1fea713399e1eac8071d3f3b3a224ba26b29ff7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Sep 2026 18:01:55 +0300
Subject: [PATCH 10/14] restore old virtual scrolling

---
 src/components/conversation/conversation.js |  2 +-
 src/components/timeline/timeline.js         | 66 ++++++++++++++++++++-
 src/components/timeline/timeline.vue        | 29 +++------
 3 files changed, 75 insertions(+), 22 deletions(-)

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 63c843057..4eef7e2bf 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -263,7 +263,7 @@ export default {
     const body = useTemplateRef('body')
     const virtualHeight = ref(120)
     const hiddenStyle = computed(() => ({
-      height: this.virtualHeight + 'px',
+      height: virtualHeight.value + 'px',
     }))
     const updateVirtualHeight = () => {
       if (hide) return // no updates when not rendering
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 79b8f493b..637c7fb82 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -38,6 +38,7 @@ const Timeline = {
       showScrollTop: false,
       paused: false,
       unfocused: false,
+      virtualScrollIndex: 0,
       blockingClicks: false,
     }
   },
@@ -106,7 +107,20 @@ const Timeline = {
       }
     },
     statusesToDisplay() {
-      return new Set(this.filteredVisibleStatuses.map(({ id }) => id))
+      if (!this.virtualScrollingEnabled) {
+        return new Set(this.filteredVisibleStatuses.map(({ id }) => id))
+      }
+
+      const amount = this.timeline.visibleStatusIds.size
+      const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
+      const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)
+      const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide)
+      return new Set(
+        this.filteredVisibleStatuses.slice(min, max).map(({ id }) => id),
+      )
+    },
+    virtualScrollingEnabled() {
+      return useMergedConfigStore().mergedConfig.virtualScrolling
     },
     ...mapState(useInterfaceStore, {
       mobileLayout: (store) => store.layoutType === 'mobile',
@@ -126,6 +140,7 @@ const Timeline = {
     }
     window.addEventListener('keydown', this.handleShortKey)
     window.addEventListener('scroll', this.handleScroll)
+    setTimeout(this.determineVisibleStatuses, 250)
   },
   unmounted() {
     this.timelineChange(null, this.timelineRef)
@@ -183,6 +198,54 @@ const Timeline = {
       1000,
       this,
     ),
+    determineVisibleStatuses() {
+      if (!this.$refs.timeline) return
+      if (!this.virtualScrollingEnabled) return
+
+      const statuses = this.$refs.timeline.children
+      if (statuses.length === 0) return
+      const cappedScrollIndex = Math.max(
+        0,
+        Math.min(this.virtualScrollIndex, statuses.length - 1),
+      )
+
+      const height = Math.max(document.body.offsetHeight, window.pageYOffset)
+
+      const centerOfScreen = window.pageYOffset + window.innerHeight * 0.5
+
+      // Start from approximating the index of some visible status by using the
+      // the center of the screen on the timeline.
+      let approxIndex = Math.min(
+        Math.floor(statuses.length * (centerOfScreen / height)),
+        statuses.length - 1,
+      )
+      let err = statuses[approxIndex].getBoundingClientRect().y
+
+      // if we have a previous scroll index that can be used, test if it's
+      // closer than the previous approximation, use it if so
+
+      const virtualScrollIndexY =
+        statuses[cappedScrollIndex].getBoundingClientRect().y
+      if (Math.abs(err) > virtualScrollIndexY) {
+        approxIndex = cappedScrollIndex
+        err = virtualScrollIndexY
+      }
+
+      // if the status is too far from viewport, check the next/previous ones if
+      // they happen to be better
+      while (err < -20 && approxIndex < statuses.length - 1) {
+        err += statuses[approxIndex].offsetHeight
+        approxIndex++
+      }
+      while (err > window.innerHeight + 100 && approxIndex > 0) {
+        approxIndex--
+        err -= statuses[approxIndex].offsetHeight
+      }
+
+      // this status is now the center point for virtual scrolling and visible
+      // statuses will be nearby statuses before and after it
+      this.virtualScrollIndex = approxIndex
+    },
     scrollLoad() {
       // TODO simplify this logic
       const bodyBRect = document.body.getBoundingClientRect()
@@ -195,6 +258,7 @@ const Timeline = {
       }
     },
     handleScroll: throttle(function (e) {
+      this.determineVisibleStatuses()
       this.scrollLoad(e)
     }, 200),
     handleVisibilityChange() {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 7a0be1a50..905b94382 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -77,30 +77,19 @@
       />
     </div>
     <div :class="classes.body">
-      <DynamicScroller
+      <div
         class="timeline"
         ref="timeline"
-        :min-item-size="15"
-        :buffer="120"
-        :items="filteredVisibleStatuses"
-        flow-mode
-        page-mode
         role="feed"
       >
-        <template #default="{ item: status, active }">
-          <DynamicScrollerItem
-            :item="status"
-            :active="active"
-          >
-            <Conversation
-              :key="status.id"
-              role="listitem"
-              :status-id="status.id"
-              collapsable
-            />
-          </DynamicScrollerItem>
-        </template>
-      </DynamicScroller>
+        <Conversation
+          v-for="status in filteredVisibleStatuses"
+          :key="status.id"
+          :status-id="status.id"
+          :virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.has(status.id)"
+          role="listitem"
+        />
+      </div>
       <template v-if="!hideEmpty && count === 0">
         <div
           v-if="timeline.fetcher.loadingNewer || timeline.fetcher.loadingOlder"

From 90598381889e89c371344c230b8e8d0fc28cc0a7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 9 Sep 2026 01:15:58 +0300
Subject: [PATCH 11/14] virtual scrolling 2.0, conversations edition

---
 src/components/conversation/conversation.js   | 174 ++++++++++++++----
 src/components/conversation/conversation.vue  |  36 ++--
 .../conversation/useScrollPosition.js         |  21 +++
 src/components/conversation/useWindowSize.js  |  18 ++
 src/components/status/status.js               |  50 ++---
 src/components/status/status.vue              |   6 +-
 6 files changed, 221 insertions(+), 84 deletions(-)
 create mode 100644 src/components/conversation/useScrollPosition.js
 create mode 100644 src/components/conversation/useWindowSize.js

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 4eef7e2bf..919017387 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -13,6 +13,8 @@ import {
 import { useRouter } from 'vue-router'
 
 import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
+import { useScrollPosition } from 'src/components/conversation/useScrollPosition.js'
+import { useWindowSize } from 'src/components/conversation/useWindowSize.js'
 import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
 import QuickViewSettings from 'src/components/quick_view_settings/quick_view_settings.vue'
@@ -61,13 +63,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    virtualHidden: {
-      // Whether conversation is suspended. Controls rendering of statuses
-      type: Boolean,
-      default: false,
-    },
   },
-  emits: ['update:virtualHeight'],
   components: {
     ThreadTree,
     QuickFilterSettings,
@@ -76,8 +72,7 @@ export default {
     PostStatusForm,
     RichContent,
   },
-  setup(props, ctx) {
-    const { emit } = ctx
+  setup(props) {
     const { statusId } = toRefs(props)
 
     const router = useRouter()
@@ -260,26 +255,63 @@ export default {
     }
 
     // # Virtual scrolling stuff
+    const fontSizeSetting = computed(() => mergedConfig.value.textSize)
+    const fontSize = computed(() => {
+      // reading fontSizeSetting to make computed react to it
+      fontSizeSetting.value
+      const string = window
+        .getComputedStyle(document.body)
+        .getPropertyValue('font-size')
+      return Number.parseInt(string.slice(0, -2), 10) // remove the 'px'
+    })
+    const mutedStatusHeight = computed(() => {
+      return fontSize.value * 1.5
+    })
+    const normalStatusHeight = computed(() => {
+      return fontSize.value * 10
+    })
+    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 body = useTemplateRef('body')
-    const virtualHeight = ref(120)
-    const hiddenStyle = computed(() => ({
-      height: virtualHeight.value + 'px',
-    }))
-    const updateVirtualHeight = () => {
-      if (hide) return // no updates when not rendering
-      if (!status.value) return // not loaded yet
-      nextTick(() => {
-        virtualHeight.value = body.value.getBoundingClientRect().height
-        emit('update:virtualHeight', {
-          id: status.value.id,
-          height: virtualHeight.value,
-          top: body.value.clientTop,
-        })
-      })
+    const updateVirtualHeight = ({ id, height }) => {
+      heights.value.set(id, height)
     }
 
+    const { y: topScrollBoundary } = useScrollPosition()
+    const { height: windowHeight } = useWindowSize()
+
+    const realTopScrollBoundary = ref(0)
+    const realBottomScrollBoundary = 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
+
+      realTopScrollBoundary.value = distanceItemTopToWindowTop
+      realBottomScrollBoundary.value = distanceItemTopToWindowBottom
+    }
+
+    watch(topScrollBoundary, updateBoundaries)
+    watch(totalHeight, updateBoundaries)
+    onMounted(updateBoundaries)
+
+    const buffer = normalStatusHeight.value * 2
+
     const unsuspendibleIds = ref(new Set())
-    const suspendable = computed(() => unsuspendibleIds.value.size === 0)
     const onStatusSuspendStateChange = ({ id, suspend }) => {
       if (!suspend) {
         unsuspendibleIds.value.add(id)
@@ -288,10 +320,92 @@ export default {
       }
     }
 
-    const { virtualHidden } = toRefs(props)
-    const hide = computed(() => virtualHidden.value && suspendable.value)
-    onMounted(() => {
-      updateVirtualHeight()
+    const heightChartLinear = computed(() => {
+      // Map every height and suspendable state
+      const chart = conversation.value.map(({ id }) => {
+        const status = getStatusObject(id)
+        const height =
+          (() => {
+            if (heights.value.has(id)) {
+              return heights.value.get(id)
+            } else if (status?.muted) {
+              return mutedStatusHeight.value
+            } else {
+              return normalStatusHeight.value
+            }
+          })() + 1 //including border
+        const suspendable = !unsuspendibleIds.value.has(id)
+        return { id, height, suspendable, status }
+      })
+
+      // Walk over the list to set top offsets
+      chart.reduce((sum, item) => {
+        item.top = sum
+        return sum + item.height
+      }, 0)
+
+      // Determine visibility state
+      chart.forEach((heightChartItem) => {
+        const itemBottomBoundary = heightChartItem.top + heightChartItem.height
+        const itemTopBoundary = heightChartItem.top
+
+        const finalTopScrollBoundary = realTopScrollBoundary.value - buffer
+        const finalBottomScrollBoundary =
+          realBottomScrollBoundary.value + buffer
+
+        // console.log(
+        //   'TOP SCROLL',
+        //   itemBottomBoundary > finalTopScrollBoundary,
+        //   itemBottomBoundary, finalTopScrollBoundary,
+        // )
+        // console.log(
+        //   'BOTTOM SCROLL',
+        //   itemTopBoundary < finalBottomScrollBoundary,
+        //   itemTopBoundary, finalBottomScrollBoundary,
+        // )
+
+        // To be visible, item's bottom boundary shoud be below top scroll boundary)
+        const belowTopBoundary = itemBottomBoundary > finalTopScrollBoundary
+        // To be visible, item's top boundary shoud be above bottom scroll boundary)
+        const aboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary
+        // This accounts for the case where item's boundaries exceed scroll boundary
+
+        heightChartItem.visible = belowTopBoundary && aboveBottomBoundary
+      })
+
+      // Group invisible statuses into spacers
+      return chart.reduce((acc, heightChartItem) => {
+        const { suspendable, visible, height, top, bottom, id, status } =
+          heightChartItem
+        const present = visible || !suspendable
+        if (present) {
+          return [...acc, { type: 'status', height, top, bottom, id, status }]
+        } else {
+          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(),
+                }
+
+          spacer.ids.add(id)
+          spacer.id = [...spacer.ids].join()
+          spacer.height += height
+          if (top < spacer.top) spacer.top = top
+          if (bottom < spacer.bottom) spacer.bottom = bottom
+
+          if (previousItem?.type === 'spacer') {
+            return acc
+          } else {
+            return [...acc, spacer]
+          }
+        }
+      }, [])
     })
 
     // # Misc UI things
@@ -466,17 +580,15 @@ export default {
       toggleExpanded,
 
       // # Virtual scrolling stuff
-      hide,
       onStatusSuspendStateChange,
       updateVirtualHeight,
-      virtualHidden,
-      hiddenStyle,
 
       // # Misc UI things
       getStatusClasses,
 
       // # Linear style stuff
       isLinearView,
+      heightChartLinear,
 
       // # Tree style stuff
       isTreeView,
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index cebb9a10d..5bd0b48ac 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,10 +1,21 @@
 <template>
   <div
-    v-if="!hide"
-    ref="body"
+    ref="root"
     class="Conversation"
     :class="{ '-expanded' : isExpanded, '-page': isPage, 'panel' : isExpanded }"
   >
+    <div class="panel panel-body" style="position:fixed;top:10em;left:2em">
+      <dl v-for="item in heightChartLinear">
+        <dt>
+          {{ item.type.toUpperCase() }}
+          <template v-if="item.type === 'status'">ID {{ item.id }}</template>
+          <template v-else>Size {{ item.ids.size }}</template>
+        </dt>
+        <dd>Top {{ item.top }}</dd>
+        <dd>Height {{ item.height }}</dd>
+        <dd>Bottom {{ item.bottom }}</dd>
+      </dl>
+    </div>
     <div
       v-if="isExpanded"
       class="panel-heading conversation-heading -sticky"
@@ -40,6 +51,7 @@
     <div
       v-if="isPage && !status"
       class="conversation-body"
+      ref="body"
       :class="{ 'panel-body': isExpanded }"
     >
       <p v-if="!loadStatusError">
@@ -56,6 +68,7 @@
     <div
       v-else
       class="conversation-body"
+      ref="body"
       :class="{ 'panel-body': isExpanded }"
     >
       <div
@@ -155,17 +168,23 @@
         class="thread-body"
       >
         <article
-          v-for="status in conversation"
+          v-for="element in heightChartLinear"
           class="panel-body"
+          :key="element.id ?? element.ids"
         >
+          <div
+            v-if="element.type === 'spacer'"
+            class="virtual-spacer"
+            :style="{ height: element.height + 'px' }"
+          />
           <Status
-            :key="status.id"
+            v-if="element.type === 'status'"
             class="conversation-status"
             :class="getStatusClasses(status)"
-            :status-id="status.id"
+            :status-id="element.status.id"
             :replies="getReplies(status.id)"
 
-            :focused="focused === status.id || focused === status.retweeted_status?.id"
+            :focused="focused === element.id || focused === element.status.retweeted_status?.id"
 
             @goto="setFocused"
             @toggle-expanded="toggleExpanded"
@@ -176,11 +195,6 @@
       </div>
     </div>
   </div>
-  <div
-    v-else
-    class="Conversation -hidden"
-    :style="hiddenStyle"
-  />
 </template>
 
 <script src="./conversation.js"></script>
diff --git a/src/components/conversation/useScrollPosition.js b/src/components/conversation/useScrollPosition.js
new file mode 100644
index 000000000..7772a35a4
--- /dev/null
+++ b/src/components/conversation/useScrollPosition.js
@@ -0,0 +1,21 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+
+export function useScrollPosition() {
+  const x = ref(0)
+  const y = ref(0)
+
+  const update = (e) => {
+    x.value = window.scrollX
+    y.value = window.scrollY
+  }
+
+  onMounted(() => {
+    window.addEventListener('scroll', update)
+    update()
+  })
+  onUnmounted(() => {
+    window.removeEventListener('scroll', update)
+  })
+
+  return { x, y }
+}
diff --git a/src/components/conversation/useWindowSize.js b/src/components/conversation/useWindowSize.js
new file mode 100644
index 000000000..803983e9e
--- /dev/null
+++ b/src/components/conversation/useWindowSize.js
@@ -0,0 +1,18 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+
+export function useWindowSize() {
+  const height = ref(0)
+  const width = ref(0)
+
+  const update = () => {
+    height.value = window.innerHeight
+    width.value = window.innerWidth
+  }
+
+  onMounted(() => window.addEventListener('resize', update))
+  onUnmounted(() => window.removeEventListener('resize', update))
+
+  update()
+
+  return { height, width }
+}
diff --git a/src/components/status/status.js b/src/components/status/status.js
index bd6144971..495503491 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -122,6 +122,7 @@ const Status = {
   },
   data() {
     return {
+      resizeObserver: new ResizeObserver(this.updateVirtualHeight),
       replying: false,
       unmuted: false,
       mediaPlaying: new Set(),
@@ -562,47 +563,22 @@ const Status = {
       // FIXME
       this.controlledToggleThreadDisplay()
     },
-    scrollIfFocused(focused) {
-      if (this.$el.getBoundingClientRect == null) return
-      if (focused) {
-        const rect = this.$el.getBoundingClientRect()
-        if (rect.top < 100) {
-          // Post is above screen, match its top to screen top
-          window.scrollBy(0, rect.top - 100)
-        } else if (rect.height >= window.innerHeight - 50) {
-          // Post we want to see is taller than screen so match its top to screen top
-          window.scrollBy(0, rect.top - 100)
-        } else if (rect.bottom > window.innerHeight - 50) {
-          // Post is below screen, match its bottom to screen bottom
-          window.scrollBy(0, rect.bottom - window.innerHeight + 50)
-        }
-      }
-    },
-    onTransitionEnd() {
-      this.$nextTick(() => {
-        this.$emit('heightChange')
+    updateVirtualHeight(e) {
+      const [entry] = e
+      this.$emit('heightChange', {
+        id: this.status.id,
+        height: entry.contentRect.height,
+        element: this.$el,
       })
     },
   },
+  mounted() {
+    this.resizeObserver.observe(this.$el)
+  },
+  unmounted() {
+    this.resizeObserver.disconnect()
+  },
   watch: {
-    status: {
-      deep: true,
-      handler() {
-        this.$emit('heightChange')
-      },
-    },
-    unmuted() {
-      this.$emit('heightChange')
-    },
-    error() {
-      this.$emit('heightChange')
-    },
-    replying() {
-      this.$emit('heightChange')
-    },
-    focused: function (id) {
-      this.scrollIfFocused(id)
-    },
     'mainStatus.repeat_num': function (num) {
       // refetch repeats when repeat_num is changed in any way
       if (this.focused && this.repeatedBy.size !== num) {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 86e33cbbf..d78c52eaa 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -454,10 +454,7 @@
             </StatusPopover>
           </div>
 
-          <Transition
-            @after-leave="onTransitionEnd"
-            name="fade"
-          >
+          <Transition name="fade">
             <div
               v-if="shouldDisplayFavsAndRepeats"
               class="favs-repeated-users"
@@ -549,7 +546,6 @@
           @posted="closeReplyForm"
           @draft-done="closeReplyForm"
           @close-accepted="closeReplyForm"
-          @resize="$emit('heightChange')"
         />
       </div>
     </template>

From a87c4cf5ddb373ee9058f9fdac6ab2cbb967bcf5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 9 Sep 2026 01:20:33 +0300
Subject: [PATCH 12/14] remove old virtual scrolling

---
 src/components/timeline/timeline.js  | 66 +---------------------------
 src/components/timeline/timeline.vue |  1 -
 src/modules/default_config_state.js  |  4 --
 3 files changed, 1 insertion(+), 70 deletions(-)

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 637c7fb82..79b8f493b 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -38,7 +38,6 @@ const Timeline = {
       showScrollTop: false,
       paused: false,
       unfocused: false,
-      virtualScrollIndex: 0,
       blockingClicks: false,
     }
   },
@@ -107,20 +106,7 @@ const Timeline = {
       }
     },
     statusesToDisplay() {
-      if (!this.virtualScrollingEnabled) {
-        return new Set(this.filteredVisibleStatuses.map(({ id }) => id))
-      }
-
-      const amount = this.timeline.visibleStatusIds.size
-      const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
-      const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)
-      const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide)
-      return new Set(
-        this.filteredVisibleStatuses.slice(min, max).map(({ id }) => id),
-      )
-    },
-    virtualScrollingEnabled() {
-      return useMergedConfigStore().mergedConfig.virtualScrolling
+      return new Set(this.filteredVisibleStatuses.map(({ id }) => id))
     },
     ...mapState(useInterfaceStore, {
       mobileLayout: (store) => store.layoutType === 'mobile',
@@ -140,7 +126,6 @@ const Timeline = {
     }
     window.addEventListener('keydown', this.handleShortKey)
     window.addEventListener('scroll', this.handleScroll)
-    setTimeout(this.determineVisibleStatuses, 250)
   },
   unmounted() {
     this.timelineChange(null, this.timelineRef)
@@ -198,54 +183,6 @@ const Timeline = {
       1000,
       this,
     ),
-    determineVisibleStatuses() {
-      if (!this.$refs.timeline) return
-      if (!this.virtualScrollingEnabled) return
-
-      const statuses = this.$refs.timeline.children
-      if (statuses.length === 0) return
-      const cappedScrollIndex = Math.max(
-        0,
-        Math.min(this.virtualScrollIndex, statuses.length - 1),
-      )
-
-      const height = Math.max(document.body.offsetHeight, window.pageYOffset)
-
-      const centerOfScreen = window.pageYOffset + window.innerHeight * 0.5
-
-      // Start from approximating the index of some visible status by using the
-      // the center of the screen on the timeline.
-      let approxIndex = Math.min(
-        Math.floor(statuses.length * (centerOfScreen / height)),
-        statuses.length - 1,
-      )
-      let err = statuses[approxIndex].getBoundingClientRect().y
-
-      // if we have a previous scroll index that can be used, test if it's
-      // closer than the previous approximation, use it if so
-
-      const virtualScrollIndexY =
-        statuses[cappedScrollIndex].getBoundingClientRect().y
-      if (Math.abs(err) > virtualScrollIndexY) {
-        approxIndex = cappedScrollIndex
-        err = virtualScrollIndexY
-      }
-
-      // if the status is too far from viewport, check the next/previous ones if
-      // they happen to be better
-      while (err < -20 && approxIndex < statuses.length - 1) {
-        err += statuses[approxIndex].offsetHeight
-        approxIndex++
-      }
-      while (err > window.innerHeight + 100 && approxIndex > 0) {
-        approxIndex--
-        err -= statuses[approxIndex].offsetHeight
-      }
-
-      // this status is now the center point for virtual scrolling and visible
-      // statuses will be nearby statuses before and after it
-      this.virtualScrollIndex = approxIndex
-    },
     scrollLoad() {
       // TODO simplify this logic
       const bodyBRect = document.body.getBoundingClientRect()
@@ -258,7 +195,6 @@ const Timeline = {
       }
     },
     handleScroll: throttle(function (e) {
-      this.determineVisibleStatuses()
       this.scrollLoad(e)
     }, 200),
     handleVisibilityChange() {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 905b94382..8388f59e7 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -86,7 +86,6 @@
           v-for="status in filteredVisibleStatuses"
           :key="status.id"
           :status-id="status.id"
-          :virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.has(status.id)"
           role="listitem"
         />
       </div>
diff --git a/src/modules/default_config_state.js b/src/modules/default_config_state.js
index 9643b1856..66c756659 100644
--- a/src/modules/default_config_state.js
+++ b/src/modules/default_config_state.js
@@ -457,10 +457,6 @@ export const INSTANCE_DEFAULT_CONFIG_DEFINITIONS = {
     description: 'Hide user stats (followers etc)',
     default: false,
   },
-  virtualScrolling: {
-    description: 'Timeline virtual scrolling',
-    default: true,
-  },
   sensitiveByDefault: {
     description: 'Assume attachments are NSFW by default',
     default: false,

From 5d61ce1e37828874c9055e70ab142e856df92fad Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 9 Sep 2026 01:21:30 +0300
Subject: [PATCH 13/14] remove debugging overlay

---
 src/components/conversation/conversation.vue | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 5bd0b48ac..9b8d342c2 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -4,18 +4,6 @@
     class="Conversation"
     :class="{ '-expanded' : isExpanded, '-page': isPage, 'panel' : isExpanded }"
   >
-    <div class="panel panel-body" style="position:fixed;top:10em;left:2em">
-      <dl v-for="item in heightChartLinear">
-        <dt>
-          {{ item.type.toUpperCase() }}
-          <template v-if="item.type === 'status'">ID {{ item.id }}</template>
-          <template v-else>Size {{ item.ids.size }}</template>
-        </dt>
-        <dd>Top {{ item.top }}</dd>
-        <dd>Height {{ item.height }}</dd>
-        <dd>Bottom {{ item.bottom }}</dd>
-      </dl>
-    </div>
     <div
       v-if="isExpanded"
       class="panel-heading conversation-heading -sticky"

From 62106f0d54d956a744776ce022e96ad50246b3a3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 9 Sep 2026 01:52:18 +0300
Subject: [PATCH 14/14] don't do height change for thread

---
 src/components/thread_tree/thread_tree.js  | 1 -
 src/components/thread_tree/thread_tree.vue | 2 --
 2 files changed, 3 deletions(-)

diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index 3d2fe3244..714b2b3f5 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -19,7 +19,6 @@ const ThreadTree = {
     'suspendableStateChange',
     'goto',
     'dive',
-    'heightChange',
     'toggleExpanded',
     'showThreadRecursively',
   ],
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index 7d4854487..8d8f0af33 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -13,7 +13,6 @@
       @goto="$emit('goto', statusId)"
       @toggle-expanded="$emit('toggleExpanded', statusId)"
       @suspendable-state-change="$emit('suspendableStateChange', e)"
-      @height-change="$emit('heightChange', e)"
     />
     <div
       v-if="currentReplies.length > 0 && threadShowing"
@@ -30,7 +29,6 @@
         @dive="(e) => $emit('dive', e)"
         @suspendable-state-change="e => $emit('suspendableStateChange', e)"
         @toggle-expanded="(e) => $emit('toggleExpanded', e)"
-        @height-change="e => $emit('heightChange', e)"
       />
     </div>
     <div