hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Henry Jameson 2026-09-15 02:21:29 +03:00
commit 6333aeac87
8 changed files with 229 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

118
src/components/conversation/conversation.js
View file

@ -1,4 +1,3 @@
import { get } from 'lodash-es'
import { storeToRefs } from 'pinia'
import {
computed,
@ -20,8 +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 { useStreamingStore } from 'src/stores/streaming.js'
import { useConversation } from 'src/composables/useConversation.js'
import { useInterfaceSizes } from 'src/composables/useInterfaceSizes.js'
@ -29,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,
@ -72,18 +67,9 @@ export default {
},
emits: ['heightChange', 'suspendableStateChange'],
setup(props, { emit }) {
// # Helpers
const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
const getConversationId = (statusId) => {
const status = getStatusObject(statusId)
return get(
status,
'retweeted_status.statusnet_conversation_id',
get(status, 'statusnet_conversation_id'),
)
}
const router = useRouter()
const scroller = useScrollPosition()
const tryScrollTo = async (id) => {
if (!id) {
return
@ -96,19 +82,9 @@ export default {
return await scroller.scrollIntoView(target, { block: 'nearest' })
}
const { statusId } = toRefs(props)
const router = useRouter()
// # Main Configuration / global state
const { mergedConfig } = storeToRefs(useMergedConfigStore())
const { mastoUserSocketStatus } = storeToRefs(useStreamingStore())
const displayStyle = computed(() => mergedConfig.value.conversationDisplay)
const streamingEnabled = computed(
() =>
mergedConfig.value.useStreamingApi &&
mastoUserSocketStatus === WSConnectionStatus.JOINED,
)
const { layoutType } = storeToRefs(useInterfaceStore())
const mobileLayout = computed(() => layoutType.value === 'mobile')
@ -123,24 +99,11 @@ export default {
provide('isPage', isPage)
provide('expandable', true)
// # Focus
const focusedId = ref(statusId.value)
const focused = computed(() => (isExpanded.value ? focusedId.value : null))
const setFocused = (id) => {
if (!id) return
focusedId.value = id
if (!streamingEnabled.value) {
useStatusesStore().fetchStatus(id)
}
useStatusesStore().fetchFavsAndRepeats(id)
useStatusesStore().fetchEmojiReactions(id)
}
provide('focused', focused)
// # Main things
const { statusId } = toRefs(props)
const {
focusedId,
setFocused,
currentStatus,
mainStatus,
conversation,
@ -148,40 +111,21 @@ export default {
getReplies,
fetchConversation,
loadError,
} = useConversation(focusedId, isExpanded)
} = useConversation(statusId, isExpanded)
const conversationLite = computed(() =>
conversation.value.map(({ id }) => ({ id })),
)
watch(
expanded,
async (value) => {
if (value) {
await fetchConversation()
} else {
resetDisplayState()
}
if (isPage.value) return
},
{ flush: 'post' },
)
const resetDisplayState = () => {
setFocused(statusId.value)
resetThreadDisplay()
}
watch(statusId, (newVal, oldVal) => {
const newConversationId = getConversationId(newVal)
const oldConversationId = getConversationId(oldVal)
if (
newConversationId &&
oldConversationId &&
newConversationId === oldConversationId
) {
setFocused(newVal)
} else {
resetDisplayState()
fetchConversation()
}
})
// Component created
if (isPage.value) {
fetchConversation()
@ -192,10 +136,10 @@ export default {
const lastStatus = computed(
() => conversation.value[conversation.value.legnth - 1],
)
const getStatusClasses = (status, ancestor) => {
const getStatusClasses = (statusId, ancestor) => {
const result = {
'-first': status.id === firstStatus.value?.id,
'-last': status.id === lastStatus.value?.id,
'-first': statusId === firstStatus.value?.id,
'-last': statusId === lastStatus.value?.id,
}
if (ancestor) {
result['-ancestor'] = true
@ -204,8 +148,6 @@ export default {
return result
}
const { fontSize } = useInterfaceSizes()
// External virtual scrolling
const unsuspendableIds = ref(new Set())
const suspendable = computed(
@ -228,6 +170,7 @@ export default {
onUnmounted(() => resizeObserver.value.disconnect())
// Placeholder heights.
const { fontSize } = useInterfaceSizes()
const mutedStatusHeight = computed(() => fontSize.value * 1.5)
const normalStatusHeight = computed(() => fontSize.value * 10)
const getPlaceholderHeight = (id) =>
@ -238,20 +181,26 @@ export default {
const anchorIds = computed(
() => new Set([mainStatus.value?.id, currentStatus.value?.id]),
)
// # Linear style stuff
const isLinearView = computed(() => displayStyle.value !== 'tree')
const linearElement = useTemplateRef('linear')
const linearScrollCompensation = computed(() => isLinearView.value)
const linearScrollCompensation = computed(
() => isExpanded.value && isLinearView.value,
)
const {
heightChart: heightChartLinear,
changeSuspendState: changeSuspendStateLinear,
updateVirtualHeight: updateVirtualHeightLinear,
reset: resetLinearScrollVirtualization,
} = useVirtualScrolling({
list: conversation,
context: statusId,
list: conversationLite,
body: linearElement,
scrollPositionInstance: scroller,
scrollCompensation: linearScrollCompensation,
anchorIds,
collapseMode: 'item',
getPlaceholderHeight,
})
const changeSuspendStateLinearLocal = (e) => {
@ -274,15 +223,29 @@ export default {
resetThreadDisplay,
} = useTreeConversationTopology(conversation, replies, focusedId)
provide('threadDisplay', threadDisplay)
watch(
isExpanded,
(value) => {
if (!value) resetThreadDisplay()
},
{ flush: 'post' },
)
const currentAncestorsLite = computed(() =>
currentAncestors.value.map(({ id }) => ({ id })),
)
const ancestorsElement = useTemplateRef('ancestors')
const treeScrollCompensation = computed(() => isTreeView.value)
const treeScrollCompensation = computed(
() => isExpanded.value && isTreeView.value,
)
const {
heightChart: heightChartAncestors,
changeSuspendState: changeSuspendStateAncestors,
updateVirtualHeight: updateVirtualHeightAncestors,
reset: resetTreeScrollVirtualization,
} = useVirtualScrolling({
list: currentAncestors,
context: statusId,
list: currentAncestorsLite,
body: ancestorsElement,
scrollPositionInstance: scroller,
scrollCompensation: treeScrollCompensation,
@ -308,6 +271,11 @@ export default {
}
}
watch(statusId, (neu, old) => {
resetLinearScrollVirtualization()
resetTreeScrollVirtualization()
})
const treeViewIsSimple = computed(
() => !mergedConfig.value.conversationTreeAdvanced,
)
@ -333,7 +301,7 @@ export default {
toggleExpanded,
// # Focus
focused,
focusedId,
setFocused,
// # Main things

18
src/components/conversation/conversation.vue
View file

@ -98,19 +98,19 @@
<Status
v-if="element.type === 'item'"
class="conversation-status panel-body"
:class="getStatusClasses(element.item, true)"
:class="getStatusClasses(element.id, true)"
:status-id="element.item.id"
:replies="getReplies(element.item.id)"
:status-id="element.id"
:replies="getReplies(element.id)"
:focused="focused === element.item.id"
:focused="focusedId === element.id"
conversation-rank="ancestor"
:data-status-id="element.id"
:data-vs-height="element.height"
:data-vs-top="element.top"
@goto="setFocused"
@dive="diveIntoStatus(element.item.id)"
@dive="diveIntoStatus(element.id)"
@suspendable-state-change="changeSuspendStateAncestorsLocal"
@height-change="updateVirtualHeightAncestors"
/>
@ -145,11 +145,11 @@
<Status
v-if="element.type === 'item'"
class="panel-body conversation-status"
:class="getStatusClasses(element.item)"
:status-id="element.item.id"
:replies="getReplies(element.item.id)"
:class="getStatusClasses(element.id)"
:status-id="element.id"
:replies="getReplies(element.id)"
:focused="focused === element.id || focused === element.item.retweeted_status?.id"
:focused="focusedId === element.id"
:data-status-id="element.id"
:data-vs-height="element.height"

2
src/components/thread_tree/thread_tree.js
View file

@ -37,7 +37,7 @@ const ThreadTree = {
],
inject: [
'conversation',
'focused',
'focusedId',
'replies',
'threadDisplay',
'isExpanded',

2
src/components/thread_tree/thread_tree.vue
View file

@ -8,8 +8,8 @@
class="conversation-status conversation-status-treeview panel-body"
:status-id="statusId"
:replies="getReplies(statusId)"
:focused="focused === statusId"
:focused="focusedId === status.id"
:data-status-id="statusId"
:conversation-rank="depth === 0 ? 'current' : 'child'"
:thread-display-state="threadDisplay.get(statusId)"

2
src/components/timeline/timeline.vue
View file

@ -88,7 +88,7 @@
>
<Conversation
v-if="element.type === 'item'"
:status-id="element.item.id"
:status-id="element.id"
role="listitem"
:data-vs-height="element.height"

75
src/composables/useConversation.js
View file

@ -1,29 +1,68 @@
import { get } from 'lodash-es'
import { computed, provide, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { computed, provide, ref, watch } from 'vue'
import { useMergedConfigStore } from 'src/stores/merged_config.js'
import { useOAuthStore } from 'src/stores/oauth.js'
import { useStatusesStore } from 'src/stores/statuses.js'
import { useStreamingStore } from 'src/stores/streaming.js'
import { useMainStatus } from 'src/composables/useMainStatus.js'
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 getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
const getConversationId = (statusId) => {
const status = getStatusObject(statusId)
return get(
status,
'retweeted_status.statusnet_conversation_id',
get(status, 'statusnet_conversation_id'),
)
}
const loadError = ref(null)
const currentStatus = computed(() => getStatusObject(statusId.value))
const mainStatus = computed(
() => currentStatus.value?.retweeted_status ?? currentStatus.value,
const { status: currentStatus, mainStatus } = useMainStatus(statusId)
// # Config
const { mergedConfig } = storeToRefs(useMergedConfigStore())
const { mastoUserSocketStatus } = storeToRefs(useStreamingStore())
const streamingEnabled = computed(
() =>
mergedConfig.value.useStreamingApi &&
mastoUserSocketStatus === WSConnectionStatus.JOINED,
)
// # Focus
const focusedId = ref(null)
const { mainStatus: focusedStatus } = useMainStatus(focusedId)
const setFocused = (id) => {
focusedId.value = id
}
provide('focusedId', focusedId)
watch(mainStatus, (newStatus, oldStatus) => {
if (newStatus) setFocused(newStatus.id)
if (newStatus.id !== oldStatus.id) {
fetchConversation()
}
})
watch(
expanded,
(value) => {
setFocused(value ? statusId.value : null)
},
{ immediate: true },
)
watch(
focusedStatus,
(newVal, oldVal) => {
if (!newVal) return
if (newVal?.id === oldVal?.id) return // prevents infinite loop
if (!streamingEnabled.value) {
useStatusesStore().fetchStatus(newVal.id)
}
useStatusesStore().fetchFavsAndRepeats(newVal.id)
useStatusesStore().fetchEmojiReactions(newVal.id)
},
{ immediate: true },
)
const sortById = (a, b) => {
@ -43,7 +82,9 @@ export function useConversation(statusId, expanded) {
return idA < idB ? -1 : 1
}
}
const conversationId = computed(() => getConversationId(statusId.value))
const conversationId = computed(
() => mainStatus.value.statusnet_conversation_id,
)
const conversation = computed(() => {
if (!currentStatus.value) {
return []
@ -117,6 +158,8 @@ export function useConversation(statusId, expanded) {
}
return {
focusedId,
setFocused,
currentStatus,
mainStatus,
conversation,

24
src/composables/useMainStatus.js Normal file
View file

@ -0,0 +1,24 @@
import { computed, toValue } from 'vue'
import { useStatusesStore } from 'src/stores/statuses.js'
export function useMainStatus(statusId) {
const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
const status = computed(() => getStatusObject(toValue(statusId)))
const mainStatus = computed(() => {
if (!status.value) return
const retweetedStatusId = status.value.retweeted_status?.id
if (retweetedStatusId) {
return getStatusObject(retweetedStatusId)
} else {
return status.value
}
})
return {
status,
mainStatus,
}
}

169
src/composables/useVirtualScrolling.js
View file

@ -1,4 +1,4 @@
import { last } from 'lodash-es'
import { first, last } from 'lodash-es'
import { computed, nextTick, ref, toValue, watch } from 'vue'
import { useWindowSize } from 'src/composables/useWindowSize.js'
@ -19,6 +19,8 @@ export function useVirtualScrolling({
// 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
// - 'item' - same as height but uses anchor element's top offset
// instead of whole height
collapseMode,
// Anchor. Set of IDs of element relative to which do scroll compensation
anchorIds,
@ -53,7 +55,8 @@ export function useVirtualScrolling({
}
})()
const suspendable = !unsuspendibleIds.value.has(id)
return { id, height, suspendable, item }
const real = heights.value.has(id)
return { id, height, suspendable, real }
})
// Walk over the list to set top offsets
@ -68,59 +71,7 @@ export function useVirtualScrolling({
heights.value.set(id, height)
}
// ## Scroll compensation
const { y: scrollY, scrollBy } = scrollPositionInstance
watch(heightChart, async (newVal, oldVal) => {
if (!toValue(scrollCompensation)) return
if (newVal.length === 0 && oldVal.length === 0) return
pauseWatchers()
const expansion = oldVal.length === 0 && newVal.length !== 0
const collapse = oldVal.length !== 0 && newVal.length === 0
const diff = (() => {
if (expansion || collapse) {
if (toValue(collapseMode) === 'height') {
const oldBottomElement = last(oldVal)
const newBottomElement = last(newVal)
if (expansion) {
return newBottomElement.top + newBottomElement.height
} else if (collapse) {
return 0 - oldBottomElement.top - oldBottomElement.height
}
}
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!')
}
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
bottomScrollBoundary.value += diff
await nextTick()
await scrollBy(0, diff)
}
resumeWatchers()
})
const { height: windowHeight } = useWindowSize()
// Real scroll boundary, relative to body's bounds
@ -170,37 +121,93 @@ export function useVirtualScrolling({
() => getPlaceholderHeight().value * (toValue(buffer) ?? 3),
)
const heightChartGrouped = computed(() => {
// Determine visibility state
const chart = heightChart.value.map((heightChartItem) => {
const itemTopBoundary = heightChartItem.top
const itemBottomBoundary = heightChartItem.top + heightChartItem.height
const checkVisible = ({ top, height }) => {
const itemTopBoundary = top
const itemBottomBoundary = top + height
// Include buffer zone
const finalTopScrollBoundary = topScrollBoundary.value - bufferZone.value
const finalBottomScrollBoundary =
bottomScrollBoundary.value + bufferZone.value
// Include buffer zone
const finalTopScrollBoundary = topScrollBoundary.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
// To be visible, item's top boundary shoud be above bottom scroll boundary)
const isAboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary
// This accounts for the case where item's boundaries exceed scroll boundary
// To be visible, item's bottom boundary shoud be below top scroll boundary)
const isBelowTopBoundary = itemBottomBoundary > finalTopScrollBoundary
// To be visible, item's top boundary shoud be above bottom scroll boundary)
const isAboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary
// This accounts for the case where item's boundaries exceed scroll boundary
return {
...heightChartItem,
visible: isBelowTopBoundary && isAboveBottomBoundary,
return isBelowTopBoundary && isAboveBottomBoundary
}
const heightChartVisibility = computed(() =>
heightChart.value.map((heightChartItem) => ({
...heightChartItem,
visible: checkVisible(heightChartItem),
})),
)
// ## Scroll compensation
watch(
heightChart,
async (newVal, oldVal) => {
if (!toValue(scrollCompensation)) return
if (newVal.length === 0 && oldVal.length === 0) return
const diff = (() => {
const expansion = oldVal.length === 0 && newVal.length !== 0
const collapse = oldVal.length !== 0 && newVal.length === 0
if (expansion) {
if (toValue(collapseMode) === 'height') {
const newBottomElement = last(newVal)
return newBottomElement.top + newBottomElement.height
} else if (toValue(collapseMode) === 'item') {
const element = newVal.find(({ id }) => toValue(anchorIds).has(id))
return element.top
} else {
return 0
}
} else if (collapse) {
const oldBottomElement = last(oldVal)
return 0 - oldBottomElement.top - oldBottomElement.height
} else {
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)
if (!oldItemUpdated) return 0 // context change?
return (
oldItemUpdated.top -
oldItem.top -
(oldItem.height - oldItemUpdated.height)
)
}
})()
if (diff !== 0) {
// Scroll by amount offset changed to keep it in view
topScrollBoundary.value += diff
bottomScrollBoundary.value += diff
await scrollBy(0, diff)
await nextTick()
}
})
resumeWatchers()
},
{ flush: 'post' },
)
const heightChartGrouped = computed(() =>
// Group invisible items into spacers
return chart.reduce((acc, heightChartItem) => {
const { suspendable, visible, height, top, bottom, id, item } =
heightChartItem
heightChartVisibility.value.reduce((acc, heightChartItem) => {
const { suspendable, visible, height, top, bottom, id } = heightChartItem
// Bottom value isn't really used otherwise for debugging
const present = visible || !suspendable
if (present) {
return [...acc, { type: 'item', height, top, bottom, id, item }]
return [...acc, { type: 'item', height, top, bottom, id }]
} else {
// Reusing previous item if possible
const previousItem = acc[acc.length - 1]
@ -231,8 +238,13 @@ export function useVirtualScrolling({
return [...acc, spacer]
}
}
}, [])
})
}, []),
)
const reset = async () => {
unsuspendibleIds.value = new Set()
heights.value = new Map()
}
return {
heightChart: heightChartGrouped,
@ -241,5 +253,6 @@ export function useVirtualScrolling({
pauseWatchers,
resumeWatchers,
updateBoundaries,
reset,
}
}