Show surrounding messages for a full screen of content

[MadLittleMods]

PR changes

1. Full screen of content

Add surrounding messages to the given messages so we have a full screen of content to make it feel lively even in quiet rooms

As you scroll around the timeline across different days, the date changes in the URL, calendar, etc

2. Day summary item and jump to next activity

Add summary item to the bottom of the timeline that explains if we couldn't find any messages in the specific day requested

No events on day	No events at all

Also allows you to the jump to the next activity in the room. Adds /:roomId/jump?ts=xxx&dir=[f|b] to facilitate this.

Part of #46

3. Add developer options modal

Add developer options modal which is linked from the bottom of the right-panel
- Adds an option so you can debug the IntersectionObserver and how it's selecting the active day from the top-edge of the scroll viewport.

• In the future, this will also include a nice little visualization of the backend timing traces

UX problems

One person's link will not look like the other once they start scrolling

Because we change the URL as you scroll around. Someone may link a page expecting all the same messages to be there but it will actually only be the current day they're scrolled to plus whatever is above it.

This would be mediated if we could also show messages after the selected day, but we can't (see the next point).

Update: This behavior was reverted in #115

We can't show messages after the selected day

With /messages, we can only pick an event and paginate backwards because paginating forwards does not work properly with /backfill. And /context doesn't /backfill at all.

Because we can't get messages after the selected day, if the day doesn't have enough messages to fill up the screen, the URL will immediately change to a day before and there is no way to scroll low enough to select the day again except for the calendar.

This is now tracked separately as #72

Scroll to the start of the day

Currently, the timeline always scrolls to the bottom on page-load but it would be nice to be scrolled to the beginning of the day. This is tracked by #73

Dev notes

IntersectionObserver notes

• https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver

Only showing intersections on the top edge:

• https://stackoverflow.com/a/54874286/796832
• https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/#aa-creating-a-position-sticky-event

---

The gif shows off how scrolling around changes the calendar day. Also shows off how we're using an IntersectionObserver to select the active day at the top edge of the scroll root:

Scroll to event

A little change to avoid extra resizes messing with the scroll position,

Hydrogen src/platform/web/ui/session/room/TimelineView.ts#L94-L99

if (typeof ResizeObserver === "function") {
   let inititialResize = true;
   this.resizeObserver = new ResizeObserver((entries) => {
       console.log('resizeObserver', inititialResize, entries);
       // The `ResizeObserver` is invoked when initialized but we
       // already do the initial `restoreScrollPosition` in the
       // `requestAnimationFrame(...)` above so we can ignore this
       // extra call.
       //
       // Note: There can still be layout shifts from the webfonts
       // loading in.
       if(!inititialResize) {
           this.restoreScrollPosition();
       }
       inititialResize = false;
   });
   this.resizeObserver.observe(root);
}

nconf config reset

Seems to work as expected but I am not sure how it works. How does nconf know when to "snapshot" some state and reset back to it? There isn't any documentation on reset and the code isn't illuminating.

console.log('Num config keys at start', Object.keys(config.get()).length);
console.log('config', config.get('archiveMessageLimit'));

config.set('archiveMessageLimit', 9999);
console.log('config', config.get('archiveMessageLimit'));

config.reset();

console.log('config', config.get('archiveMessageLimit'));
console.log('Num config keys at end', Object.keys(config.get()).length);

Num config keys at start 125
config 500
config 9999
config 500
Num config keys at end 125

---

Related issues:

• reset doesn't reset? indexzero/nconf#93 (comment)
• How to reload config file indexzero/nconf#145

Todo

• Start the scroll at the beginning of a day
  • Opting for the simple solution of leaving it as-is (scroll to the bottom)
  • Tracking this nicety in Scroll to the start of the given day #73
• Optional for this PR: Add date headers to Hydrogen
  • Add date headers in timeline element-hq/hydrogen-web#764
• Even though we return events outside of the day, check to make sure we don't have too many events from the active day to determine whether we need to redirect to hour segments
• Add a way to toggle developer settings on like the IntersectionObserver highlight debugging styles
  • Can also include the tracing span timing in here
• Make sure opening a lightbox, will change the URL for the day with the lightbox so the link still brings you to the lightbox in question when you open it later
• Make sure the message in the disabled composer, "You're viewing an archive of events from 2022-02-08", gets updated as you scroll around
• Add placeholder when there are no events for the active day. Otherwise, it's weird to navigate to a specific day, only see events from a previous day and have the active day changed based on the scroll of other events (you question whether you went to the right place or if the archive messed up)
  • Maybe this could also solve when there aren't enough events for a given day of scroll
• Add tests for different day summary scenarios
• Add tests for day with too many messages
• Add tests for too many messages but they are from surrounding days so it's ok
• Update hydrogen-view-sdk again with latest scratch changes
  • Show surrounding messages for a full screen of content #71 (comment)