Merge branch 'virtual-scrolling-2.0' into shigusegubu-themes3

src/components/conversation/conversation.js

@@ -1,14 +1,6 @@
 import { get } from 'lodash-es'
 import { storeToRefs } from 'pinia'
-import {
+import { computed, provide, ref, toRefs, useTemplateRef, watch } from 'vue'
-  computed,
-  nextTick,
-  provide,
-  ref,
-  toRefs,
-  useTemplateRef,
-  watch,
-} from 'vue'
 import { useRouter } from 'vue-router'
 
 import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
@@ -24,9 +16,9 @@ import { useStatusesStore } from 'src/stores/statuses.js'
 import { useStreamingStore } from 'src/stores/streaming.js'
 
 import { useConversation } from 'src/composables/useConversation.js'
+import { useScrollPosition } from 'src/composables/useScrollPosition.js'
 import { useTreeConversationTopology } from 'src/composables/useTreeConversationTopology.js'
 import { useVirtualScrolling } from 'src/composables/useVirtualScrolling.js'
-import { useScrollPosition } from 'src/composables/useScrollPosition.js'
 
 import { WSConnectionStatus } from 'src/api/websocket.js'
 
@@ -147,15 +139,19 @@ export default {
       loadError,
     } = useConversation(focusedId, isExpanded)
 
-    watch(expanded, async (value) => {
+    watch(
-      if (value) {
+      expanded,
-        await fetchConversation()
+      async (value) => {
-      } else {
+        if (value) {
-        resetDisplayState()
+          await fetchConversation()
-      }
+        } else {
-      if (isPage.value) return
+          resetDisplayState()
-      await tryScrollTo(currentStatus.value.id)
+        }
-    }, { flush: 'post' })
+        if (isPage.value) return
+        await tryScrollTo(currentStatus.value.id)
+      },
+      { flush: 'post' },
+    )
 
     const resetDisplayState = () => {
       setFocused(statusId.value)
@@ -194,12 +190,20 @@ export default {
     // # Linear style stuff
     const isLinearView = computed(() => displayStyle.value !== 'tree')
     const linearElement = useTemplateRef('linear')
-    const linearScrollCompensation = computed(() => isLinearView.value && isExpanded.value)
+    const linearScrollCompensation = computed(
+      () => isLinearView.value && isExpanded.value,
+    )
     const {
       heightChart: heightChartLinear,
       changeSuspendState: changeSuspendStateLinear,
       updateVirtualHeight: updateVirtualHeightLinear,
-    } = useVirtualScrolling(conversation, linearElement, scroller, linearScrollCompensation, currentStatus)
+    } = useVirtualScrolling(
+      conversation,
+      linearElement,
+      scroller,
+      linearScrollCompensation,
+      currentStatus,
+    )
 
     // # Tree style stuff
     const isTreeView = computed(() => displayStyle.value === 'tree')
@@ -213,18 +217,24 @@ export default {
     provide('threadDisplay', threadDisplay)
 
     const ancestorsElement = useTemplateRef('ancestors')
-    const treeScrollCompensation = computed(() => isTreeView.value && isExpanded.value)
+    const treeScrollCompensation = computed(
+      () => isTreeView.value && isExpanded.value,
+    )
     const {
       heightChart: heightChartAncestors,
       changeSuspendState: changeSuspendStateAncestors,
       updateVirtualHeight: updateVirtualHeightAncestors,
-    } = useVirtualScrolling(currentAncestors, ancestorsElement, scroller, treeScrollCompensation)
+    } = useVirtualScrolling(
+      currentAncestors,
+      ancestorsElement,
+      scroller,
+      treeScrollCompensation,
+    )
 
     const currentLevel = computed(() => [currentStatus.value].filter(Boolean))
     const currentLevelElement = useTemplateRef('currentLevel')
     const {
       heightChart: heightChartCurrentLevel,
-      totalHeight: totalHeightCurrentLevel,
       changeSuspendState: changeSuspendStateCurrentLevel,
       updateVirtualHeight: updateVirtualHeightCurrentLevel,
     } = useVirtualScrolling(currentLevel, currentLevelElement, scroller, false)

src/components/status/status.js

@@ -149,7 +149,10 @@ const Status = {
   computed: {
     rootClasses() {
       return [
-        {'-focused': this.focused, '-conversation': !this.isPage && this.isExpanded },
+        {
+          '-focused': this.focused,
+          '-conversation': !this.isPage && this.isExpanded,
+        },
         `-conversation-rank-${this.conversationRank}`,
       ]
     },

src/composables/useScrollPosition.js

@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted, ref, nextTick } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 export function useScrollPosition() {
   const x = ref(0)

src/composables/useVirtualScrolling.js

@@ -1,5 +1,5 @@
 import { storeToRefs } from 'pinia'
-import { computed, ref, watch, nextTick, toValue } from 'vue'
+import { computed, ref, toValue, watch } from 'vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useStatusesStore } from 'src/stores/statuses.js'
@@ -133,9 +133,10 @@ export function useVirtualScrolling(
     if (!toValue(scrollCompensation)) return
     if (scrollInProgress.value) return
     pauseWatchers()
-    const getAnchoredEl = (list) => anchor.value
+    const getAnchoredEl = (list) =>
-      ? list.find(({ id }) => id === anchor.value)
+      anchor.value
-      : list[list.length - 1]
+        ? list.find(({ id }) => id === anchor.value)
+        : list[list.length - 1]
     const oldElement = getAnchoredEl(oldVal)
     const newElement = getAnchoredEl(newVal)
     const oldOffset = oldElement?.top ?? 0
@@ -169,7 +170,10 @@ export function useVirtualScrolling(
       const isAboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary
       // This accounts for the case where item's boundaries exceed scroll boundary
 
-      return { ...heightChartItem, visible: isBelowTopBoundary && isAboveBottomBoundary }
+      return {
+        ...heightChartItem,
+        visible: isBelowTopBoundary && isAboveBottomBoundary,
+      }
     })
 
     // Group invisible statuses into spacers