diff --git a/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html b/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html index 2aa7d7a2..0e3046fd 100644 --- a/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html +++ b/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html @@ -4,7 +4,6 @@ :key :index :length - :scrollToThisItem :intersectionObserver :isIntersecting :isCached diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html index 1afb5177..42c83ac4 100644 --- a/routes/_components/timeline/Timeline.html +++ b/routes/_components/timeline/Timeline.html @@ -37,7 +37,7 @@ items="{{$timelineItemIds}}" shown="{{$initialized}}" on:initializedVisibleItems="initialize()" - scrollToItem="{{timelineValue}}" + scrollToItem="{{scrollToItem}}" realm="{{$currentInstance + '/' + timeline}}" /> {{/if}} @@ -115,9 +115,17 @@ timelineValue: (timeline) => { return timeline.split('/').slice(-1)[0] }, - // for threads, it's simpler to just render all items due to need to scroll to the right item - // TODO: this can be optimized to use a virtual list - virtual: (timelineType) => timelineType !=='status' + // for threads, it's simpler to just render all items as a pseudo-virtual list + // due to need to scroll to the right item and thus calculate all item heights up-front + virtual: (timelineType) => timelineType !=='status', + scrollToItem: (timelineType, timelineValue, $firstTimelineItemId) => { + // Scroll to the first item if this is a "status in own thread" timeline. + // Don't scroll to the first item because it obscures the "back" button. + return timelineType === 'status' + && $firstTimelineItemId + && timelineValue !== $firstTimelineItemId + && timelineValue + } }, store: () => store, components: { diff --git a/routes/_store/timelineComputations.js b/routes/_store/timelineComputations.js index dd332fb8..a4c9e641 100644 --- a/routes/_store/timelineComputations.js +++ b/routes/_store/timelineComputations.js @@ -16,5 +16,6 @@ export function timelineComputations (store) { computeForTimeline(store, 'lastFocusedElementSelector') computeForTimeline(store, 'ignoreBlurEvents') + store.compute('firstTimelineItemId', ['timelineItemIds'], (timelineItemIds) => timelineItemIds && timelineItemIds.length && timelineItemIds[0]) store.compute('lastTimelineItemId', ['timelineItemIds'], (timelineItemIds) => timelineItemIds && timelineItemIds.length && timelineItemIds[timelineItemIds.length - 1]) }