Feature: Pagination, Search, Filtering and Sorting (Notes and Quizzes)

[TUT888]

Summary

Important Note: This PR aligns with the backend changes introduced in Backend PR 16. Reviewer should either approve that PR first or use it when testing the new functionalities.

This PR adds pagination, search, filtering, and sorting to the notes and quizzes modules. It also introduces several reusable components and utilities to reduce duplication and improve maintainability across the frontend codebase.

Detail Changes

Functionality Updates

• Added pagination, search, filtering, and sorting to notes, quizzes, quiz sets (collections), attempts

  Attempts only support pagination, as they do not have meaningful search or filter criteria.

• Implemented keyword search for most modules:
  • Matches the title field by default.
  • Notes additionally search both title and content using an OR condition.
• Search is performed in real time with a 0.5s debounce to avoid excessive API calls.
• Filtering and sorting are applied after the user confirms selections in the modal.
• A reset button clears all query parameters and restores default results

Code Changes

Utilities

• Added a new useQuery hook that encapsulates logic for managing search, filtering, sorting, and pagination query parameters.
• Introduced a PageData type to store pagination metadata returned from the backend.
• Updated service functions to return page-wrapped interfaces (e.g., QuizPage, NotePage) instead of raw arrays (Quiz[], Note[]).

New components

• Added Popover from shadcn.
• Added ErrorBlock for consistent error display.
• Added GenericPopover for action-bar interactions (filtering and sorting). Used across notes, quizzes, quiz sets, and attempts.
  • FilterPopover: accepts dynamic filter definitions, including property names, labels, and input types.
  • SortingPopover: accepts dynamic sorting options, allowing users to choose sortBy and sortOrder.
• Added SearchLayout, a reusable layout that bundles search, filter, and sort controls. Interactions update query parameters, which trigger the parent component’s useEffect to fetch updated results.
• Extracted list UIs into dedicated components (NoteList, QuizList and QuizSetList), which improves readability and reusability.

Updated Components

• Updated modals (e.g. AddToCollectionModal, DeleteConfirmationModal) to render at the center of the viewport using React’s createPortal() instead of centering relative to their parent container.

Other Minor Changes

• Renamed and refactored several attempt-related types for clarity.
• Performed small cleanups (renaming, reordering, formatting) that do not affect functionality.

[pvdev1805]

Tested the new features, everything is working as expected.