- {{ $t('status.thread_follow', { numStatus: totalReplyCount[statusId] }, totalReplyCount[statusId]) }}
+ {{ $t('status.thread_follow', { numStatus: totalReplyCount[status.id] }, totalReplyCount[status.id]) }}
@@ -69,7 +74,7 @@
- {{ $t('status.thread_show_full', { numStatus: totalReplyCount[statusId], depth: totalReplyDepth[statusId] }, totalReplyCount[statusId]) }}
+ {{ $t('status.thread_show_full', { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }, totalReplyCount[status.id]) }}
diff --git a/src/composables/useConversation.js b/src/composables/useConversation.js
new file mode 100644
index 000000000..989e12c61
--- /dev/null
+++ b/src/composables/useConversation.js
@@ -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,
+ }
+}
diff --git a/src/composables/useScrollPosition.js b/src/composables/useScrollPosition.js
new file mode 100644
index 000000000..662a9d355
--- /dev/null
+++ b/src/composables/useScrollPosition.js
@@ -0,0 +1,34 @@
+import { onMounted, onUnmounted, ref, nextTick } from 'vue'
+
+export function useScrollPosition() {
+ const x = ref(0)
+ const y = ref(0)
+ const inProgress = ref(false)
+
+ const update = (e) => {
+ x.value = window.scrollX
+ y.value = window.scrollY
+ }
+
+ onMounted(() => {
+ window.addEventListener('scroll', update)
+ update()
+ })
+ onUnmounted(() => {
+ window.removeEventListener('scroll', update)
+ })
+
+ const scrollBy = async (x1, y1, options) => {
+ inProgress.value = true
+ await window.scrollBy(x1, y1, options)
+ inProgress.value = false
+ }
+
+ const scrollIntoView = async (element, options) => {
+ inProgress.value = true
+ await element.scrollIntoView(options)
+ inProgress.value = false
+ }
+
+ return { x, y, scrollBy, scrollIntoView, inProgress }
+}
diff --git a/src/composables/useTreeConversationTopology.js b/src/composables/useTreeConversationTopology.js
new file mode 100644
index 000000000..b2ce7e23d
--- /dev/null
+++ b/src/composables/useTreeConversationTopology.js
@@ -0,0 +1,111 @@
+import { storeToRefs } from 'pinia'
+import { computed, ref } from 'vue'
+
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useStatusesStore } from 'src/stores/statuses.js'
+
+export function useTreeConversationTopology(conversation, replies, current) {
+ const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
+ const getReplies = (id) => replies.value.get(id) ?? new Set()
+
+ const { mergedConfig } = storeToRefs(useMergedConfigStore())
+
+ const maxDepthToShowByDefault = computed(() => {
+ // maxDepthInThread = max number of depths that is *visible*
+ // since our depth starts with 0 and "showing" means "showing children"
+ // there is a -2 here
+ const maxDepth = mergedConfig.value.maxDepthInThread - 2
+ return Math.min(1, maxDepth)
+ })
+
+ const ancestors = computed(() => {
+ // First we fill map with empty sets and add given id's parent
+ // as set's only element (if any)
+ const parentMap = conversation.value.reduce(
+ (result, { id, in_reply_to_status_id: irid }) => {
+ if (!result.has(id)) {
+ result.set(id, new Set())
+ }
+ if (irid) {
+ // Setting parent for current item
+ result.get(id).add(irid)
+ }
+ return result
+ },
+ new Map(),
+ )
+
+ // Next we iterate over each entry and fill the whole ancestry chain
+ parentMap.entries().forEach(([originId, originSet]) => {
+ let current = originSet.values().next().value
+ while (current) {
+ originSet.add(current)
+
+ const parent = parentMap.get(current) ?? new Set()
+
+ current = parent.values().next().value
+ }
+ })
+ return parentMap
+ })
+ const topLevel = computed(() =>
+ [...ancestors.value.entries()]
+ .filter(([id, ancestors]) => ancestors.size === 0)
+ .map(([id]) => getStatusObject(id)),
+ )
+ const getAncestorIds = (id) => ancestors.value.get(id) ?? new Set()
+ const getAncestors = (id) =>
+ [...getAncestorIds(id)].map(getStatusObject).filter(Boolean)
+ const currentAncestors = computed(() => getAncestors(current.value).reverse())
+ const currentDepth = computed(() => currentAncestors.value.length)
+
+ // Thread Display, for collapsing/expanding tree branches
+ // Map of id => 'showing' | 'hidden'
+ const threadDisplayOverride = ref(new Map())
+ const threadDisplayDefault = computed(() => {
+ return conversation.value.reduce((map, status) => {
+ const { id } = status
+ const depth = ancestors.value.get(id).size
+
+ const state = (() => {
+ if (depth - currentDepth.value <= maxDepthToShowByDefault.value) {
+ return 'showing'
+ } else {
+ return 'hidden'
+ }
+ })()
+
+ map.set(id, state)
+ return map
+ }, new Map())
+ })
+ const threadDisplay = computed(() => {
+ return new Map(
+ [...threadDisplayDefault.value.entries()].map(([k, v]) => [
+ k,
+ threadDisplayOverride.value.get(k) ?? threadDisplayDefault.value.get(k),
+ ]),
+ )
+ })
+
+ const setThreadDisplayRecursively = (id, value) => {
+ threadDisplayOverride.value.set(id, value)
+ ;[...getReplies(id)]
+ .map((k) => k.id)
+ .map((id) => setThreadDisplayRecursively(id, value))
+ }
+ const showThreadRecursively = (id) => {
+ setThreadDisplayRecursively(id, 'showing')
+ }
+ const resetThreadDisplay = () => {
+ threadDisplayOverride.value = new Map()
+ }
+
+ return {
+ topLevel,
+ currentAncestors,
+ threadDisplay,
+ showThreadRecursively,
+ resetThreadDisplay,
+ }
+}
diff --git a/src/composables/useVirtualScrolling.js b/src/composables/useVirtualScrolling.js
new file mode 100644
index 000000000..1568b0a41
--- /dev/null
+++ b/src/composables/useVirtualScrolling.js
@@ -0,0 +1,215 @@
+import { storeToRefs } from 'pinia'
+import { computed, ref, watch, nextTick, toValue } from 'vue'
+
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useStatusesStore } from 'src/stores/statuses.js'
+
+import { useWindowSize } from 'src/composables/useWindowSize.js'
+
+export function useVirtualScrolling(
+ conversation,
+ body,
+ scrollPosition,
+ scrollCompensation,
+ anchorStatus,
+) {
+ const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
+
+ const { mergedConfig } = storeToRefs(useMergedConfigStore())
+ const anchor = computed(() => anchorStatus?.value.id)
+
+ const unsuspendibleIds = ref(new Set())
+ const changeSuspendState = ({ id, suspend }) => {
+ if (!suspend) {
+ unsuspendibleIds.value.add(id)
+ } else {
+ unsuspendibleIds.value.delete(id)
+ }
+ }
+
+ // Getting the actual font size in pixels since UI might have
+ // a different scale
+ const fontSizeSetting = computed(() => mergedConfig.value.textSize)
+ const fontSize = ref(0)
+ const updateFontSize = () => {
+ const string = window
+ .getComputedStyle(document.body)
+ .getPropertyValue('font-size')
+ fontSize.value = Number.parseInt(string.slice(0, -2), 10) // remove the 'px'
+ }
+ // Update font size if user changed UI scale
+ watch(fontSizeSetting, updateFontSize, { immediate: true })
+
+ // Placeholder heights.
+ const mutedStatusHeight = computed(() => {
+ return fontSize.value * 1.5
+ })
+ const normalStatusHeight = computed(() => {
+ return fontSize.value * 10
+ })
+
+ // Add buffer zone to boundary, equal to approx 3 statuses heights
+ const buffer = computed(() => normalStatusHeight.value * 3)
+
+ // Heights map.
+ const heights = ref(new Map())
+ const totalHeight = computed(() =>
+ conversation.value.reduce((acc, item) => {
+ if (heights.value.has(item.id)) {
+ return acc + heights.value.get(item.id)
+ } else if (item.muted) {
+ return acc + mutedStatusHeight.value
+ } else {
+ return acc + normalStatusHeight.value
+ }
+ }, 0),
+ )
+ const updateVirtualHeight = ({ id, height }) => {
+ heights.value.set(id, height)
+ }
+
+ // Scrolling
+ const { y: scrollY, inProgress: scrollInProgress, scrollBy } = scrollPosition
+ const { height: windowHeight } = useWindowSize()
+
+ const topScrollBoundary = ref(0)
+ const bottomScrollBoundary = ref(0)
+ const updateBoundaries = () => {
+ if (!body.value) return // Not mounted yet
+
+ const { top } = body.value.getBoundingClientRect()
+
+ const distanceItemTopToWindowTop = 0 - top
+ const distanceItemTopToWindowBottom = windowHeight.value - top
+
+ topScrollBoundary.value = distanceItemTopToWindowTop
+ bottomScrollBoundary.value = distanceItemTopToWindowBottom
+ }
+ const windowWatcher = watch(windowHeight, updateBoundaries)
+ const scrollWatcher = watch(scrollY, updateBoundaries)
+ const heightWatcher = watch(totalHeight, updateBoundaries)
+ const bodyWatcher = watch(body, updateBoundaries)
+ const pauseWatchers = () => {
+ windowWatcher.pause()
+ scrollWatcher.pause()
+ heightWatcher.pause()
+ bodyWatcher.pause()
+ }
+ const resumeWatchers = () => {
+ windowWatcher.resume()
+ scrollWatcher.resume()
+ heightWatcher.resume()
+ bodyWatcher.resume()
+ }
+
+ const heightChart = computed(() => {
+ // Map every height and suspendable state
+ const chart = conversation.value.map(({ id }) => {
+ const status = getStatusObject(id)
+ const height =
+ (() => {
+ if (heights.value.has(id)) {
+ return heights.value.get(id)
+ } else if (status?.muted) {
+ return mutedStatusHeight.value
+ } else {
+ return normalStatusHeight.value
+ }
+ })() + 1 //including border
+ const suspendable = !unsuspendibleIds.value.has(id)
+ return { id, height, suspendable, status }
+ })
+
+ // Walk over the list to set top offsets
+ chart.reduce((sum, item) => {
+ item.top = sum
+ return sum + item.height
+ }, 0)
+
+ return chart
+ })
+
+ watch(heightChart, async (newVal, oldVal) => {
+ if (!toValue(scrollCompensation)) return
+ if (scrollInProgress.value) return
+ pauseWatchers()
+ const getAnchoredEl = (list) => anchor.value
+ ? list.find(({ id }) => id === anchor.value)
+ : list[list.length - 1]
+ const oldElement = getAnchoredEl(oldVal)
+ const newElement = getAnchoredEl(newVal)
+ const oldOffset = oldElement?.top ?? 0
+ const newOffset = newElement?.top ?? 0
+
+ const diff = newOffset - oldOffset // Positive = down, Negative = up
+
+ if (diff !== 0) {
+ topScrollBoundary.value += diff
+ bottomScrollBoundary.value += diff
+ scrollBy(0, diff)
+ }
+
+ updateBoundaries()
+ resumeWatchers()
+ })
+
+ const heightChartGrouped = computed(() => {
+ // Determine visibility state
+ const chart = heightChart.value.map((heightChartItem) => {
+ const itemBottomBoundary = heightChartItem.top + heightChartItem.height
+ const itemTopBoundary = heightChartItem.top
+
+ const finalTopScrollBoundary = topScrollBoundary.value - buffer.value
+ const finalBottomScrollBoundary =
+ bottomScrollBoundary.value + buffer.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
+
+ return { ...heightChartItem, visible: isBelowTopBoundary && isAboveBottomBoundary }
+ })
+
+ // Group invisible statuses into spacers
+ return chart.reduce((acc, heightChartItem) => {
+ const { suspendable, visible, height, top, bottom, id, status } =
+ heightChartItem
+ const present = visible || !suspendable
+ if (present) {
+ return [...acc, { type: 'status', height, top, bottom, id, status }]
+ } else {
+ const previousItem = acc[acc.length - 1]
+ const spacer =
+ previousItem?.type === 'spacer'
+ ? previousItem
+ : {
+ type: 'spacer',
+ top: Number.POSITIVE_INFINITY,
+ bottom: Number.POSITIVE_INFINITY,
+ height: 0,
+ ids: new Set(),
+ }
+
+ spacer.ids.add(id)
+ spacer.id = [...spacer.ids].join()
+ spacer.height += height
+ if (top < spacer.top) spacer.top = top
+ if (bottom < spacer.bottom) spacer.bottom = bottom
+
+ if (previousItem?.type === 'spacer') {
+ return acc
+ } else {
+ return [...acc, spacer]
+ }
+ }
+ }, [])
+ })
+
+ return {
+ heightChart: heightChartGrouped,
+ changeSuspendState,
+ updateVirtualHeight,
+ }
+}
diff --git a/src/components/conversation/useWindowSize.js b/src/composables/useWindowSize.js
similarity index 100%
rename from src/components/conversation/useWindowSize.js
rename to src/composables/useWindowSize.js