Comfy-Org / Comfy-Org/ComfyUI_frontend

refactor: consolidate RoleBadge into StatusBadge

Open
#10,979 0 comments 0 reactions 1 assignee Claimed by @christian-byrne View on GitHub
developer experience
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.