Update the Browse Page on CLARK Client

[Cwagne17]

This pull request significantly refactors the browse page UI and logic to provide a more modern, intuitive filtering and sorting experience for users. The changes introduce a sticky filter bar with dropdowns for key filter types, a full-screen modal for filters on mobile, and an updated results grid layout. The filter and sort logic in the component has been reworked for clarity and maintainability, with improved synchronization between UI state and the underlying query object.

UI/UX Improvements:

• Replaced the sidebar filter layout with a sticky filter bar featuring dropdowns for Topics, Levels, Duration, and Materials, plus a clear filters button and a sort dropdown. A full-screen modal is now used for filters on mobile devices for improved usability. (browse.component.html)

Filter and Sort Logic Refactor:

• Added state management for filter dropdowns and filter data, including initialization and synchronization with the filter component. Provided methods for toggling dropdowns, updating filter selections, and handling backdrop clicks for modal closure. (browse.component.ts) [1] [2] [3]
• Refactored the sorting logic to simplify options to "Newest" and "Most Downloaded," removed the "Oldest" and clear sort options, and ensured sort state is properly reflected in the UI and query object. (browse.component.ts) [1] [2]

Query and Pagination Updates:

• Increased the default and per-page limit for results from 10 to 15 for a denser results grid and updated relevant query logic accordingly. (browse.component.ts) [1] [2]

Filter Reset and Synchronization:

• Enhanced the clear filters functionality to reset all filter-related fields in the query object and synchronize the UI and filter component state. (browse.component.ts)

These changes collectively modernize the browse experience, streamline filter and sort interactions, and improve maintainability of the codebase.

[curlyLasagna]