feat: simple typeahead search

[mvexel]

This adds a simple typeahead search to the layer and style overview. Useful for instances with a lot of layers!

tgl-480.mov

[akx]

I'd suggest adding custom data attributes to the elements being filtered, so we don't need to traverse the DOM as much :)

[mvexel]

@akx haha yes that would be better for sure!
Do you otherwise see this as a useful thing to merge (before I spend more time on it)?

[acalcutt]

I think this looks like a nice feature i would merge.

[mvexel]

Thanks @acalcutt! I will make the improvements @akx suggested to reduce strain from DOM traversal.

[mvexel]

all done and as promised we are actually filtering on both name and identifier now :)
We could extend this with another data attribute to filter on style, layer only with some checkboxes but I propose not overcomplicate things.
Thanks for considering!

[akx]

Looks nice and clean with hidden and the dataset stuff! Thanks for taking my suggestions into account :)

[mvexel]

Looks nice and clean with hidden and the dataset stuff! Thanks for taking my suggestions into account :)

Thanks for the suggestions! I hope this is ready to merge but please do let me know if you have any additional changes you would like to see.

[acalcutt]

Just an FYI, I will try to test this soon so it can be merged. I have just been slammed this week at my real job and haven't had much time to test PRs this week.

[acalcutt]

Seems simple and worked fine in testing.

[acalcutt]

The one thing I haven't liked about this is how much room the logo + filter take up. one of these days I need to shrink that logo

[mvexel]

Have to agree with you. With a little bit of work the filter element could be made smaller. Honestly I think the entire page could benefit from a tighter layout. Let me think about this a bit.