In this episode, we take our filters to the next level by making it clear to users which filter is currently active—super useful for navigation! First up, we work on adding some styling to highlight the active filter by passing down the current query through our components. That way, each filter button can check the query and add a class if it's the one being used. We also tackle the little issues that come up, like making sure we don't get errors when the query doesn't exist, and always highlighting "All Discussions" when that's the selected filter.
Once the highlighting is looking good, we shift gears to see how filters play with pagination. We notice a bug where switching pages loses the active filter, so we update our pagination links to carry over the current filter in the query string—just like you'd do in Blade with append
. This keeps everything in sync: you can change filters, paginate, and the right filter stays highlighted the whole time.
By the end of the episode, our filter navigation is more user-friendly and works smoothly with pagination, letting users easily see what they're viewing and keep browsing without losing their place or forgetting which filter they have on.