Comfy-Org / Comfy-Org/ComfyUI_frontend
refactor: consolidate RoleBadge into StatusBadge
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Summary
The newly added `RoleBadge.vue` (`src/platform/workspace/components/RoleBadge.vue`, introduced in #10486) is visually and structurally similar to the existing `StatusBadge.vue` (`src/components/common/StatusBadge.vue`).
**RoleBadge** renders a `rounded-full` span with `bg-base-foreground text-base-background uppercase` — which closely matches `StatusBadge`'s `contrast` severity + `label` variant. The main differences are minor sizing tokens (`text-2xs` / `py-0.5` / `font-bold` vs `text-3xs` / `h-3.5` / `font-semibold`) and that `RoleBadge` computes an i18n label from a `role: 'owner' | 'member'` prop internally.
## Proposed Work
- Evaluate whether `RoleBadge` can be replaced by using `StatusBadge` with `severity="contrast"` (and passing the translated label from the call site), or alternatively extend `statusBadge.variants.ts` to align sizing tokens so a single component covers both use cases.
- Remove `RoleBadge.vue` and its test once consolidated, updating `MemberListItem.vue` to use the shared component.
## References
- Suggested in: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10486#discussion_r3054634229
- Introduced in PR: #10486 (refactor: decompose MembersPanelContent into focused components)
- Requested by: @christian-byrne
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-10979-refactor-consolidate-RoleBadge-into-StatusBadge-33d6d73d365081fa8bd9f5fbbf0f6672) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.