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

conversation composable + virtual scrolling for trees (somewhat)

Browse source
This commit is contained in:
Henry Jameson 2026-09-09 14:46:40 +03:00
commit a24d2a1bba
6 changed files with 259 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,17 +20,13 @@ 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 { useOAuthStore } from 'src/stores/oauth.js'
import { useStatusesStore } from 'src/stores/statuses.js'
import { useStreamingStore } from 'src/stores/streaming.js'
import { useConversation } from 'src/composables/useConversation.js'
import { useTreeConversationTopology } from 'src/composables/useTreeConversationTopology.js'
import { useVirtualScrolling } from 'src/composables/useVirtualScrolling.js'
import {
fetchConversation as apiFetchConversation,
fetchStatus as apiFetchStatus,
} from 'src/api/public.js'
import { WSConnectionStatus } from 'src/api/websocket.js'
import { library } from '@fortawesome/fontawesome-svg-core'
@ -73,11 +69,22 @@ export default {
RichContent,
},
setup(props) {
// # 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 { statusId } = toRefs(props)
const router = useRouter()
// # Main Configuration
// # Main Configuration / global state
const { mergedConfig } = storeToRefs(useMergedConfigStore())
const { mastoUserSocketStatus } = storeToRefs(useStreamingStore())
const displayStyle = computed(() => mergedConfig.value.conversationDisplay)
@ -86,12 +93,26 @@ export default {
mergedConfig.value.useStreamingApi &&
mastoUserSocketStatus === WSConnectionStatus.JOINED,
)
// # Misc
const loadStatusError = ref(null)
const { layoutType } = storeToRefs(useInterfaceStore())
const mobileLayout = computed(() => layoutType.value === 'mobile')
// # Conversation Expansion
const expanded = ref(false)
const { isPage } = toRefs(props)
const isExpanded = computed(() => !!(expanded.value || isPage.value))
const toggleExpanded = () => {
expanded.value = !expanded.value
}
watch(expanded, (value) => {
if (value) {
fetchConversation()
} else {
resetDisplayState()
}
})
provide('isExpanded', isExpanded)
provide('isPage', isPage)
// # Focus
const focusedId = ref(statusId.value)
const focused = computed(() => (isExpanded.value ? focusedId.value : null))
@ -109,49 +130,15 @@ export default {
provide('focused', focused)
// # Main things
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 currentStatus = computed(() => getStatusObject(focusedId.value))
const {
currentStatus,
conversation,
replies,
getReplies,
fetchConversation,
loadError,
} = useConversation(focusedId, isExpanded)
const fetchConversation = async () => {
if (currentStatus.value) {
const {
data: { ancestors, descendants },
timestamp,
} = await apiFetchConversation({
id: statusId.value,
credentials: useOAuthStore().token,
})
useStatusesStore().addNewStatuses({ statuses: ancestors, timestamp })
useStatusesStore().addNewStatuses({
statuses: descendants,
timestamp,
})
} else {
try {
loadStatusError.value = null
const { data: status } = await apiFetchStatus({
id: statusId.value,
credentials: useOAuthStore().token,
})
useStatusesStore().addNewStatuses({ statuses: [status] })
fetchConversation()
} catch (error) {
console.error(error)
loadStatusError.value = error
}
}
}
const resetDisplayState = () => {
setFocused(statusId.value)
resetThreadDisplay()
@ -171,80 +158,6 @@ export default {
}
})
const sortById = (a, b) => {
const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id
const seqA = Number(idA)
const seqB = Number(idB)
const isSeqA = !Number.isNaN(seqA)
const isSeqB = !Number.isNaN(seqB)
if (isSeqA && isSeqB) {
return seqA < seqB ? -1 : 1
} else if (isSeqA && !isSeqB) {
return -1
} else if (!isSeqA && isSeqB) {
return 1
} else {
return idA < idB ? -1 : 1
}
}
const conversationId = computed(() => getConversationId(statusId.value))
const conversation = computed(() => {
if (!currentStatus.value) {
return []
}
if (!isExpanded.value) {
return [currentStatus.value]
}
const conversation = useStatusesStore().conversations.get(
conversationId.value,
)
return [...conversation.keys()]
.map((k) => useStatusesStore().allStatuses.get(k))
.filter((status) => status.type != 'repeat') // Old backend behavior?
.toSorted(sortById)
})
const replies = computed(() =>
conversation.value.reduce(
(result, { id, in_reply_to_status_id: irid }, index) => {
if (irid) {
if (!result.has(irid)) {
result.set(irid, new Set())
}
result.get(irid).add({
name: `#${index}`,
id,
})
}
return result
},
new Map(),
),
)
const getReplies = (id) => replies.value.get(id) ?? new Set()
provide('conversation', conversation)
provide('replies', replies)
// # Conversation Expansion
const expanded = ref(false)
const { isPage } = toRefs(props)
const isExpanded = computed(() => !!(expanded.value || isPage.value))
const toggleExpanded = () => {
expanded.value = !expanded.value
}
watch(expanded, (value) => {
if (value) {
fetchConversation()
} else {
resetDisplayState()
}
})
provide('isExpanded', isExpanded)
provide('isPage', isPage)
// Component created
if (isPage.value) {
fetchConversation()
@ -280,6 +193,21 @@ export default {
} = useTreeConversationTopology(conversation, replies, focusedId)
provide('threadDisplay', threadDisplay)
const ancestorsElement = useTemplateRef('ancestors')
const {
heightChart: heightChartAncestors,
changeSuspendState: changeSuspendStateAncestors,
updateVirtualHeight: updateVirtualHeightAncestors,
} = useVirtualScrolling(currentAncestors, ancestorsElement)
const currentLevel = computed(() => [currentStatus.value])
const currentLevelElement = useTemplateRef('currentLevel')
const {
heightChart: heightChartCurrentLevel,
changeSuspendState: changeSuspendStateCurrentLevel,
updateVirtualHeight: updateVirtualHeightCurrentLevel,
} = useVirtualScrolling(currentLevel, currentLevelElement)
const treeViewIsSimple = computed(
() => !mergedConfig.value.conversationTreeAdvanced,
)
@ -296,14 +224,6 @@ export default {
() => mergedConfig.value.conversationOtherRepliesButton === 'below',
)
// # Virtual scrolling stuff
const onStatusSuspendStateChange = ({ id, suspend }) => {
changeSuspendStateLinear({ id, suspend })
}
const updateVirtualHeight = ({ id, height }) => {
updateVirtualHeightLinear({ id, height })
}
// # Scrolling
const tryScrollTo = (id) => {
if (!id) {
@ -340,7 +260,7 @@ export default {
return {
// # Misc
loadStatusError,
loadError,
mobileLayout,
// # Focus
@ -357,20 +277,28 @@ export default {
isExpanded,
toggleExpanded,
// # Virtual scrolling stuff
onStatusSuspendStateChange,
updateVirtualHeight,
// # Misc UI things
getStatusClasses,
// # Linear style stuff
isLinearView,
// ## Linear virtual scrolling
heightChartLinear,
changeSuspendStateLinear,
updateVirtualHeightLinear,
// # Tree style stuff
isTreeView,
// ## Tree virtual scrolling
heightChartAncestors,
changeSuspendStateAncestors,
updateVirtualHeightAncestors,
heightChartCurrentLevel,
changeSuspendStateCurrentLevel,
updateVirtualHeightCurrentLevel,
// ## Tree state
// ### Topology
topLevel,
@ -379,7 +307,7 @@ export default {
// ### Thread Display
showThreadRecursively,
// ## Derived values and config
// ### Derived values and config
treeViewIsSimple,
shouldShowAllConversationButton,
shouldShowAncestors,

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

@ -42,7 +42,7 @@
ref="body"
:class="{ 'panel-body': isExpanded }"
>
<p v-if="!loadStatusError">
<p v-if="!loadError">
<FAIcon
spin
icon="circle-notch"
@ -50,7 +50,7 @@
{{ $t('status.loading') }}
</p>
<p v-else>
{{ $t('status.load_error', { error: loadStatusError }) }}
{{ $t('status.load_error', { error: loadError }) }}
</p>
</div>
<div
@ -88,6 +88,7 @@
</div>
<div
v-if="shouldShowAncestors"
ref="ancestors"
class="thread-ancestors"
>
<article
@ -107,8 +108,8 @@
@goto="setFocused"
@dive="diveIntoStatus(status.id)"
@suspendable-state-change="onStatusSuspendStateChange"
@height-change="updateVirtualHeight"
@suspendable-state-change="changeSuspendStateAncestors"
@height-change="updateVirtualHeightAncestors"
/>
<div
v-if="shouldShowOtherRepliesButton && getReplies(status.id).size > 1"
@ -139,17 +140,32 @@
</div>
</article>
</div>
<ThreadTree
:status-id="currentStatus.id"
:depth="0"
<div
class="currentStatus"
ref="currentLevel"
>
<!-- Technically this will always have a single element but -->
<!-- it's more convenient for us to use a v-for here -->
<template v-for="element in heightChartCurrentLevel">
<ThreadTree
v-if="element.type === 'status'"
:status-id="currentStatus.id"
:depth="0"
@goto="setFocused"
@dive="diveIntoStatus"
@toggle-expanded="toggleExpanded"
@show-thread-recursively="showThreadRecursively"
@suspendable-state-change="onStatusSuspendStateChange"
@height-change="updateVirtualHeight"
/>
@goto="setFocused"
@dive="diveIntoStatus"
@toggle-expanded="toggleExpanded"
@show-thread-recursively="showThreadRecursively"
@suspendable-state-change="changeSuspendStateCurrentLevel"
@height-change="updateVirtualHeightCurrentLevel"
/>
<div
v-if="element.type === 'spacer'"
class="virtual-spacer"
:style="{ height: element.height + 'px' }"
/>
</template>
</div>
</div>
<div
v-else-if="isLinearView"
@ -176,8 +192,8 @@
@goto="setFocused"
@toggle-expanded="toggleExpanded"
@suspendable-state-change="onStatusSuspendStateChange"
@height-change="updateVirtualHeight"
@suspendable-state-change="changeSuspendStateLinear"
@height-change="updateVirtualHeightLinear"
/>
</article>
</div>

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

@ -15,7 +15,19 @@ const ThreadTree = {
statusId: String,
depth: Number,
},
data() {
return {
resizeObserver: new ResizeObserver(this.updateVirtualHeight),
}
},
mounted() {
this.resizeObserver.observe(this.$refs.root)
},
unmounted() {
this.resizeObserver.disconnect()
},
emits: [
'heightChange',
'suspendableStateChange',
'goto',
'dive',
@ -88,6 +100,14 @@ const ThreadTree = {
getReplies(id) {
return this.replies.get(id) ?? new Set()
},
updateVirtualHeight(e) {
const [entry] = e
this.$emit('heightChange', {
id: this.statusId,
height: entry.contentRect.height,
element: this.$refs.root,
})
},
},
}

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

@ -1,5 +1,8 @@
<template>
<article class="thread-tree">
<article
ref="root"
class="thread-tree"
>
<Status
:key="statusId"
class="conversation-status conversation-status-treeview panel-body"
@ -12,7 +15,7 @@
@dive="$emit('dive', statusId)"
@goto="$emit('goto', statusId)"
@toggle-expanded="$emit('toggleExpanded', statusId)"
@suspendable-state-change="$emit('suspendableStateChange', e)"
@suspendable-state-change="(e) => $emit('suspendableStateChange', e)"
/>
<div
v-if="currentReplies.length > 0 && threadShowing"

124
src/composables/useConversation.js Normal file
View file

@ -0,0 +1,124 @@
import { get } from 'lodash-es'
import { computed, provide, ref } from 'vue'
import { useOAuthStore } from 'src/stores/oauth.js'
import { useStatusesStore } from 'src/stores/statuses.js'
import {
fetchConversation as apiFetchConversation,
fetchStatus as apiFetchStatus,
} from 'src/api/public.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 sortById = (a, b) => {
const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id
const seqA = Number(idA)
const seqB = Number(idB)
const isSeqA = !Number.isNaN(seqA)
const isSeqB = !Number.isNaN(seqB)
if (isSeqA && isSeqB) {
return seqA < seqB ? -1 : 1
} else if (isSeqA && !isSeqB) {
return -1
} else if (!isSeqA && isSeqB) {
return 1
} else {
return idA < idB ? -1 : 1
}
}
const conversationId = computed(() => getConversationId(statusId.value))
const conversation = computed(() => {
if (!currentStatus.value) {
return []
}
if (!expanded.value) {
return [currentStatus.value]
}
const conversation = useStatusesStore().conversations.get(
conversationId.value,
)
return [...conversation.keys()]
.map((k) => useStatusesStore().allStatuses.get(k))
.filter((status) => status.type != 'repeat') // Old backend behavior?
.toSorted(sortById)
})
const replies = computed(() =>
conversation.value.reduce(
(result, { id, in_reply_to_status_id: irid }, index) => {
if (irid) {
if (!result.has(irid)) {
result.set(irid, new Set())
}
result.get(irid).add({
name: `#${index}`,
id,
})
}
return result
},
new Map(),
),
)
const getReplies = (id) => replies.value.get(id) ?? new Set()
provide('conversation', conversation)
provide('replies', replies)
const fetchConversation = async () => {
if (currentStatus.value) {
const {
data: { ancestors, descendants },
timestamp,
} = await apiFetchConversation({
id: statusId.value,
credentials: useOAuthStore().token,
})
useStatusesStore().addNewStatuses({ statuses: ancestors, timestamp })
useStatusesStore().addNewStatuses({
statuses: descendants,
timestamp,
})
} else {
try {
loadError.value = null
const { data: status } = await apiFetchStatus({
id: statusId.value,
credentials: useOAuthStore().token,
})
useStatusesStore().addNewStatuses({ statuses: [status] })
fetchConversation()
} catch (error) {
console.error(error)
loadError.value = error
}
}
}
return {
currentStatus,
conversation,
replies,
getReplies,
fetchConversation,
loadError,
}
}

22
src/composables/useVirtualScrolling.js
View file

@ -63,11 +63,11 @@ export function useVirtualScrolling(conversation, body) {
}
// Scrolling
const { y: topScrollBoundary } = useScrollPosition()
const { y: scrollY } = useScrollPosition()
const { height: windowHeight } = useWindowSize()
const realTopScrollBoundary = ref(0)
const realBottomScrollBoundary = ref(0)
const topScrollBoundary = ref(0)
const bottomScrollBoundary = ref(0)
const updateBoundaries = () => {
if (!body.value) return // Not mounted yet
@ -76,11 +76,11 @@ export function useVirtualScrolling(conversation, body) {
const distanceItemTopToWindowTop = 0 - top
const distanceItemTopToWindowBottom = windowHeight.value - top
realTopScrollBoundary.value = distanceItemTopToWindowTop
realBottomScrollBoundary.value = distanceItemTopToWindowBottom
topScrollBoundary.value = distanceItemTopToWindowTop
bottomScrollBoundary.value = distanceItemTopToWindowBottom
}
watch(windowHeight, updateBoundaries)
watch(topScrollBoundary, updateBoundaries)
watch(scrollY, updateBoundaries)
watch(totalHeight, updateBoundaries)
onMounted(updateBoundaries)
@ -113,17 +113,17 @@ export function useVirtualScrolling(conversation, body) {
const itemBottomBoundary = heightChartItem.top + heightChartItem.height
const itemTopBoundary = heightChartItem.top
const finalTopScrollBoundary = realTopScrollBoundary.value - buffer.value
const finalTopScrollBoundary = topScrollBoundary.value - buffer.value
const finalBottomScrollBoundary =
realBottomScrollBoundary.value + buffer.value
bottomScrollBoundary.value + buffer.value
// To be visible, item's bottom boundary shoud be below top scroll boundary)
const belowTopBoundary = itemBottomBoundary > finalTopScrollBoundary
const isBelowTopBoundary = itemBottomBoundary > finalTopScrollBoundary
// To be visible, item's top boundary shoud be above bottom scroll boundary)
const aboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary
const isAboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary
// This accounts for the case where item's boundaries exceed scroll boundary
heightChartItem.visible = belowTopBoundary && aboveBottomBoundary
heightChartItem.visible = isBelowTopBoundary && isAboveBottomBoundary
})
// Group invisible statuses into spacers