Following up with the UX problems mentioned in #71, we should page-load the scroll position to the start of the day so the date header is just in view at the top.

Here is a mock-up using Element:

Currently, the page is always scrolled to the very bottom.

Blockers

• Wait for date headers in Hydrogen, Add date headers in timeline element-hq/hydrogen-web#764
• It would be nice to have Load messages after the given day #72 so that we could be scrolled to the top of the date regardless of how many messages are in that day (fill up the scroller with content)

UX considerations

1. What happens when there are no messages for the given day?
   • Any empty placeholder shown?
   • How does scroll work?
2. What happens when there isn't enough messages to fill up the viewport?
   • Any scroll position problems, we could solve by loading events after the given day, see Load messages after the given day #72

Dev notes

It would be nice to have this functionality built-in to Hydrogen. Although permalinks to jump to a specific message aren't supported in Hydrogen and even if they did, they probably want to scroll the event to the middle of the view instead of at the top like we would.

scrollToEventId(rootElement, eventId, scrollIntoViewOptions) {
  const scrollRoot = rootElement.querySelector('.Timeline_scroller');

  const elementToScrollTo = scrollRoot.querySelector(
    `:scope > ul > [data-event-id="${eventId}"]`
  );
  console.log('elementToScrollTo', elementToScrollTo);
  elementToScrollTo?.scrollIntoView(
    scrollIntoViewOptions || {
      block: 'start',
      inline: 'nearest',
    }
  );
}

requestAnimationFrame(() => {
  this.scrollToEventId(rootElement, '$MRQON0wYqnapzYsa9XmAaxgB5qxvhLCC4Gd0ZuSSdpI');
});