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-11 22:32:44 +03:00
commit b53abd8132
6 changed files with 161 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

117
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,17 +67,6 @@ 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 scroller = useScrollPosition()
const tryScrollTo = async (id) => {
if (!id) {
@ -100,15 +84,30 @@ export default {
const router = useRouter()
const onReset = () => {
resetThreadDisplay()
}
// # Main things
const {
currentStatus,
mainStatus,
fullConversation,
replies,
getReplies,
fetchConversation,
loadError,
focusedId,
setFocused,
reset,
} = useConversation({
statusId,
onReset,
})
// # 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,32 +122,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 {
currentStatus,
mainStatus,
conversation,
replies,
getReplies,
fetchConversation,
loadError,
} = useConversation(focusedId, isExpanded)
const conversation = computed(() =>
!expanded.value ? [currentStatus.value] : fullConversation.value,
)
watch(
expanded,
@ -156,32 +134,13 @@ export default {
if (value) {
await fetchConversation()
} else {
resetDisplayState()
reset()
}
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 +151,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()
@ -228,6 +194,9 @@ 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')
@ -241,8 +210,7 @@ export default {
body: linearElement,
scrollPositionInstance: scroller,
scrollCompensation: linearScrollCompensation,
anchorId: mainStatus.value?.id,
anchorRepeatId: currentStatus.value?.id,
anchorIds,
getPlaceholderHeight,
})
const changeSuspendStateLinearLocal = (e) => {
@ -277,6 +245,7 @@ export default {
body: ancestorsElement,
scrollPositionInstance: scroller,
scrollCompensation: treeScrollCompensation,
collapseMode: 'height',
getPlaceholderHeight,
})
const changeSuspendStateAncestorsLocal = (e) => {
@ -307,9 +276,6 @@ export default {
const shouldShowAncestors = computed(
() => isExpanded.value && heightChartAncestors.value.length > 0,
)
const shouldFadeAncestors = computed(
() => mergedConfig.value.conversationTreeFadeAncestors,
)
// # Scrolling
const diveIntoStatus = (id) => tryScrollTo(id)
@ -367,7 +333,6 @@ export default {
treeViewIsSimple,
shouldShowAllConversationButton,
shouldShowAncestors,
shouldFadeAncestors,
// # Scrolling
diveToTopLevel,

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

@ -91,15 +91,14 @@
ref="ancestors"
class="thread-ancestors"
>
<article
<template
v-for="element in heightChartAncestors"
class="thread-ancestor"
:class="{'thread-ancestor-has-other-replies': getReplies(element.id).size > 1, '-faded': shouldFadeAncestors}"
:key="element.id"
>
<Status
v-if="element.type === 'item'"
class="conversation-status panel-body"
:class="getStatusClasses(element.item)"
:class="getStatusClasses(element.item, true)"
:status-id="element.item.id"
:replies="getReplies(element.item.id)"
@ -119,8 +118,9 @@
v-if="element.type === 'spacer'"
class="virtual-spacer"
:style="{ height: element.height + 'px' }"
aria-hidden="true"
/>
</article>
</template>
</div>
<ThreadTree
:status-id="currentStatus.id"
@ -138,14 +138,13 @@
ref="linear"
class="thread-body"
>
<article
<template
v-for="element in heightChartLinear"
class="panel-body"
:key="element.id ?? element.ids"
:key="element.id"
>
<Status
v-if="element.type === 'item'"
class="conversation-status"
class="panel-body conversation-status"
:class="getStatusClasses(element.item)"
:status-id="element.item.id"
:replies="getReplies(element.item.id)"
@ -163,10 +162,11 @@
/>
<div
v-if="element.type === 'spacer'"
class="virtual-spacer"
aria-hidden="true"
class="panel-body virtual-spacer"
:style="{ height: element.height + 'px' }"
/>
</article>
</template>
</div>
</div>
</div>

9
src/components/status/status.js
View file

@ -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,13 +600,18 @@ const Status = {
mounted() {
if (this.$refs.root) {
this.resizeObserver.observe(this.$refs.root)
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 {

4
src/components/status/status.vue
View file

@ -1,5 +1,5 @@
<template>
<div
<article
v-if="!hideStatus"
ref="root"
class="Status"
@ -568,7 +568,7 @@
</template>
</i18n-t>
</template>
</div>
</article>
</template>
<script src="./status.js"></script>

55
src/composables/useConversation.js
View file

@ -1,15 +1,26 @@
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 {
fetchConversation as apiFetchConversation,
fetchStatus as apiFetchStatus,
} from 'src/api/public.js'
export function useConversation(statusId, expanded) {
export function useConversation({ statusId, onReset }) {
const { mastoUserSocketStatus } = storeToRefs(useStreamingStore())
const { mergedConfig } = storeToRefs(useMergedConfigStore())
const streamingEnabled = computed(
() =>
mergedConfig.value.useStreamingApi &&
mastoUserSocketStatus === WSConnectionStatus.JOINED,
)
const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
const getConversationId = (statusId) => {
const status = getStatusObject(statusId)
@ -19,6 +30,37 @@ export function useConversation(statusId, expanded) {
get(status, 'statusnet_conversation_id'),
)
}
// # Focus
const focusedId = ref(statusId.value)
const setFocused = (id) => {
if (!id) return
focusedId.value = id
if (!streamingEnabled.value) {
useStatusesStore().fetchStatus(id)
}
useStatusesStore().fetchFavsAndRepeats(id)
useStatusesStore().fetchEmojiReactions(id)
}
const reset = () => {
onReset?.()
setFocused(statusId.value)
}
watch(statusId, (newVal, oldVal) => {
const newConversationId = getConversationId(newVal)
const oldConversationId = getConversationId(oldVal)
if (
newConversationId &&
oldConversationId &&
newConversationId === oldConversationId
) {
setFocused(newVal)
} else {
resetDisplayState()
fetchConversation()
}
})
const loadError = ref(null)
const currentStatus = computed(() => getStatusObject(statusId.value))
@ -49,10 +91,6 @@ export function useConversation(statusId, expanded) {
return []
}
if (!expanded.value) {
return [currentStatus.value]
}
const conversation = useStatusesStore().conversations.get(
conversationId.value,
)
@ -119,10 +157,13 @@ export function useConversation(statusId, expanded) {
return {
currentStatus,
mainStatus,
conversation,
fullConversation: conversation,
focusedId,
setFocused,
replies,
getReplies,
fetchConversation,
reset,
loadError,
}
}

96
src/composables/useVirtualScrolling.js
View file

@ -1,3 +1,4 @@
import { last } from 'lodash-es'
import { computed, nextTick, ref, toValue, watch } from 'vue'
import { useWindowSize } from 'src/composables/useWindowSize.js'
@ -9,12 +10,18 @@ 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,
// 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)
@ -38,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
}
})() + 1 //including border
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 }
})
@ -69,41 +75,41 @@ 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 oldElement = getAnchoredEl(oldVal)
const newElement = getAnchoredEl(newVal)
const expansion = oldVal.length === 0 && newVal.length !== 0
const collapse = oldVal.length !== 0 && newVal.length === 0
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
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 {
throw new Error(
"Somehow both new and old elements are missing, this shouldn't happen",
)
return 0
}
})()
console.log(diff)
if (diff !== 0) {
// Scroll by amount offset changed to keep it in view
topScrollBoundary.value += diff
@ -160,7 +166,9 @@ 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 +177,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