This commit is contained in:
Henry Jameson 2026-09-15 01:11:30 +03:00
commit 15fe1b9c32
3 changed files with 32 additions and 23 deletions

View file

@ -1,4 +1,3 @@
import { get } from 'lodash-es'
import { storeToRefs } from 'pinia'
import {
computed,
@ -20,7 +19,6 @@ import ThreadTree from 'src/components/thread_tree/thread_tree.vue'
import { useInterfaceStore } from 'src/stores/interface.js'
import { useMergedConfigStore } from 'src/stores/merged_config.js'
import { useStatusesStore } from 'src/stores/statuses.js'
import { useConversation } from 'src/composables/useConversation.js'
import { useInterfaceSizes } from 'src/composables/useInterfaceSizes.js'
@ -28,8 +26,6 @@ import { useScrollPosition } from 'src/composables/useScrollPosition.js'
import { useTreeConversationTopology } from 'src/composables/useTreeConversationTopology.js'
import { useVirtualScrolling } from 'src/composables/useVirtualScrolling.js'
import { WSConnectionStatus } from 'src/api/websocket.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faAngleDoubleDown,
@ -116,7 +112,9 @@ export default {
fetchConversation,
loadError,
} = useConversation(statusId, isExpanded)
const conversationLite = computed(() => conversation.value.map(({ id }) => ({ id })))
const conversationLite = computed(() =>
conversation.value.map(({ id }) => ({ id })),
)
watch(
expanded,
@ -187,7 +185,9 @@ export default {
// # Linear style stuff
const isLinearView = computed(() => displayStyle.value !== 'tree')
const linearElement = useTemplateRef('linear')
const linearScrollCompensation = computed(() => isExpanded.value && isLinearView.value)
const linearScrollCompensation = computed(
() => isExpanded.value && isLinearView.value,
)
const {
heightChart: heightChartLinear,
changeSuspendState: changeSuspendStateLinear,
@ -231,9 +231,13 @@ export default {
{ flush: 'post' },
)
const currentAncestorsLite = computed(() => currentAncestors.value.map(({ id }) => ({ id })))
const currentAncestorsLite = computed(() =>
currentAncestors.value.map(({ id }) => ({ id })),
)
const ancestorsElement = useTemplateRef('ancestors')
const treeScrollCompensation = computed(() => isExpanded.value && isTreeView.value)
const treeScrollCompensation = computed(
() => isExpanded.value && isTreeView.value,
)
const {
heightChart: heightChartAncestors,
changeSuspendState: changeSuspendStateAncestors,

View file

@ -1,4 +1,3 @@
import { get } from 'lodash-es'
import { storeToRefs } from 'pinia'
import { computed, provide, ref, watch } from 'vue'
@ -13,6 +12,7 @@ import {
fetchConversation as apiFetchConversation,
fetchStatus as apiFetchStatus,
} from 'src/api/public.js'
import { WSConnectionStatus } from 'src/api/websocket.js'
export function useConversation(statusId, expanded) {
const loadError = ref(null)
@ -42,9 +42,13 @@ export function useConversation(statusId, expanded) {
}
})
watch(expanded, (value) => {
setFocused(value ? statusId.value : null)
}, { immediate: true })
watch(
expanded,
(value) => {
setFocused(value ? statusId.value : null)
},
{ immediate: true },
)
watch(
focusedStatus,

View file

@ -1,4 +1,4 @@
import { last, first } from 'lodash-es'
import { first, last } from 'lodash-es'
import { computed, nextTick, ref, toValue, watch } from 'vue'
import { useWindowSize } from 'src/composables/useWindowSize.js'
@ -127,7 +127,8 @@ export function useVirtualScrolling({
// Include buffer zone
const finalTopScrollBoundary = topScrollBoundary.value - bufferZone.value
const finalBottomScrollBoundary = bottomScrollBoundary.value + bufferZone.value
const finalBottomScrollBoundary =
bottomScrollBoundary.value + bufferZone.value
// To be visible, item's bottom boundary shoud be below top scroll boundary)
const isBelowTopBoundary = itemBottomBoundary > finalTopScrollBoundary
@ -142,7 +143,7 @@ export function useVirtualScrolling({
heightChart.value.map((heightChartItem) => ({
...heightChartItem,
visible: checkVisible(heightChartItem),
}))
})),
)
// ## Scroll compensation
@ -173,19 +174,20 @@ export function useVirtualScrolling({
return 0 - oldBottomElement.top - oldBottomElement.height
} else {
console.log('COMPENSATE', oldVal, newVal, topScrollBoundary.value)
const oldVisible = oldVal.filter((item) => checkVisible(item))
const oldItem = first(oldVisible)
if (!oldItem) return 0 // probably out of bounds in timeline
const oldItemUpdated = newVal.find(({ id }) => id === oldItem.id)
console.log('OLD', oldItem, oldItemUpdated)
if (!oldItemUpdated) return 0 // context change?
return oldItemUpdated.top - oldItem.top - (oldItem.height - oldItemUpdated.height)
return (
oldItemUpdated.top -
oldItem.top -
(oldItem.height - oldItemUpdated.height)
)
}
})()
if (diff !== 0) {
console.log('DIFF', diff)
// Scroll by amount offset changed to keep it in view
topScrollBoundary.value += diff
bottomScrollBoundary.value += diff
@ -195,14 +197,13 @@ export function useVirtualScrolling({
resumeWatchers()
},
{ flush: 'post' }
{ flush: 'post' },
)
const heightChartGrouped = computed(() =>
// Group invisible items into spacers
heightChartVisibility.value.reduce((acc, heightChartItem) => {
const { suspendable, visible, height, top, bottom, id } =
heightChartItem
const { suspendable, visible, height, top, bottom, id } = heightChartItem
// Bottom value isn't really used otherwise for debugging
const present = visible || !suspendable
if (present) {
@ -237,7 +238,7 @@ export function useVirtualScrolling({
return [...acc, spacer]
}
}
}, [])
}, []),
)
const reset = async () => {