feat: tablets-feed-listing-and-detail

Stacked on MR !1, Built on top of feat/app-scaffold-and-styling, targeting that branch, diff will auto-clean once !1 is merged

Summary

Implements the Tablets feature end to end, a home preview strip, a full listing screen, and a detail view, backed by the live cdli-tablet/feed endpoint

What's included

Data layer

  • TanStack Query for fetching/caching (24h staleTime/gcTime; the feed changes rarely)
  • fetchTablets fetches ?all=true (527 items), validates the response, and maps the hyphenated API keys (thumbnail-url, blurb-title, full-info) to a clean camelCase Tablet type
  • useTablets (list) and useTablet (single lookup) hooks; one query shared across all screens

Screens

  • Home: horizontal strip of the first 8 tablets
  • Tablets (View All): full vertical list with loading and error states, centered header
  • Tablet detail: hero image, author badge, formatted date, blurb, and the HTML full-info description with tappable links
  • Offline / error: a reusable NoConnection screen with a Retry button, shown when the feed fails to load

Custom HTML rendering

  • parseHTML.ts (string -> node tree) + HtmlContent.tsx (tree -> nested <Text>), supporting <i> <b> <a> <sub> <sup> <p> <br> <font>.
  • chosen over react-native-render-html because that library is unmaintained and predates React 19; the CDLI markup is a small, fixed tag set, so a dependency-free renderer is safer long-term

Notes / API quirks handled

  • No id field yet: url is used as the list key and detail lookup. A one-line swap to id once the backend MR lands
  • Author placeholder: CDLI until the backend adds an author field.

Screenshot & Video

WhatsApp_Image_2026-07-05_at_22.52.27

Edited by Shiva Gupta

Merge request reports

Loading