Messages: Visuals

[jaydenpersonnat]

Resources
Figma
Fuse.js
Supabase

Description
With messaging in the works, we can begin to implement some of the visuals associated with the messaging interface.

• Implement the MessagePreview component as seen on Figma
  • Some props you might want to include are the name of the correspondent, the last message sent in the conversation, and a timestamp for that last message.
• Implement the list component containing MessagePreviews and allow for searching on a name basis. (Fuzzy search might be a good option here with something like Fuse.js
• You can also begin to implement visuals associated with messages themselves -- such as the messaging window, input, and send button seen on Figma.

While messaging is still being worked on, you'll want to be sure to test your implementations with sample data you create. You can find the table that stores messages on Supabase and use that to get an idea of what information will be available to you once messaging functionality is completed.