Add ability to hide forms trash

[matthew-white]

@yanokwa brought up the idea of hiding the forms trash so that the page appears less messy. From Slack:

One solution could be adding a ▶️ so you can toggle it open and closed. Should probably default to closed since we can’t easily persist views?

I've filed #689 about saving user preferences. Whether the trash is shown or not could be one of those preferences.

[matthew-white]

@getodk/testers, this issue is now ready to be verified. It is available on the staging server. There is a new button at the top of the form trash section to show or hide the trash. The trash is shown by default. The choice/preference to show or hide the trash is saved on the backend. For example, if you hide the trash, then you refresh the page or open the page in a new tab, you should see that the trash is still hidden. Hiding the trash in one project will not hide the trash in another project: the choice to hide the trash is limited to the individual project.

[matthew-white]

The choice/preference to show or hide the trash is also limited to the user. For example, if I hide the form trash in a project, then another user visits the same project, the other user should see that the trash is visible, not hidden.

[srujner]

Tested with Success!

@matthew-white Is there a possibility to add something similar for the Archived Projects section?

[matthew-white]

Ah that's a good idea! I've added it to #719 so we don't lose track of it.

[issa-tseng]

it works but what's going on here?

should only have one caret of course, and if we're using the red caret it needs to be quite a bit smaller and spaced out a bit from the trash icon.

[brontolosone]

Hmmmm I've not seen that other caret before (the black one), on Firefox nor on Chromium. Are you on Safari?

[issa-tseng]

ah, yeah. a little -webkit-appearance: none usually sorts that out.

[matthew-white]

I'm not sure that @brontolosone has easy access to Safari, but I took a quick look at this. Just to say it explicitly, this is a <details> element. I tried adding -webkit-appearance: none to both the <details> and the <summary> within the <details>, but it didn't have an effect.

This article on MDN suggests list-style: none. However, that also didn't have an effect.

This other article on MDN suggests using a pseudo-element:

::-webkit-details-marker { display: none; }

I tried that out, and it worked. 🎉

In general, we're not targeting Safari these days, but I think it makes sense to make this small fix, since it's easy to do.

@brontolosone, would you mind adding that to your PR when you make the other changes?

#form-trash-list summary::-webkit-details-marker { display: none; }