Hive Hive
Sign in

refactor(forage): split detail metadata and body cards

GitHub issue · Closed

Metadata
Source
tuist/hive #85
Updated
Jun 24, 2026
Domains
Hive
Details

What changed

This separates the forage item detail page into two sibling cards:

  • The first card is now Metadata, with source, requester, updated date, and domain badges.
  • The rendered item body now lives in its own Details card below the metadata.
  • The edit state keeps the form in the first card and labels it Edit item, so the page does not show a second body card while the item is being edited.
  • A component render test now asserts that metadata and body content stay in separate cards.

Why

The previous layout put metadata and the rendered issue body inside one Details card. On long GitHub issue bodies, that made the top card do two jobs and weakened the page hierarchy. Keeping metadata and body content in separate cards makes the detail page easier to scan, especially for seeded GitHub issue data with Markdown content.

Approach

The change stays inside the shared forage component so manual forage items, GitHub issues, and Grafana alerts all use the same structure. Route-specific styles now target the new metadata-card-section and body-card-section parts alongside the comments card section.

Impact

This is a presentation-only change. There are no database, route, feed, or operator-facing configuration changes.

Validation

  • mix format lib/hive_web/components/forage_components.ex assets/css/routes/forage.css test/hive_web/components/forage_components_test.exs
  • mix test test/hive_web/components/forage_components_test.exs test/hive_web/live/forage_live/feature_requests_test.exs test/hive_web/live/forage_live/github_issues_test.exs passed with 23 tests.
  • mix ecto.setup seeded local forage data for visual verification.
  • Verified the seeded GitHub issue detail page with a headless Chrome browser at desktop and mobile viewport sizes.

Verification screenshots

Desktop:

forage-detail-desktop.png

Mobile:

forage-detail-mobile-emulated.png

Comments

No GitHub comments yet.