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

src/components/conversation/conversation.js

@@ -16,10 +16,10 @@ import { useStatusesStore } from 'src/stores/statuses.js'
 import { useStreamingStore } from 'src/stores/streaming.js'
 
 import { useConversation } from 'src/composables/useConversation.js'
+import { useInterfaceSizes } from 'src/composables/useInterfaceSizes.js'
 import { useScrollPosition } from 'src/composables/useScrollPosition.js'
 import { useTreeConversationTopology } from 'src/composables/useTreeConversationTopology.js'
 import { useVirtualScrolling } from 'src/composables/useVirtualScrolling.js'
-import { useInterfaceSizes } from 'src/composables/useInterfaceSizes.js'
 
 import { WSConnectionStatus } from 'src/api/websocket.js'
 
@@ -201,15 +201,11 @@ export default {
     // # Linear style stuff
     const isLinearView = computed(() => displayStyle.value !== 'tree')
     const linearElement = useTemplateRef('linear')
-    const linearScrollCompensation = computed(
-      () => isLinearView.value,
-    )
+    const linearScrollCompensation = computed(() => isLinearView.value)
     const {
       heightChart: heightChartLinear,
       changeSuspendState: changeSuspendStateLinear,
       updateVirtualHeight: updateVirtualHeightLinear,
-      pauseWatchers,
-      resumeWatchers,
     } = useVirtualScrolling({
       list: conversation,
       body: linearElement,
@@ -232,9 +228,7 @@ export default {
     provide('threadDisplay', threadDisplay)
 
     const ancestorsElement = useTemplateRef('ancestors')
-    const treeScrollCompensation = computed(
-      () => isTreeView.value,
-    )
+    const treeScrollCompensation = computed(() => isTreeView.value)
     const {
       heightChart: heightChartAncestors,
       changeSuspendState: changeSuspendStateAncestors,

src/composables/useConversation.js

@@ -22,7 +22,9 @@ export function useConversation(statusId, expanded) {
 
   const loadError = ref(null)
   const currentStatus = computed(() => getStatusObject(statusId.value))
-  const mainStatus = computed(() => currentStatus.value?.retweeted_status ?? currentStatus.value)
+  const mainStatus = computed(
+    () => currentStatus.value?.retweeted_status ?? currentStatus.value,
+  )
 
   const sortById = (a, b) => {
     const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id

src/composables/useInterfaceSizes.js

@@ -1,5 +1,5 @@
-import { computed, ref, toValue, watch } from 'vue'
 import { storeToRefs } from 'pinia'
+import { computed, ref, watch } from 'vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
@@ -20,17 +20,19 @@ export function useInterfaceSizes() {
   watch(fontSizeSetting, updateFontSize, { immediate: true })
 
   const navbarSize = computed(() => {
-    const string = fontSize.value * window
-      .getComputedStyle(document.body)
-      .getPropertyValue('--navbarSize')
+    const string =
+      fontSize.value *
+      window.getComputedStyle(document.body).getPropertyValue('--navbarSize')
 
     return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
   })
 
   const panelHeaderSize = computed(() => {
-    const string = fontSize.value * window
-      .getComputedStyle(document.body)
-      .getPropertyValue('--panelHeaderSize')
+    const string =
+      fontSize.value *
+      window
+        .getComputedStyle(document.body)
+        .getPropertyValue('--panelHeaderSize')
 
     return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
   })

src/composables/useVirtualScrolling.js

@@ -1,4 +1,4 @@
-import { computed, ref, toValue, watch, nextTick } from 'vue'
+import { computed, nextTick, ref, toValue, watch } from 'vue'
 
 import { useWindowSize } from 'src/composables/useWindowSize.js'
 
@@ -63,11 +63,7 @@ export function useVirtualScrolling({
   }
 
   // ## Scroll compensation
-  const {
-    y: scrollY,
-    inProgress: scrollInProgress,
-    scrollBy,
-  } = scrollPositionInstance
+  const { y: scrollY, scrollBy } = scrollPositionInstance
   watch(heightChart, async (newVal, oldVal) => {
     if (!toValue(scrollCompensation)) return
     if (newVal.length === 0 && oldVal.length === 0) return
@@ -76,7 +72,10 @@ export function useVirtualScrolling({
     // If we're not given an achor, treat last element as one
     const getAnchoredEl = (list) =>
       toValue(anchorId)
-        ? list.find(({ id }) => id === toValue(anchorId) || id === toValue(anchorRepeatId))
+        ? list.find(
+            ({ id }) =>
+              id === toValue(anchorId) || id === toValue(anchorRepeatId),
+          )
         : list[list.length - 1]
 
     const oldElement = getAnchoredEl(oldVal)
@@ -85,8 +84,12 @@ export function useVirtualScrolling({
     const diff = (() => {
       if (oldElement && newElement) {
         // Generic shifting
-        const oldOffset = toValue(anchorId) ? oldElement.top : (oldElement.top + oldElement.height)
-        const newOffset = toValue(anchorId) ? newElement.top : (newElement.top + newElement.height)
+        const oldOffset = toValue(anchorId)
+          ? oldElement.top
+          : oldElement.top + oldElement.height
+        const newOffset = toValue(anchorId)
+          ? newElement.top
+          : newElement.top + newElement.height
         return newOffset - oldOffset
       } else if (!oldElement && newElement) {
         // Expansion
@@ -95,7 +98,9 @@ export function useVirtualScrolling({
         // Collapsing
         return 0 - oldElement.top - oldElement.height
       } else {
-        throw new Error("Somehow both new and old elements are missing, this shouldn't happen")
+        throw new Error(
+          "Somehow both new and old elements are missing, this shouldn't happen",
+        )
       }
     })()