In this episode, we're focusing on displaying who the participants are in each discussion at a glance, just like those overlapping user avatars you see in modern forums.
First, we talk about why it's important not to simply list every single user from every post (otherwise, active users would show up multiple times). Instead, we set up a relationship in our Discussion model to get a unique list of all the users who've posted—no duplicates.
We also tweak our seed data to add a few more users and create posts by different people so we have something realistic to test with. Then, we set up a participants relationship on the Discussion model using a hasManyThrough relationship filtered by distinct to ensure each participant only appears once.
Once the data’s ready, we build a component to visually render the user avatars. We style them with Tailwind so the images overlap slightly and add a little white ring around each one for clarity. As a nice touch, we make the first user's avatar a bit bigger to highlight the person who started the discussion and add a tooltip showing usernames on hover.
Finally, we cover a small layout tweak—making sure the avatars don't get squished by long discussion text by using flex-shrink-0.
By the end, you'll have a clean, functional participant display that you can reuse anywhere you want in your app!