No OneTemporary
Actions

Size

29 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
	index 63c843057d..4eef7e2bfb 100644
	--- a/src/components/conversation/conversation.js
	+++ b/src/components/conversation/conversation.js
	@@ -1,504 +1,504 @@
	import { get } from 'lodash-es'
	import { storeToRefs } from 'pinia'
	import {
	computed,
	nextTick,
	onMounted,
	provide,
	ref,
	toRefs,
	useTemplateRef,
	watch,
	} from 'vue'
	import { useRouter } from 'vue-router'

	import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
	import QuickViewSettings from 'src/components/quick_view_settings/quick_view_settings.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	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 {
	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'
	import {
	faAngleDoubleDown,
	faAngleDoubleLeft,
	faChevronLeft,
	faReply,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faAngleDoubleDown,
	faAngleDoubleLeft,
	faChevronLeft,
	faReply,
	faTimes,
	)

	export default {
	props: {
	statusId: {
	// Main thing
	type: String,
	required: true,
	},
	isPage: {
	// Whether conversation is rendered as a standalone page
	// as opposed to embedded into a timeline
	type: Boolean,
	default: false,
	},
	virtualHidden: {
	// Whether conversation is suspended. Controls rendering of statuses
	type: Boolean,
	default: false,
	},
	},
	emits: ['update:virtualHeight'],
	components: {
	ThreadTree,
	QuickFilterSettings,
	QuickViewSettings,
	ChatMessageList,
	PostStatusForm,
	RichContent,
	},
	setup(props, ctx) {
	const { emit } = ctx
	const { statusId } = toRefs(props)

	const router = useRouter()

	// # Main Configuration
	const { mergedConfig } = storeToRefs(useMergedConfigStore())
	const { mastoUserSocketStatus } = storeToRefs(useStreamingStore())
	const displayStyle = computed(() => mergedConfig.value.conversationDisplay)
	const streamingEnabled = computed(
	() =>
	mergedConfig.value.useStreamingApi &&
	mastoUserSocketStatus === WSConnectionStatus.JOINED,
	)

	// # Misc
	const loadStatusError = ref(null)
	const { layoutType } = storeToRefs(useInterfaceStore())
	const mobileLayout = computed(() => layoutType.value === 'mobile')

	// # 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 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 status = computed(() => getStatusObject(focusedId.value))

	const fetchConversation = async () => {
	if (status.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)
	threadDisplay.value = new Map()
	}
	watch(statusId, (newVal, oldVal) => {
	const newConversationId = getConversationId(newVal)
	const oldConversationId = getConversationId(oldVal)
	if (
	newConversationId &&
	oldConversationId &&
	newConversationId === oldConversationId
	) {
	setFocused(newVal)
	} else {
	resetDisplayState()
	fetchConversation()
	}
	})

	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 (!status.value) {
	return []
	}

	if (!isExpanded.value) {
	return [status.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()
	const statusReplies = computed(() => {
	return getReplies(status.value.id)
	})

	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()
	}

	// # Virtual scrolling stuff
	const body = useTemplateRef('body')
	const virtualHeight = ref(120)
	const hiddenStyle = computed(() => ({
	- height: this.virtualHeight + 'px',
	+ height: virtualHeight.value + 'px',
	}))
	const updateVirtualHeight = () => {
	if (hide) return // no updates when not rendering
	if (!status.value) return // not loaded yet
	nextTick(() => {
	virtualHeight.value = body.value.getBoundingClientRect().height
	emit('update:virtualHeight', {
	id: status.value.id,
	height: virtualHeight.value,
	top: body.value.clientTop,
	})
	})
	}

	const unsuspendibleIds = ref(new Set())
	const suspendable = computed(() => unsuspendibleIds.value.size === 0)
	const onStatusSuspendStateChange = ({ id, suspend }) => {
	if (!suspend) {
	unsuspendibleIds.value.add(id)
	} else {
	unsuspendibleIds.value.delete(id)
	}
	}

	const { virtualHidden } = toRefs(props)
	const hide = computed(() => virtualHidden.value && suspendable.value)
	onMounted(() => {
	updateVirtualHeight()
	})

	// # Misc UI things
	const firstStatus = computed(() => conversation.value[0])
	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,
	})

	// # Linear style stuff
	const isLinearView = computed(() => displayStyle.value !== 'tree')

	// # Tree style stuff
	const isTreeView = computed(() => displayStyle.value === 'tree')

	// ## Tree state
	// ### Topology
	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(focusedId.value).reverse(),
	)
	const currentDepth = computed(() => currentAncestors.value.length)

	// ### Thread Display
	const threadDisplay = ref(new Map()) // id => 'showing' \| 'hidden'
	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())
	})
	provide('threadDisplay', threadDisplay)
	provide('threadDisplayDefault', threadDisplayDefault)

	const setThreadDisplayRecursively = (id, value) => {
	threadDisplay.value.set(id, value)
	;[...getReplies(id)]
	.map((k) => k.id)
	.map((id) => setThreadDisplayRecursively(id, value))
	}
	const showThreadRecursively = (id) => {
	setThreadDisplayRecursively(id, 'showing')
	}

	// ## Derived values and config
	const treeViewIsSimple = computed(
	() => !mergedConfig.value.conversationTreeAdvanced,
	)
	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 shouldShowAllConversationButton = computed(
	() => currentAncestors.value.length > 0 && topLevel.value.length > 1,
	)
	const shouldShowAncestors = computed(
	() => isExpanded.value && ancestors.value.get(focusedId.value) != null,
	)
	const shouldFadeAncestors = computed(
	() => mergedConfig.value.conversationTreeFadeAncestors,
	)
	const shouldShowOtherRepliesButton = computed(
	() => mergedConfig.value.conversationOtherRepliesButton === 'below',
	)

	// # Scrolling
	const tryScrollTo = (id) => {
	if (!id) {
	return
	}
	if (isPage.value) {
	router.push({ name: 'conversation', params: { statusId: id } })
	}
	// Because the conversation can be unmounted when out of sight
	// and mounted again when it comes into sight,
	// the `mounted` or `created` function in `status` should not
	// contain scrolling calls, as we do not want the page to jump
	// when we scroll with an expanded conversation.
	//
	// Now the method is to rely solely on the `focused` watcher
	// in `status` components.
	// In linear views, all statuses are rendered at all times, but
	// in tree views, it is possible that a change in active status
	// removes and adds status components (e.g. an originally child
	// status becomes an ancestor status, and thus they will be
	// different).
	// Here, let the components be rendered first, in order to trigger
	// the `focused` watcher.
	nextTick(() => {
	setFocused(id)
	})
	}
	const diveIntoStatus = (id) => {
	tryScrollTo(id)
	}
	const diveToTopLevel = () => {
	tryScrollTo(currentAncestors.value[0].id)
	}

	return {
	// # Misc
	loadStatusError,
	mobileLayout,

	// # Focus
	focused,
	setFocused,

	// # Main things
	status,
	statusReplies,
	getReplies,
	conversation,

	// # Conversation Expansion
	isPage,
	isExpanded,
	toggleExpanded,

	// # Virtual scrolling stuff
	hide,
	onStatusSuspendStateChange,
	updateVirtualHeight,
	virtualHidden,
	hiddenStyle,

	// # Misc UI things
	getStatusClasses,

	// # Linear style stuff
	isLinearView,

	// # Tree style stuff
	isTreeView,

	// ## Tree state
	// ### Topology
	topLevel,
	currentAncestors,

	// ### Thread Display
	showThreadRecursively,

	// ## Derived values and config
	treeViewIsSimple,
	shouldShowAllConversationButton,
	shouldShowAncestors,
	shouldFadeAncestors,
	shouldShowOtherRepliesButton,

	// # Scrolling
	diveToTopLevel,
	diveIntoStatus,
	}
	},
	}
	diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
	index 79b8f493b0..637c7fb82e 100644
	--- a/src/components/timeline/timeline.js
	+++ b/src/components/timeline/timeline.js
	@@ -1,233 +1,297 @@
	import { debounce, throttle } from 'lodash-es'
	import { mapState } from 'pinia'

	import Conversation from 'src/components/conversation/conversation.vue'
	import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
	import QuickViewSettings from 'src/components/quick_view_settings/quick_view_settings.vue'
	import ScrollTopButton from 'src/components/scroll_top_button/scroll_top_button.vue'
	import TimelineMenu from 'src/components/timeline_menu/timeline_menu.vue'

	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useStatusesStore } from 'src/stores/statuses.js'
	import { useTimelinesStore } from 'src/stores/timelines.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faArrowUp,
	faCheck,
	faCircleNotch,
	faCirclePlus,
	faCog,
	faMinus,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faCircleNotch, faCog, faMinus, faArrowUp, faCirclePlus, faCheck)

	const Timeline = {
	props: {
	timelineRef: Object,
	footerSlipgate: Object, // reference to an element where we should put our footer
	embedded: Boolean,
	inProfile: Boolean,
	skipPinned: Boolean,
	hideEmpty: Boolean,
	},
	data() {
	return {
	showScrollTop: false,
	paused: false,
	unfocused: false,
	+ virtualScrollIndex: 0,
	blockingClicks: false,
	}
	},
	provide() {
	return {
	profileUserId: this.inProfile && this.timelineRef.argument,
	}
	},
	components: {
	ScrollTopButton,
	Conversation,
	TimelineMenu,
	QuickFilterSettings,
	QuickViewSettings,
	},
	computed: {
	timeline() {
	return useTimelinesStore()[this.timelineRef.name]
	},
	filteredVisibleStatuses() {
	return this.timeline.order
	.filter((id) => this.timeline.visibleStatusIds.has(id))
	.map((id) => useStatusesStore().allStatuses.get(id))
	.filter(({ pinned }) => (this.skipPinned ? !pinned : true))
	},
	count() {
	return this.timeline.order.length
	},
	newStatusCount() {
	return this.timeline.newStatusCount
	},
	showLoadButton() {
	return this.timeline.newStatusCount > 0 \|\| this.timeline.reloadNeeded
	},
	loadButtonString() {
	if (this.timeline.reloadNeeded) {
	return this.$t('timeline.reload')
	} else {
	return `${this.$t('timeline.show_new')} (${this.newStatusCount})`
	}
	},
	mobileLoadButtonString() {
	if (this.timeline.reloadNeeded) {
	return '+'
	} else {
	return this.newStatusCount > 99 ? '∞' : this.newStatusCount
	}
	},
	classes() {
	let rootClasses = !this.embedded
	? ['panel', 'panel-default']
	: ['-embedded']
	if (this.blockingClicks)
	rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
	return {
	root: rootClasses,
	header: ['timeline-heading'].concat(
	!this.embedded ? ['panel-heading', '-sticky'] : ['panel-body'],
	),
	body: ['timeline-body'].concat(
	!this.embedded ? ['panel-body'] : ['panel-body'],
	),
	footer: ['timeline-footer'].concat(
	!this.embedded ? ['panel-footer'] : ['panel-body'],
	),
	}
	},
	statusesToDisplay() {
	- return new Set(this.filteredVisibleStatuses.map(({ id }) => id))
	+ if (!this.virtualScrollingEnabled) {
	+ return new Set(this.filteredVisibleStatuses.map(({ id }) => id))
	+ }
	+
	+ const amount = this.timeline.visibleStatusIds.size
	+ const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
	+ const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)
	+ const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide)
	+ return new Set(
	+ this.filteredVisibleStatuses.slice(min, max).map(({ id }) => id),
	+ )
	+ },
	+ virtualScrollingEnabled() {
	+ return useMergedConfigStore().mergedConfig.virtualScrolling
	},
	...mapState(useInterfaceStore, {
	mobileLayout: (store) => store.layoutType === 'mobile',
	}),
	},
	created() {
	this.timelineChange(this.timelineRef)
	},
	mounted() {
	if (document.hidden !== undefined) {
	document.addEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	this.unfocused = document.hidden
	}
	window.addEventListener('keydown', this.handleShortKey)
	window.addEventListener('scroll', this.handleScroll)
	+ setTimeout(this.determineVisibleStatuses, 250)
	},
	unmounted() {
	this.timelineChange(null, this.timelineRef)
	window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('keydown', this.handleShortKey)
	if (document.hidden !== undefined)
	document.removeEventListener(
	'visibilitychange',
	this.handleVisibilityChange,
	false,
	)
	},
	methods: {
	timelineChange(newTimeline, oldTimeline) {
	const sameName = newTimeline?.name === oldTimeline?.name
	const sameArgument = newTimeline?.argument === oldTimeline?.argument
	if (sameName && sameArgument) return

	if (oldTimeline) {
	useTimelinesStore().deactivate(oldTimeline.name)
	}
	if (newTimeline) {
	useTimelinesStore().activate(newTimeline.name, newTimeline.argument)
	}
	},
	stopBlockingClicks: debounce(function () {
	this.blockingClicks = false
	}, 1000),
	blockClicksTemporarily() {
	if (!this.blockingClicks) {
	this.blockingClicks = true
	}
	this.stopBlockingClicks()
	},
	handleShortKey(e) {
	// Ignore when input fields are focused
	if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
	if (e.key === '.') this.showNewStatuses()
	},
	showNewStatuses() {
	if (this.timeline.reloadNeeded) {
	useTimelinesStore().clearTimeline(this.timelineRef.name)
	this.fetchOlderStatuses()
	} else {
	this.blockClicksTemporarily()
	useTimelinesStore().showNewStatuses(this.timelineRef.name)
	this.paused = false
	}
	window.scrollTo({ top: 0 })
	},
	fetchOlderStatuses: throttle(
	function () {
	this.timeline.fetcher.fetchOlder()
	},
	1000,
	this,
	),
	+ determineVisibleStatuses() {
	+ if (!this.$refs.timeline) return
	+ if (!this.virtualScrollingEnabled) return
	+
	+ const statuses = this.$refs.timeline.children
	+ if (statuses.length === 0) return
	+ const cappedScrollIndex = Math.max(
	+ 0,
	+ Math.min(this.virtualScrollIndex, statuses.length - 1),
	+ )
	+
	+ const height = Math.max(document.body.offsetHeight, window.pageYOffset)
	+
	+ const centerOfScreen = window.pageYOffset + window.innerHeight * 0.5
	+
	+ // Start from approximating the index of some visible status by using the
	+ // the center of the screen on the timeline.
	+ let approxIndex = Math.min(
	+ Math.floor(statuses.length * (centerOfScreen / height)),
	+ statuses.length - 1,
	+ )
	+ let err = statuses[approxIndex].getBoundingClientRect().y
	+
	+ // if we have a previous scroll index that can be used, test if it's
	+ // closer than the previous approximation, use it if so
	+
	+ const virtualScrollIndexY =
	+ statuses[cappedScrollIndex].getBoundingClientRect().y
	+ if (Math.abs(err) > virtualScrollIndexY) {
	+ approxIndex = cappedScrollIndex
	+ err = virtualScrollIndexY
	+ }
	+
	+ // if the status is too far from viewport, check the next/previous ones if
	+ // they happen to be better
	+ while (err < -20 && approxIndex < statuses.length - 1) {
	+ err += statuses[approxIndex].offsetHeight
	+ approxIndex++
	+ }
	+ while (err > window.innerHeight + 100 && approxIndex > 0) {
	+ approxIndex--
	+ err -= statuses[approxIndex].offsetHeight
	+ }
	+
	+ // this status is now the center point for virtual scrolling and visible
	+ // statuses will be nearby statuses before and after it
	+ this.virtualScrollIndex = approxIndex
	+ },
	scrollLoad() {
	// TODO simplify this logic
	const bodyBRect = document.body.getBoundingClientRect()
	const height = Math.max(bodyBRect.height, -bodyBRect.y)
	if (
	!this.timeline.fetcher.loadingOlder &&
	window.innerHeight + window.pageYOffset >= height - 750
	) {
	this.fetchOlderStatuses()
	}
	},
	handleScroll: throttle(function (e) {
	+ this.determineVisibleStatuses()
	this.scrollLoad(e)
	}, 200),
	handleVisibilityChange() {
	this.unfocused = document.hidden
	},
	},
	watch: {
	timelineRef(newTimeline, oldTimeline) {
	this.timelineChange(newTimeline, oldTimeline)
	},
	newStatusCount(count) {
	if (!useMergedConfigStore().mergedConfig.streaming) {
	return
	}
	if (count > 0) {
	// only 'stream' them when you're scrolled to the top
	const doc = document.documentElement
	const top = (window.pageYOffset \|\| doc.scrollTop) - (doc.clientTop \|\| 0)
	if (
	top < 15 &&
	!this.paused &&
	!(
	this.unfocused &&
	useMergedConfigStore().mergedConfig.pauseOnUnfocused
	)
	) {
	this.showNewStatuses()
	} else {
	this.paused = true
	}
	}
	},
	},
	}

	export default Timeline
	diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
	index 7a0be1a500..905b94382f 100644
	--- a/src/components/timeline/timeline.vue
	+++ b/src/components/timeline/timeline.vue
	@@ -1,162 +1,151 @@
	<template>
	<!-- there is a brief moment during logout when old timeline gets forcibly deactivated -->
	<div v-if="timeline.fetcher" :class="['Timeline', classes.root]">
	<div
	v-if="!embedded"
	:class="classes.header"
	>
	<TimelineMenu
	v-if="!embedded"
	:timeline-name="timelineRef.name"
	/>
	<div
	v-if="timeline.fetcher.loadingNewer && !showLoadButton"
	class="loadingIndicator"
	>
	<FAIcon
	fixed-width
	icon="circle-notch"
	spin
	/>
	</div>
	<ScrollTopButton />
	<template v-if="mobileLayout">
	<div
	v-if="showLoadButton"
	class="rightside-button"
	>
	<button
	class="button-unstyled loadmore-button"
	:title="loadButtonString"
	@click.prevent="showNewStatuses"
	>
	<FAIcon
	fixed-width
	icon="circle-plus"
	/>
	<div class="badge -counter">
	{{ mobileLoadButtonString }}
	</div>
	</button>
	</div>
	<div
	v-else-if="!timeline.fetcher.loadingNewer"
	class="loadmore-text faint veryfaint rightside-icon"
	:title="$t('timeline.up_to_date')"
	:aria-disabled="true"
	@click.prevent
	>
	<FAIcon
	fixed-width
	icon="check"
	/>
	</div>
	</template>
	<template v-else>
	<button
	v-if="showLoadButton"
	class="button-default loadmore-button"
	@click.prevent="showNewStatuses"
	>
	{{ loadButtonString }}
	</button>
	<div
	v-else
	class="loadmore-text faint"
	@click.prevent
	>
	{{ $t('timeline.up_to_date') }}
	</div>
	</template>
	<QuickFilterSettings
	v-if="!mobileLayout"
	class="rightside-button"
	/>
	<QuickViewSettings
	class="rightside-button"
	/>
	</div>
	<div :class="classes.body">
	- <DynamicScroller
	+ <div
	class="timeline"
	ref="timeline"
	- :min-item-size="15"
	- :buffer="120"
	- :items="filteredVisibleStatuses"
	- flow-mode
	- page-mode
	role="feed"
	>
	- <template #default="{ item: status, active }">
	- <DynamicScrollerItem
	- :item="status"
	- :active="active"
	- >
	- <Conversation
	- :key="status.id"
	- role="listitem"
	- :status-id="status.id"
	- collapsable
	- />
	- </DynamicScrollerItem>
	- </template>
	- </DynamicScroller>
	+ <Conversation
	+ v-for="status in filteredVisibleStatuses"
	+ :key="status.id"
	+ :status-id="status.id"
	+ :virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.has(status.id)"
	+ role="listitem"
	+ />
	+ </div>
	<template v-if="!hideEmpty && count === 0">
	<div
	v-if="timeline.fetcher.loadingNewer \|\| timeline.fetcher.loadingOlder"
	class="timeline-placeholder"
	>
	<FAIcon
	icon="circle-notch"
	spin
	size="4x"
	/>
	</div>
	<div
	v-else
	class="timeline-placeholder faint"
	>
	{{ $t('timeline.no_statuses') }}
	</div>
	</template>
	</div>
	<div v-if="!embedded \|\| footerSlipgate" :class="classes.footer">
	<teleport
	:to="footerSlipgate"
	:disabled="!embedded \|\| !footerSlipgate"
	>
	<div
	v-if="timeline.fetcher.bottomedOut"
	class="new-status-notification text-center faint"
	>
	{{ $t('timeline.no_more_statuses') }}
	</div>
	<div
	v-else-if="timeline.fetcher.loadingOlder"
	class="new-status-notification text-center"
	>
	<FAIcon
	icon="circle-notch"
	spin
	size="lg"
	/>
	</div>
	<button
	v-else-if="timeline.minId !== ''"
	class="button-unstyled -link"
	@click.prevent="fetchOlderStatuses()"
	>
	<div class="new-status-notification text-center">
	{{ $t('timeline.load_older') }}
	</div>
	</button>
	</teleport>
	<!-- spacer to avoid having empty shrug -->
	<span v-if="embedded && footerSlipgate" />
	</div>
	</div>
	</template>

	<script src="./timeline.js"></script>

	<style src="./timeline.scss" lang="scss"> </style>

File Metadata

Mime Type: text/x-diff
Expires: Sat, Sep 19, 10:04 AM (1 d, 22 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1768306
Default Alt Text: (29 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions