prefactor: generalize filterable index layout and components

[ericwindmill]

Description of what this PR is changing or adding, and why:

Extract generic two-column filterable index layout styles and sidebar/search components from learning resources index into reusable filterable_index.dart and _filterable-index.scss.

This change anticipates new content for FlutterBench, where I'm adding a CUJ index #13691

[gemini-code-assist]

Code Review

This pull request refactors the filterable index pages by extracting shared layout, sidebar, and search group components and styles into reusable Dart components (FiltersSidebar, FilterSearchGroup) and a shared SASS stylesheet (_filterable-index.scss), successfully reducing code duplication. The feedback highlights a critical issue in filterable_index.dart where event.target is unsafely cast to web.Element? using the 'as' operator, which can lead to a runtime TypeError. It is recommended to use a safe type check (is web.Element) instead.

[gemini-code-assist]

Casting event.target directly to web.Element? using as is unsafe and can throw a TypeError at runtime. In the DOM, event.target can be a Document, Window, or other non-element nodes (for example, if the user clicks on a scrollbar or outside the window). To prevent runtime crashes, use a safe type check (is web.Element) before calling element-specific methods like closest.

      onClick: (event) {
        final target = event.target;
        final element = target is web.Element ? target : null;
        if (element?.closest(_sidebarSelector) == null &&
            element?.closest('.show-filters-button') == null) {
          _toggle?.checked = false;
        }
      },

[ericwindmill]

Is this not exactly the same?

[parlough]

The underlying of the comment is sort of right, but its solution isn't accurate since is also doesn't work for web types. Instead use the isA method. Something like this:

onClick: (event) {
  final target = event.target;
  if (target == null || !target.isA<web.Element>()) return;

  final element = target as web.Element;
  if (element.closest(_sidebarSelector) == null &&
      element.closest('.show-filters-button') == null) {
    _toggle?.checked = false;
  }
},

[flutter-website-bot]

Staged preview of the updated docs.flutter.dev site (updated for commit c932533):

https://flutter-docs-prod--docs-pr13768-refactor-filterable-in-fnqqj8yi.web.app

[flutter-website-bot]

Staged preview of the updated flutter.dev site (updated for commit c932533):

https://flutter-dev-230821--www-pr13768-refactor-filterable-in-6oidcs4i.web.app

[parlough]

Thanks for extracting this out @ericwindmill! Mostly looks good to me.

Should the learning resources index be updated to use the new FilterSearchGroup?

[parlough]

The underlying of the comment is sort of right, but its solution isn't accurate since is also doesn't work for web types. Instead use the isA method. Something like this:

onClick: (event) {
  final target = event.target;
  if (target == null || !target.isA<web.Element>()) return;

  final element = target as web.Element;
  if (element.closest(_sidebarSelector) == null &&
      element.closest('.show-filters-button') == null) {
    _toggle?.checked = false;
  }
},