### Build the Elements page and connect it to the GraphQL API **Goal:** The Elements page (`/elements`, the search page and the start page of the site) is built like the design (`elements_page.png`) and works with the API: the search, the results, the filters, the sort and "Load more". This is the one issue for the whole page (it replaces #40, #41, and the parts that were #117 and #119). It is done in one pull request, #114, and what is left is below. The API is in `dev`: `searchCatalog` does the search, filter, sort and paging in one query (see "Search, filter, sort and pagination" in [API.md](docs/API.md)). #### Checklist - [x] **The design:** the header, the table on a wide screen and the cards on a small screen, in light and dark mode, with the focus and hover states (#114; was #40 and #41). - [x] **Results:** `searchCatalog` through Apollo Client in the table and the cards, with a loading state, an error state with "Try again" (`describeError`) and an empty state. "Showing X of Y" uses `totalCount`. - [x] **Search:** the text is sent when the user has stopped typing (debounce), at most 80 characters, and the search is in the address (`?search=`). - [x] **Load more:** cursor paging with `endCursor`, and the button is disabled when everything is shown (`hasNextPage` is false). - [x] **1000+:** the count stops at 1001 on the server, and the page says "1000+" for more than 1000. - [ ] **Filters:** apparatus, element group and difficulty (the letters are sent as values, see API.md). Build them as the components in #84, #85 and #86. - [ ] **Sort:** code, difficulty (only with an apparatus, see API.md) and name, ascending or descending. - [ ] **Variants:** show "More variants" and which variant matched a search (see #58). - [ ] **URL:** keep the filters and the sort in the address too (`useSearchParams`), like the search. - [ ] **Tests** for each of the above.