Make filtering ordering consistent on the front-end

We have a feature that filters cards by tags. For example, if you click on a tag, then only the cards with the tag applied will continue being displayed. If you deselect the tag, then cards will be displayed regardless if they have those tags or not.

Right now, our code just removes items that don't have the tag applied. When those cards can be displayed again, we just add them to the back of the display. For example:

Original:

{label: 1, tags: "grass"}
{label: 2, tags: ""}
{label: 3, tags: "grass"}

Apply grass tag

{label: 1, tags: "grass"}
{label: 3, tags: "grass"}

Unapply grass tag

{label: 1, tags: "grass"}
{label: 3, tags: "grass"}
{label: 2, tags: ""}

This is behavior is a little bit funky, because you'll only see changes happening at the back of the list. I think it'd be nice to have an ordering of {1, 2, 3} since that was the original ordering.

To fix: Assign another field to cards (like display: true/false). When hiding cards, first set display = false to all cards that don't match the criteria. Then, sort all cards by labelIds (assuming we're showing the most relevant first). Do the next sort on display (display = true at the front, display = false at the back). Check if TypeScript sorts are stable so that this ensures the correct ordering every time.

ProjectSidewalk / SidewalkGallery

Make filtering ordering consistent on the front-end #22