Scroll to the start of the given day

[MadLittleMods]

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.

Scratch code

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');
});

[MadLittleMods]

It's unclear if we actually want to do this. We kinda assume you will start from the bottom of the range from date/time specified in the URL.

It probably does make sense to have sticky date headers regardless though.

[bkil]

Related: #238 #124

[MadLittleMods]

Closing as Hydrogen has sticky date headers now which we're now using after #189

And as mentioned above, we assume you will start from the bottom of the range from date/time specified in the URL.