In this lesson, we're going to improve the user experience around searching for trips by allowing the user to trigger a filters sheet and even give them the ability, if no search results appear, to clear out all the filters.

So, the first thing for us to do is to add this icon here, which is going to launch the sheet that is housing our filters. So, I'm going to add that as a trailing button in our app bar here. And as you might guess, it'll be an icon. The one that I'm looking for here is sliders horizontal.

As a reminder, you can always go to the website of the icon library that you're using and type in some keyword that relates to the icon that you want to use. In Phosphor's case, there's a few that we could choose from here. I just think this sliders horizontal works best in our application. I'm going to change the color here to black.

Now, what I'm also going to do here right away is I'm going to add a background color. We'll just set this to our background color style here. And then add a bunch of roundness. With our icon size locked at 24, I'm going to add a fixed width and a fixed height for our icon here. I'm going to add 44 for both.

This is a general best practice for clickable elements like this: make them at least 44 pixels high and 44 pixels wide, which gives your users enough surface area to reliably tap on it. If you go smaller than this, there's a greater chance that they're going to miss when they try to hit the icon or button, leading to frustration.

Apple recommends 44 pixels. Google actually recommends 48 pixels, but as long as you're around that 44-pixel size, you should be okay.

Now that we've got our filters button set up, I want to add a sheet which is going to house all of the filters. This can be our sheet filters. Looking at our reference design here, we've got what looks like a few elements here within a row.

I'm going to start by adding a group to the top here, which we can just call group top. In it, I'm going to have a button which is going to clear all of the filters out. I'm going to set this to be a link light primary.

I actually don't want this to be orange. I want it to be dark like this. So, what I might do is detach this and create a new style that I know I'm probably going to use in other places. This can be link light secondary, in contrast to the link light primary, which uses our primary color.

The secondary here corresponds to using it for not-primary actions on the page, like in our reference design. The primary action has our primary color (orange) because we want it to stand out. This is just a secondary action. It's not as important.

Therefore, we can use a color like that black that is deemphasized relative to the primary.

That's going to be our clear button. As before, you can see that the minimum height by default here is 44 pixels, which is good from the perspective of being clickable. I'm going to fit the width to the content as well. When I do that, you can see that when I hover over the button, it's only 44 pixels across. I could give it a fixed width here, but I think I'll actually go a little larger and just expand the width by adding some padding to this button.

Next, we'll add a text element. Make sure that our group top here is not a column but a row. Our text element is just going to say filters to give context as to what the user is expected to do in this sheet. I'll give it heading six.

Then I'll add a button as well. I'm going to set this again to the style we just created so that the icon appears dark. When we created the style, we didn't set the icon color. On the fly, I can edit the style and set the icon color to be the same as the font color. This means that if I choose an icon like the X icon (to close the sheet), things will work accordingly.

I'll give this a fixed width of 44 pixels. We need to spread all of these elements out. Set the container alignment to space between. This pushes the first and last elements (button clear and button close) to the far edges of the container. Anything in between, like the text, hovers in the middle.

One problem: the middle text element is slightly offset from the center because our button clear is a different size from our button close.

One way to solve this is to put the button close inside another group (row or column doesn't matter). Set the width of this group to be the same as the clear button (73 pixels). Now the filters heading is actually centered because both elements on either side (button clear and new group) are the same width.

Inside this group, make sure the icon sits on the right-hand side. Now our filter sheet looks like it's working.

Some of you might ask: why use a button for this icon and not just an icon element? The reason is that with a button, we can control the icon size and the element size independently. With an icon element, the visible icon expands to fit the element size, which is less flexible.

Let's hook up the close button. Add a workflow to hide the sheet: hide element → sheet filters. Add the inverse action on our trailing button to show sheet filters. Test this: click the filters button to bring up the sheet, then click the close icon to close it.

We can make small adjustments: decrease the size between the top row and the top of the sheet, increase the icon size to 32 for visibility. Align the icon with the content underneath by adding margin. Move the top group slightly with negative margin.

Next, add the selectable list for the trip filter inside the sheet. Place it below the top bar. The vertical list data source remains connected to the selectable list output. Selecting items here immediately updates the content underneath. Set fit height to content for the sheet.

Add logic: when a list item is selected, hide the sheet. Workflow: on item tapped → hide sheet.

Improve UX by connecting the clear button to reset the selectable list. Set the selectable list to empty. With ignore empty constraints on, all trips are returned again. Workflow: clear button tapped → unselect all on the selectable list → hide sheet.

Test: select family and friends → tap clear → all trips reappear. Sign up as a new user → see message: "You haven't added any trips yet."

Next, amend the empty state logic. When a selectable list filter is applied and the list of trips is empty, show a "no search results" group. Combine two conditions: count of trips < 1 AND selectable list selected choice is not empty. Set visibility of this element, not visible on page load.

For the regular empty state group, condition: selectable list selected choice is empty → user hasn’t created any trips yet. Hook up the clear filters button to reset the selectable list. Test: select station filter → see message → clear filters → see all trips.

In the next lesson, we’ll tweak the search logic so a user can add more than one search constraint or filter, which will be applied once they hit the apply filters button.