Skip to content

feat(ui): redesign resource cards with flow-stage layout - #446

Open
alex289 wants to merge 3 commits into
mainfrom
feature/redesign-cards
Open

alex289 wants to merge 3 commits into
mainfrom
feature/redesign-cards

Conversation

@alex289

@alex289 alex289 commented Oct 29, 2026 •

Copy link
Copy Markdown
Member

Type of change

  • 🐛 Bug fix
  • 🚀 New feature
  • ❓ Other (please specify)

Description

The application, repository, agent, and notification card grids each used their own bespoke layout, with status shown only through badges and a loose grid of labeled stats. This made it hard to scan a resource's state at a glance and led to inconsistent styling across the four pages.

image image image image

The agent, application, notification, and repository list pages used inconsistent, bespoke card layouts that made it hard to scan status at a glance.

Introduce a shared ResourceCard component with a flow visualization showing the key stages each resource passes through (e.g. revision → sync → health), and build dedicated cards for agents, applications, notifications, and repositories on top of it. Badge helper functions are exported so the new cards can reuse status labels.
@alex289
alex289 marked this pull request as draft October 29, 2026 18:56
@alex289

alex289 commented Oct 29, 2026

Copy link
Copy Markdown
Member Author

@timokoessler do you maybe want to check this branch out and test it? I like it for the applications but idk about doing this for all cards. Although it would be nice to have them all the same way

@codecov

codecov Bot commented Oct 29, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

The redesigned resource cards showed only flow-stage summaries, which hid useful
context like which applications an agent or repository was tied to, and the
per-resource subscription detail on notification cards.

- Refactor ResourceCard to accept arbitrary children plus a footer, replacing
  the fixed stages/meta/time props (resource-card.tsx)
- AgentCard: show connection status and a linked list of deployed applications
- RepositoryCard: show sync status detail, trigger interval, and applications
  using the repository, plus an inline manual sync action
- NotificationCard: show per-resource subscription rows with event tooltips
  and an inline enable/disable switch
- Expose repositoryId on application list items (backend + frontend) so cards
  can group applications by repository
- Add groupBy utility and wire agents/repositories routes to group
  applications by agent/repository for the new card content
- Update en/de translation messages for the new card strings
@alex289

alex289 commented Oct 29, 2026

Copy link
Copy Markdown
Member Author

@timokoessler I really cooked here now with Claude

@timokoessler

Copy link
Copy Markdown
Member

Looks cool, not going to review it today tho 😄

@alex289
alex289 marked this pull request as ready for review October 30, 2026 10:54
The e2e test expected the repository card to show "Polling" but the card now displays the actual interval.

Update the assertion to match the new label format.
@alex289 alex289 self-assigned this Oct 30, 2026
@alex289 alex289 added the enhancement New feature or request label Oct 30, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants