Story 2137: Post Filter and Library Filter Components

[julhoang]

Issue: #2137

Summary

Add 2 new filter components and a searchable multi-select field for the V3 redesign:

1. Post Filter (toggleable pill group)

• Figma: https://www.figma.com/design/VhZHw3RudFNMzfPEEYchE9/UI-Kit---Foundations-Delivery?node-id=55-56&m=dev
• Link to component: http://localhost:8000/v3/demo/components/#post-filter

2. Library Filter (horizontal dropdown row on desktop, fullscreen modal on mobile).

• Figma: https://www.figma.com/design/VhZHw3RudFNMzfPEEYchE9/UI-Kit---Foundations-Delivery?node-id=389-6106&m=dev
• Link to component: http://localhost:8000/v3/demo/components/#library-filter

3. Combo Multi-Select (searchable dropdown with multi-selection)

• Merges the combo's type-to-filter search with the multiselect's checkbox toggling and array-based selection (We don't have a Figma design for this)

Changes

• Add _post_filter.html template and post-filter.css – checkbox-backed filter pill group with hover, selected, and focus-visible states
• Add _library_filter.html template and library-filter.css – row of filter dropdowns (View, Grading, C++ Version, Category, Sort) that collapses into a CSS-only fullscreen modal on mobile via hidden checkbox toggle.
• Add _field_combo_multi.html template – searchable multi-select field combining combo search/filter with multiselect checkboxes, multiple hidden inputs for form submission, and <select multiple> in no-JS fallback
• Add expand icon to icon.html for the mobile filter trigger
• Refactor dialog.js to support both hash-based and checkbox-based dialog types:
  • _dialog.html – hash-based modals (unchanged behavior)
  • _library_filter.html – checkbox-based modal with focus trap, ESC close, Enter key on labels, and focus restoration
• Improve forms.css dropdown and combo accessibility styling (i.e. focus-visible outline)
• Add demo data and example sections for all components in V3ComponentDemoView

‼️ Risks & Considerations ‼️

• The library filter modal uses a checkbox toggle instead of the hash-based approach used by _dialog.html. This is intentional – the filter panel is transient UI that should not be deep-linkable or add entries to browser history. A URL hash like _dialog.html would let users navigate to an open filter state directly, which doesn't make as much sense for this component.
• dialog.js was refactored to detect and enhance both dialog types (hash-based and checkbox-based) with shared focus-trap and ESC-close behavior, while keeping their open/close mechanisms distinct.

Screenshots

Post Filter

Light Mode	Dark Mode

Library Filter

Light Mode	Dark Mode

No-JS Fallback

Desktop	Mobile

Self-review Checklist

• Tag at least one team member from each team to review this PR
• Link this PR to the related GitHub Project ticket

Frontend

• UI implementation matches Figma design
• Tested in light and dark mode
• Responsive / mobile verified
• Accessibility checked (keyboard navigation, etc.)
• Ensure design tokens are used for colors, spacing, typography, etc. – No hardcoded values
• Test without JavaScript (if applicable)
• No console errors or warnings

[herzog0]

LGTM, thanks for all the improvements!

[julioest]

Just one suggestion

Other than that, great stuff! ✅

[jlchilders11]

LGTM!

[julhoang]

Hey @herzog0 , @jlchilders11 , @julioest ! Can I get another round review from you? I added a new _field_combo_multi.html and used it for Category dropdown – thanks!

[julioest]

Looks great, nice job on this one Julia - approved

[jlchilders11]

Approved as is, one thought/question about z-index.

[jlchilders11]

Quick thought: Should z-index be a var to prevent unintended collisions?

[julhoang]

Great call out @jlchilders11 ! You're right we definitely need a more robust way to manage z-index across the app. Are you okay with me spinning off a separate PR to evaluate all components' z-index set up?

[jlchilders11]

Sounds good to me! Raw numbers for z-index give me itchy foot gun trigger reactions, lol