From 82581b93b8d9f38258cf01252bc3dca595a5481d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 11 Sep 2026 18:17:23 +0300 Subject: [PATCH 1/4] anchorless mode + buffer customization --- src/components/conversation/conversation.js | 3 +- src/composables/useVirtualScrolling.js | 86 ++++++++++++--------- 2 files changed, 51 insertions(+), 38 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index d6ab361d7..5f6b40c11 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -241,8 +241,6 @@ export default { body: linearElement, scrollPositionInstance: scroller, scrollCompensation: linearScrollCompensation, - anchorId: mainStatus.value?.id, - anchorRepeatId: currentStatus.value?.id, getPlaceholderHeight, }) const changeSuspendStateLinearLocal = (e) => { @@ -277,6 +275,7 @@ export default { body: ancestorsElement, scrollPositionInstance: scroller, scrollCompensation: treeScrollCompensation, + collapseMode: 'height', getPlaceholderHeight, }) const changeSuspendStateAncestorsLocal = (e) => { diff --git a/src/composables/useVirtualScrolling.js b/src/composables/useVirtualScrolling.js index 07e0cae8c..5e3d8bb37 100644 --- a/src/composables/useVirtualScrolling.js +++ b/src/composables/useVirtualScrolling.js @@ -1,3 +1,4 @@ +import { last, first } from 'lodash-es' import { computed, nextTick, ref, toValue, watch } from 'vue' import { useWindowSize } from 'src/composables/useWindowSize.js' @@ -9,12 +10,16 @@ export function useVirtualScrolling({ body, // useScrollPosition composable, used to prevent dupicating instances scrollPositionInstance, - // ID of anchor element, used for scroll compensation. - // Omitting it makes last element the anchor - anchorId, - anchorRepeatId, + // buffer zone, the amount of placeholder heights to include + buffer, // whether to use scroll compensation when elements above anchor change + // set to 'positive' to only compensate for positive increase (useful when + // combined with infinite scroll) scrollCompensation, + // How to handle collapse/expansion (going from 0 elements to full and back) + // - false - don't do scroll compensation at all + // - 'height' - compensate scroll according to list's height + collapseMode, // Placeholder height specification. Must be a function. // function will be called either: // - without arguments (for generic placeholder, i.e. buffer zone size) @@ -69,38 +74,47 @@ export function useVirtualScrolling({ if (newVal.length === 0 && oldVal.length === 0) return pauseWatchers() - // 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[list.length - 1] + const oldTopElement = first(oldVal) + const newTopElement = first(newVal) - const oldElement = getAnchoredEl(oldVal) - const newElement = getAnchoredEl(newVal) + const oldBottomElement = last(oldVal) + const newBottomElement = last(newVal) + + const expansion = oldTopElement == null && oldBottomElement == null + const collapse = newTopElement == null && newBottomElement == null + + if (expansion && collapse) throw new Error("List expanded and collapsed at the same time? How? Why? What??") + + const updatedTopElement = oldTopElement ? newVal.find(({ id }) => id === oldTopElement.id) : null + const updatedBottomElement = oldBottomElement ? newVal.find(({ id }) => id === oldBottomElement.id) : null + + const topDisappeared = updatedTopElement == null + const bottomDisappeared = updatedBottomElement == null + + const previousTopElement = newTopElement ? oldVal.find(({ id }) => id === newTopElement.id) : null + const previousBottomElement = newBottomElement ? oldVal.find(({ id }) => id === newBottomElement.id) : null 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 - return newOffset - oldOffset - } else if (!oldElement && newElement) { - // Expansion - return newElement.top + newElement.height - } else if (oldElement && !newElement) { - // Collapsing - return 0 - oldElement.top - oldElement.height - } else { - throw new Error( - "Somehow both new and old elements are missing, this shouldn't happen", - ) + if (expansion) { + // List expanded + if (toValue(collapseMode) === 'height') { + return newBottomElement.top + newBottomElement.height + } else { + return 0 + } + } else if (collapse) { + // List collapsed + if (toValue(collapseMode) === 'height') { + return 0 - oldBottomElement.top - oldBottomElement.height + } else { + return 0 + } + } else if (oldTopElement && updatedTopElement) { + // Topmost element shifted + return updatedTopElement.top - oldTopElement.top + } else if (topDisappeared) { + // Topmost changed (and shifted) + return 0 - newTopElement.top - previousTopElement.top } })() @@ -160,7 +174,7 @@ export function useVirtualScrolling({ // # Visiblity // Add buffer zone to boundary, equal to approx 3 items heights - const buffer = computed(() => getPlaceholderHeight().value * 3) + const bufferZone = computed(() => getPlaceholderHeight().value * (toValue(buffer) ?? 3)) const heightChartGrouped = computed(() => { // Determine visibility state @@ -169,9 +183,9 @@ export function useVirtualScrolling({ const itemBottomBoundary = heightChartItem.top + heightChartItem.height // Include buffer zone - const finalTopScrollBoundary = topScrollBoundary.value - buffer.value + const finalTopScrollBoundary = topScrollBoundary.value - bufferZone.value const finalBottomScrollBoundary = - bottomScrollBoundary.value + buffer.value + bottomScrollBoundary.value + bufferZone.value // To be visible, item's bottom boundary shoud be below top scroll boundary) const isBelowTopBoundary = itemBottomBoundary > finalTopScrollBoundary From 0cd0e62493da110e777045de3c0ac275ddc4815f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 11 Sep 2026 18:17:59 +0300 Subject: [PATCH 2/4] better semantic markup --- src/components/conversation/conversation.js | 19 ++++++++++------- src/components/conversation/conversation.vue | 22 ++++++++++---------- src/components/status/status.vue | 4 ++-- 3 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 5f6b40c11..55edb9a8d 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -192,10 +192,17 @@ export default { 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, - }) + const getStatusClasses = (status, ancestor) => { + const result = { + '-first': status.id === firstStatus.value?.id, + '-last': status.id === lastStatus.value?.id, + } + if (ancestor) { + result['-ancestor'] = true + result['-fade'] = mergedConfig.value.conversationTreeFadeAncestors + } + return result + } const { fontSize } = useInterfaceSizes() @@ -306,9 +313,6 @@ export default { const shouldShowAncestors = computed( () => isExpanded.value && heightChartAncestors.value.length > 0, ) - const shouldFadeAncestors = computed( - () => mergedConfig.value.conversationTreeFadeAncestors, - ) // # Scrolling const diveIntoStatus = (id) => tryScrollTo(id) @@ -366,7 +370,6 @@ export default { treeViewIsSimple, shouldShowAllConversationButton, shouldShowAncestors, - shouldFadeAncestors, // # Scrolling diveToTopLevel, diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 1c0d459f3..4e10bdcd0 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -91,15 +91,14 @@ ref="ancestors" class="thread-ancestors" > -
+ -
+ diff --git a/src/components/status/status.vue b/src/components/status/status.vue index c0a1b0238..fa288145f 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -1,5 +1,5 @@ - + From b573117423420aba20199e1cf80b8ae525f345f2 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 11 Sep 2026 19:08:27 +0300 Subject: [PATCH 3/4] will i ever stop messing with scroll? --- src/components/conversation/conversation.js | 2 + src/components/status/status.js | 5 +- src/composables/useVirtualScrolling.js | 67 +++++++++------------ 3 files changed, 36 insertions(+), 38 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 55edb9a8d..305770131 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -235,6 +235,7 @@ export default { ? mutedStatusHeight : normalStatusHeight + const anchorIds = computed(() => new Set([mainStatus.value?.id, currentStatus.value?.id])) // # Linear style stuff const isLinearView = computed(() => displayStyle.value !== 'tree') const linearElement = useTemplateRef('linear') @@ -248,6 +249,7 @@ export default { body: linearElement, scrollPositionInstance: scroller, scrollCompensation: linearScrollCompensation, + anchorIds, getPlaceholderHeight, }) const changeSuspendStateLinearLocal = (e) => { diff --git a/src/components/status/status.js b/src/components/status/status.js index 277421c6e..c9b3b31c2 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -592,7 +592,7 @@ const Status = { const [entry] = e this.$emit('heightChange', { id: this.status.id, - height: entry.contentRect.height, + height: entry.contentRect.height + 1, element: this.$el, }) }, @@ -600,6 +600,9 @@ const Status = { mounted() { if (this.$refs.root) { this.resizeObserver.observe(this.$refs.root) + this.updateVirtualHeight([{ + contentRect: this.$refs.root.getBoundingClientRect() + }]) } }, unmounted() { diff --git a/src/composables/useVirtualScrolling.js b/src/composables/useVirtualScrolling.js index 5e3d8bb37..97ea87064 100644 --- a/src/composables/useVirtualScrolling.js +++ b/src/composables/useVirtualScrolling.js @@ -20,6 +20,8 @@ export function useVirtualScrolling({ // - false - don't do scroll compensation at all // - 'height' - compensate scroll according to list's height collapseMode, + // Anchor. Set of IDs of element relative to which do scroll compensation + anchorIds, // Placeholder height specification. Must be a function. // function will be called either: // - without arguments (for generic placeholder, i.e. buffer zone size) @@ -50,7 +52,7 @@ export function useVirtualScrolling({ } else { return getPlaceholderHeight(id).value } - })() + 1 //including border + })() const suspendable = !unsuspendibleIds.value.has(id) return { id, height, suspendable, item } }) @@ -74,50 +76,41 @@ export function useVirtualScrolling({ if (newVal.length === 0 && oldVal.length === 0) return pauseWatchers() - const oldTopElement = first(oldVal) - const newTopElement = first(newVal) - - const oldBottomElement = last(oldVal) - const newBottomElement = last(newVal) - - const expansion = oldTopElement == null && oldBottomElement == null - const collapse = newTopElement == null && newBottomElement == null - - if (expansion && collapse) throw new Error("List expanded and collapsed at the same time? How? Why? What??") - - const updatedTopElement = oldTopElement ? newVal.find(({ id }) => id === oldTopElement.id) : null - const updatedBottomElement = oldBottomElement ? newVal.find(({ id }) => id === oldBottomElement.id) : null - - const topDisappeared = updatedTopElement == null - const bottomDisappeared = updatedBottomElement == null - - const previousTopElement = newTopElement ? oldVal.find(({ id }) => id === newTopElement.id) : null - const previousBottomElement = newBottomElement ? oldVal.find(({ id }) => id === newBottomElement.id) : null + const expansion = oldVal.length === 0 && newVal.length !== 0 + const collapse = oldVal.length !== 0 && newVal.length === 0 const diff = (() => { - if (expansion) { - // List expanded + if (expansion || collapse) { if (toValue(collapseMode) === 'height') { - return newBottomElement.top + newBottomElement.height - } else { - return 0 + const oldBottomElement = last(oldVal) + const newBottomElement = last(newVal) + + if (expansion) { + return newBottomElement.top + newBottomElement.height + } else if (collapse) { + return 0 - oldBottomElement.top - oldBottomElement.height + } } - } else if (collapse) { - // List collapsed - if (toValue(collapseMode) === 'height') { - return 0 - oldBottomElement.top - oldBottomElement.height - } else { - return 0 + return 0 + } else if (toValue(anchorIds) != null) { + const anchorOld = oldVal.find(({ id }) => toValue(anchorIds).has(id)) + const anchorNew = newVal.find(({ id }) => toValue(anchorIds).has(id)) + if (anchorOld == null) { + throw new Error('Anchor not found!') } - } else if (oldTopElement && updatedTopElement) { - // Topmost element shifted - return updatedTopElement.top - oldTopElement.top - } else if (topDisappeared) { - // Topmost changed (and shifted) - return 0 - newTopElement.top - previousTopElement.top + + const disappeared = anchorOld != null && anchorNew == null + if (disappeared) { + throw new Error('Anchor disappeared!') + } + + return anchorNew.top - anchorOld.top + } else { + return 0 } })() + console.log(diff) if (diff !== 0) { // Scroll by amount offset changed to keep it in view topScrollBoundary.value += diff From 41ecad7fc0033be390baa71409829d6aff56e09b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 11 Sep 2026 19:10:04 +0300 Subject: [PATCH 4/4] lint --- src/components/conversation/conversation.js | 4 +++- src/components/status/status.js | 10 ++++++---- src/composables/useVirtualScrolling.js | 21 +++++++++++---------- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 305770131..1a2c61ab1 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -235,7 +235,9 @@ export default { ? mutedStatusHeight : normalStatusHeight - const anchorIds = computed(() => new Set([mainStatus.value?.id, currentStatus.value?.id])) + const anchorIds = computed( + () => new Set([mainStatus.value?.id, currentStatus.value?.id]), + ) // # Linear style stuff const isLinearView = computed(() => displayStyle.value !== 'tree') const linearElement = useTemplateRef('linear') diff --git a/src/components/status/status.js b/src/components/status/status.js index c9b3b31c2..ec685b0d2 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -600,16 +600,18 @@ const Status = { mounted() { if (this.$refs.root) { this.resizeObserver.observe(this.$refs.root) - this.updateVirtualHeight([{ - contentRect: this.$refs.root.getBoundingClientRect() - }]) + this.updateVirtualHeight([ + { + contentRect: this.$refs.root.getBoundingClientRect(), + }, + ]) } }, unmounted() { this.resizeObserver.disconnect() }, watch: { - hideStatus: function (element) { + hideStatus: function () { if (this.$refs.root) { this.resizeObserver.observe(this.$refs.root) } else { diff --git a/src/composables/useVirtualScrolling.js b/src/composables/useVirtualScrolling.js index 97ea87064..d466fc059 100644 --- a/src/composables/useVirtualScrolling.js +++ b/src/composables/useVirtualScrolling.js @@ -1,4 +1,4 @@ -import { last, first } from 'lodash-es' +import { last } from 'lodash-es' import { computed, nextTick, ref, toValue, watch } from 'vue' import { useWindowSize } from 'src/composables/useWindowSize.js' @@ -45,14 +45,13 @@ export function useVirtualScrolling({ // Map every height and suspendable state const chart = list.value.map((item) => { const { id } = item - const height = - (() => { - if (heights.value.has(id)) { - return heights.value.get(id) - } else { - return getPlaceholderHeight(id).value - } - })() + const height = (() => { + if (heights.value.has(id)) { + return heights.value.get(id) + } else { + return getPlaceholderHeight(id).value + } + })() const suspendable = !unsuspendibleIds.value.has(id) return { id, height, suspendable, item } }) @@ -167,7 +166,9 @@ export function useVirtualScrolling({ // # Visiblity // Add buffer zone to boundary, equal to approx 3 items heights - const bufferZone = computed(() => getPlaceholderHeight().value * (toValue(buffer) ?? 3)) + const bufferZone = computed( + () => getPlaceholderHeight().value * (toValue(buffer) ?? 3), + ) const heightChartGrouped = computed(() => { // Determine visibility state