In this episode, we focus on bringing the user mention functionality to our reply form, making it more consistent with our discussion creation experience. We already have a handy mention composable and a mentionable component from a package we’re using, so it’s straightforward to reuse these in the reply form.
First, we copy over the necessary mentionable setup from the discussion form and wrap our reply textarea with it. After importing and adding the required composable, we test it out and see that the mention search is working nicely in the reply form.
We also take a moment to tidy things up, including customizing the message for when a username isn’t found during a mention search (making it clear to users what’s happening). We learn how to provide a no-results slot in the mentionable component, so our UI doesn’t leave users confused.
Next, we tackle a quality-of-life improvement: automatically inserting the @username
into the reply box when you click reply to a specific post. This involves passing the replying user's context into the post form, watching for it, and updating the text box appropriately (without messing up user drafts or saved form state).
By the end of the episode, we have a reply form that supports mentions just like the discussion creation form, including a polished UX for no-results and auto-inserting usernames when replying to a post. This sets up a more feature-rich and user-friendly experience for everyone interacting with our discussion threads.