better chat implementation

[n1ru4l]

This is a great task for working with Relay and GraphQL.

The scope of this issue is to add proper history navigation on the frontend when scrolling up in the chat. The chat connection has currently no pagination.

Backend Changes

The first part of this issue is the implementation of the pagination on the backend.

We already have a working implementation of a paginated connection in the notes module that can be used as a reference.

https://github.com/dungeon-revealer/dungeon-revealer/blob/master/server/graphql/modules/notes.ts

Here is the current chat connection implementation that must be altered:

https://github.com/dungeon-revealer/dungeon-revealer/blob/eaa3eb58162570423ab7ec407f3b4c2f073e8b67/server/graphql/modules/dice-roller-chat/dice-roller-chat.ts#L324-L336

Relevant Documentation:

• https://github.com/sikanhe/gqtx
• https://relay.dev/graphql/connections.htm#sec-Arguments

Frontend Changes

After the pagination is implemented on the backend we can change the frontend to fetch previous connection items when scrolling to the top of the paginated list. Relay has a pagination container API for this.

Relevant code:

https://github.com/dungeon-revealer/dungeon-revealer/blob/9804f015e2949c06496423f679ba1aabf3cf9f32/src/chat/chat-messages.tsx#L65-L77

Relevant Documentation:

• https://relay.dev/docs/en/pagination-container

BONUS

Garbage collects old connection items that are not in the viewport.

We don't need to keep 200000 items history when the chat is displaying the most recent results. This change requires some cache updating wizardry when receiving new chat messages from the backend. E.g. only keep the last 100 entries.

The logic for adding new chat edges to the chat connection on the frontend can be found here: https://github.com/dungeon-revealer/dungeon-revealer/blob/e320684524daec275e200dc342e05e2c008f0fb0/src/chat/chat.tsx#L178-L205

[n1ru4l]

I also noticed that sometimes the content is stuck.