fixes, cleanup, now properly renders ancestors etc

src/components/conversation/conversation.js

@@ -103,13 +103,6 @@ export default {
     const toggleExpanded = () => {
       expanded.value = !expanded.value
     }
-    watch(expanded, (value) => {
-      if (value) {
-        fetchConversation()
-      } else {
-        resetDisplayState()
-      }
-    })
     provide('isExpanded', isExpanded)
     provide('isPage', isPage)
 
@@ -139,6 +132,14 @@ export default {
       loadError,
     } = useConversation(focusedId, isExpanded)
 
+    watch(expanded, (value) => {
+      if (value) {
+        fetchConversation()
+      } else {
+        resetDisplayState()
+      }
+    })
+
     const resetDisplayState = () => {
       setFocused(statusId.value)
       resetThreadDisplay()
@@ -175,12 +176,12 @@ export default {
 
     // # Linear style stuff
     const isLinearView = computed(() => displayStyle.value !== 'tree')
-    const body = useTemplateRef('body')
+    const linearElement = useTemplateRef('linear')
     const {
       heightChart: heightChartLinear,
       changeSuspendState: changeSuspendStateLinear,
       updateVirtualHeight: updateVirtualHeightLinear,
-    } = useVirtualScrolling(conversation, body)
+    } = useVirtualScrolling(conversation, linearElement)
 
     // # Tree style stuff
     const isTreeView = computed(() => displayStyle.value === 'tree')
@@ -200,7 +201,7 @@ export default {
       updateVirtualHeight: updateVirtualHeightAncestors,
     } = useVirtualScrolling(currentAncestors, ancestorsElement)
 
-    const currentLevel = computed(() => [currentStatus.value])
+    const currentLevel = computed(() => [currentStatus.value].filter(Boolean))
     const currentLevelElement = useTemplateRef('currentLevel')
     const {
       heightChart: heightChartCurrentLevel,
@@ -215,7 +216,7 @@ export default {
       () => currentAncestors.value.length > 0 && topLevel.value.length > 1,
     )
     const shouldShowAncestors = computed(
-      () => isExpanded.value && currentAncestors.value.size > 0,
+      () => isExpanded.value && heightChartAncestors.value.length > 0,
     )
     const shouldFadeAncestors = computed(
       () => mergedConfig.value.conversationTreeFadeAncestors,

src/components/conversation/conversation.vue

@@ -37,7 +37,7 @@
       />
     </div>
     <div
-      v-if="isPage && !status"
+      v-if="isPage && !currentStatus"
       class="conversation-body"
       ref="body"
       :class="{ 'panel-body': isExpanded }"
@@ -92,25 +92,31 @@
           class="thread-ancestors"
         >
           <article
-            v-for="status in currentAncestors"
+            v-for="element in heightChartAncestors"
             class="thread-ancestor"
-            :class="{'thread-ancestor-has-other-replies': statusReplies.size > 1, '-faded': shouldFadeAncestors}"
+            :class="{'thread-ancestor-has-other-replies': getReplies(element.id).size > 1, '-faded': shouldFadeAncestors}"
           >
             <Status
+              v-if="element.type === 'status'"
               class="conversation-status panel-body"
-              :class="getStatusClasses(status)"
+              :class="getStatusClasses(element.status)"
 
-              :status-id="status.id"
-              :replies="getReplies(status.id)"
+              :status-id="element.status.id"
+              :replies="getReplies(element.status.id)"
 
-              :focused="focused === status.id"
+              :focused="focused === element.status.id"
               can-dive
 
               @goto="setFocused"
-              @dive="diveIntoStatus(status.id)"
+              @dive="diveIntoStatus(element.status.id)"
               @suspendable-state-change="changeSuspendStateAncestors"
               @height-change="updateVirtualHeightAncestors"
             />
+            <div
+              v-if="element.type === 'spacer'"
+              class="virtual-spacer"
+              :style="{ height: element.height + 'px' }"
+            />
             <div
               v-if="shouldShowOtherRepliesButton && getReplies(status.id).size > 1"
               class="thread-ancestor-dive-box"
@@ -141,7 +147,7 @@
           </article>
         </div>
         <div
-          class="currentStatus"
+          class="currentLevel"
           ref="currentLevel"
         >
           <!-- Technically this will always have a single element but -->
@@ -169,6 +175,7 @@
       </div>
       <div
         v-else-if="isLinearView"
+        ref="linear"
         class="thread-body"
       >
         <article
@@ -176,11 +183,6 @@
           class="panel-body"
           :key="element.id ?? element.ids"
         >
-          <div
-            v-if="element.type === 'spacer'"
-            class="virtual-spacer"
-            :style="{ height: element.height + 'px' }"
-          />
           <Status
             v-if="element.type === 'status'"
             class="conversation-status"
@@ -195,6 +197,11 @@
             @suspendable-state-change="changeSuspendStateLinear"
             @height-change="updateVirtualHeightLinear"
           />
+          <div
+            v-if="element.type === 'spacer'"
+            class="virtual-spacer"
+            :style="{ height: element.height + 'px' }"
+          />
         </article>
       </div>
     </div>

src/composables/useTreeConversationTopology.js

@@ -81,7 +81,7 @@ export function useTreeConversationTopology(conversation, replies, current) {
   })
   const threadDisplay = computed(() => {
     return new Map(
-      [...threadDisplayOverride.value.entries()].map(([k, v]) => [
+      [...threadDisplayDefault.value.entries()].map(([k, v]) => [
         k,
         threadDisplayOverride.value.get(k) ?? threadDisplayDefault.value.get(k),
       ]),

src/composables/useVirtualScrolling.js

@@ -1,5 +1,5 @@
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useStatusesStore } from 'src/stores/statuses.js'
@@ -82,7 +82,7 @@ export function useVirtualScrolling(conversation, body) {
   watch(windowHeight, updateBoundaries)
   watch(scrollY, updateBoundaries)
   watch(totalHeight, updateBoundaries)
-  onMounted(updateBoundaries)
+  watch(body, updateBoundaries)
 
   const heightChart = computed(() => {
     // Map every height and suspendable state