Initial setup for filtering and searching linter rules

[parlough]

Staged: https://dart-dev--pr6283-feat-filter-lint-rules-94adngwc.web.app/tools/linter-rules#rules

[dart-github-bot]

Visit the preview URL for this PR (updated for commit 4c2aa02):

https://dart-dev--pr6283-feat-filter-lint-rules-94adngwc.web.app

[parlough]

@MaryaBelanger This is WIP from an implementation and style perspective, but I'd appreciate your initial thoughts: https://dart-dev--pr6283-feat-filter-lint-rules-qp9kzihy.web.app/tools/linter-rules#rules

The current implementation is the result of prototyping, but I hope to make it more generic and flexible so it's expandable and a lot can be used on the glossary page as well.

Thanks for taking a look :D

[ericwindmill]

This is awesome, it looks great.

Half baked aside - The three of us should talk about documenting some kind of 'style guide' for the websites ahead of the UI work that Marya and I have started planning for Dart Getting Started and Flutter Fundamentals.

[MaryaBelanger]

Oooo very cool! Love the layout and the concept, couple small ideas from a first look:

• It'd be nice if we could hover over the icons in each box to see what they mean (only indication of icon meaning is in the rule set drop down, but not all icons are in there and once you're scrolling down you'd have to scroll to the top to see
• Could the search bar and filters pin to the top once you start scrolling down? (I forget what the term is for that, but like stick with the scroll...). If you've scrolled a lot it'd be nice to not have to scroll back up to change your search.
• Maybe the icons could serve to replace the few lines at the top of each lint's page, like for avoid_relative_lib_imports:
  
  (but the icons would have to have definitions when hovered over like I said before)

These are all just nits/things you're probably working on already anyway! Honestly it's amazing as-is and I'd approve publishing it right now!

[MaryaBelanger]

/gcbrun

Edit: staging is not working

[parlough]

@MaryaBelanger It looks like staging worked: https://dart-dev--pr6283-feat-filter-lint-rules-94adngwc.web.app/tools/linter-rules#rules

[parlough]

It'd be nice if we could hover over the icons in each box to see what they mean (only indication of icon meaning is in the rule set drop down, but not all icons are in there and once you're scrolling down you'd have to scroll to the top to see

These should have a title on hover (and a corresponding accessible label) now. It takes a second to appear as it's just using the built-in browser title for now. Once I add tooltip functionality for glossary work, I can revisit using that for these too.

Could the search bar and filters pin to the top once you start scrolling down? (I forget what the term is for that, but like stick with the scroll...). If you've scrolled a lot it'd be nice to not have to scroll back up to change your search.

Great idea. I couldn't come up with a perfect style and behavior for the stickiness, so if it's ok I'd like to revisit it later on.

Maybe the icons could serve to replace the few lines at the top of each lint's page

Good point. I plan to revisit the individual lint pages soon and I'll see about reusing these icons.

---

I cleaned up the implementation a bit, but will make it more generic and shared after when I adapt the components to work for the glossary as well. That way I don't unnecessarily over design the abstractions of the implementation :)

Otherwise this is ready for review if you're fine with leaving those changes for follow up.

[MaryaBelanger]

This is awesome! And yeah I was just spouting off ideas, it's definitely in a very impressive state as is and other ideas can be revisited