Load the element detail page from the GraphQL API

[anettkva]

The element page (/elements/:elementId) already reads the id from the URL, but it gets the data from src/lib/catalog.ts, which imports the whole catalog from data/*.json into the frontend. That was a stand-in until the API was ready. It puts the whole catalog in the bundle (a large part of the 665 kB), and the page does not show what the database has, for example whether an element is removed.

What to do

• In ElementDetailPage.tsx, load the item with Apollo Client (useQuery) and the catalogItem(id) query, with the id from the URL. Ask for:
  • id, code, name, description, imageUrl and removed
  • elementGroup { name apparatus { id name } }
  • value on Element and dValue on Vault
  • variants with the fields the variant cards need
• Keep the loading, not found and error states:
  • not found: catalogItem returns null
  • error: use describeError from src/lib/apollo/errors.ts for the message, and offer "Try again" when retryable is true
• Show a warning when removed is true ("This element is no longer in the Code of Points").
• Use imageUrl from the API instead of building the address in the frontend.
• Remove the JSON imports from src/lib/catalog.ts once nothing else uses them, and check that the bundle gets smaller.

Done when

• /elements/UB-2.305-a shows that element from the backend, and following a variant link shows the variant.
• An id that does not exist shows "Element not found".
• A server that cannot be reached shows an error with "Try again".
• A removed element shows the warning.
• Tests cover the found, not found and error cases, with a mocked Apollo Client (MockedProvider).
• data/*.json is no longer in the frontend bundle.