Add Search, Filters, and Sorting

Task

Connect the Library’s search, filters, and sorting controls to the real Book collection.

Client Filtering

For small personal libraries, filtering the loaded list is sufficient:

const visibleBooks = books
  .filter((book) =>
    `${book.title} ${book.author}`.toLowerCase().includes(query.toLowerCase())
  )
  .filter((book) => {
    if (status === "all") return true;
    return book.status === status;
  })
  .sort((a, b) => {
    if (sort === "title") return a.title.localeCompare(b.title);
    return b.updatedAt.localeCompare(a.updatedAt);
  });

Adapt the fields to the actual Book model and prepared controls.

Keep the server query user-scoped even when filtering is performed in the browser.

Test

Try:

• title search
• author search
• each available filter
• title sorting
• recently updated sorting
• an empty result

Checkpoint

The Library controls operate on real user-owned books rather than mock data.