Glowup and include context on group invite landing page and unfurl

[saulmc]

• Group Invite design styling on mobile
• Troubleshoot the onXmtp and canMessage variables to display the buttons vs links to the App Store
• Group Invite design styling on desktop
• Adapt DM screen with the same styling on mobile
• Adapt DM screen with the same styling on desktop
• Update "Identity not found" screen, and "Groupe invite not found" screen
• Design and implement the og:image/frame

[darickdang]

I'm not sure if I understand the logged in/logged out states correctly but here's what I got.

We should make this look similar to how they look in the app but pop the Converse logo with the word "Converse" on the web view.

[saulmc]

@lourou would you be able to look into this Converse website request after the requests UI work is complete? I've added you to the repo

I believe the group context info is all available. If not, we can descope from the designs rather than invest in piping it through.

This should also extend to the opengraph metadata when one of these links is shared. Ideally, these links unfurl and include all of the above context information in an approximately equivalent design.

[lourou]

@saulmc sure thing, will look into this!

[lourou]

@saulmc do we want to generate on the fly and show a custom og:image containing the group icon, converse logo and group description inside the image, so that users see this when shared?

[lourou]

Hey @darickdang, I just finished implementing the group invite styling on mobile. Here's a preview on an iPhone 15 Pro screen. I also made sure it fits on iPhone SE and Mini. Do you see anything that needs to be changed?

[lourou]

@saulmc desktop implementation is done, and so are the DM screen adaptations both on mobile and desktop!

Some work left to do on the og:image

[lourou]

@saulmc I deployed on the preview subdomain for now, which hits the production backend, so this can be tested in real conditions. Feel free to test it on both mobile and desktop!

• https://preview.converse.xyz – Removed double metadata
• https://preview.converse.xyz/group-invite/eB9j_d995cuq0-zmhn6tf – Groupe invite link
• https://preview.converse.xyz/group-invite/xyz Invalid group invite link
• https://preview.converse.xyz/dm/lourou.converse.xyz – DM
• https://preview.converse.xyz/dm/lourou-notfound.converse.xyz – DM with user not found

I noticed that sharing a link containing an og:image metatag in a conversation reloads the image every second indefinitely. I am opening a separate issue for this as it is not linked to the current one.

Screenshots

Open Graph for Groups

Example og:image render: https://www.opengraph.xyz/url/https%3A%2F%2Fpreview.converse.xyz%2Fgroup-invite%2FeB9j_d995cuq0-zmhn6tf

[saulmc]

This is awesome! Really thorough and looks great.

@darickdang should anything be different in the og preview images from the website?
plug them in here: https://www.opengraph.xyz/

[lourou]

thanks @saulmc 🙌

re: the generic og:image loading loop issue inside the app, I created the issue here #716