Display link previews beneath a message containing a link

[kevinaboos]

Most chat/messaging services display a preview of a link (or multiple links) included in a message, which makes it easier to quickly find, understand, and click links. We want to add this feature to Robrix too.

Implementation Approach

As of PR #76, this is now possible because we properly linkify plaintext URLs. This means that links will always be easily discoverable because they'll exist in a canonical HTML link format: <a href=...>Link</a>.

For the Makepad DSL components, we can add an optional LinkPreview view that can be added into the Message view, most likely by included it after the message subview here in the DSL code:

robrix/src/home/room_screen.rs

Line 213 in a5ff746

message = <HtmlOrPlaintext> { }

By default, this view would be marked as visible: false, and would only be set to visible: true if a link was found in the message text (which thanks to linkification from PR #76, should be easy to detect).

The LinkPreview view itself should consist of two subviews: an image thumbnail of the linked website, and a text summary of the linked website. The text preview should include the title, an optional subtitle, and a 2-3 line preview of the website text body.
This LinkPreview view should also be clickable (set cursor: Hand and handle click/tap events), and open the linked URL upon click, just like if the user had clicked the actual HTML URL.

The Rust crate called link-preview should be able to help us retrieve and generate the metadata from the link.

Examples

Here's what Discord shows:

Here's an example of an Element link preview:

Signal messenger shows the preview above the message, but I think showing it below the message makes more sense and is more standard