mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
7caad10e93
This pull request introduces a new system for displaying environment-specific badges in the application's top bar, with a focus on supporting a "Comfy Cloud" badge in production environments. The changes include new badge types, extension support, UI components, and environment detection logic to ensure badges are only shown in appropriate contexts. **Topbar Badge System** * Added a new `TopbarBadge` type and support for topbar badges in the `ComfyExtension` interface to allow extensions to specify badges for the top bar. [[1]](diffhunk://#diff-c29886a1b0c982c6fff3545af0ca8ec269876c2cf3948f867d08c14032c04d66R24-R31) [[2]](diffhunk://#diff-c29886a1b0c982c6fff3545af0ca8ec269876c2cf3948f867d08c14032c04d66R85-R88) * Created a Pinia store `topbarBadgeStore` to aggregate topbar badges from all registered extensions for display. **UI Integration** * Added a new `TopbarBadges.vue` component to render topbar badges and integrated it into the top menu bar UI. [[1]](diffhunk://#diff-6f460b1398fd033a2059daca1f991c74ce572cef86046a3726d1b1a70a3a4325R1-R32) [[2]](diffhunk://#diff-b7d7bf1028f09fb907c09edf27631214d005c93b80eaff7cf15cfd53671b1e8aL5-R14) * Updated CSS variables and menu styling to support the new badge visuals. [[1]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R88-R89) [[2]](diffhunk://#diff-b7d7bf1028f09fb907c09edf27631214d005c93b80eaff7cf15cfd53671b1e8aL5-R14) **Environment Detection and Extension Registration** * Added a runtime environment detection utility to determine if the app is running in production or staging, replacing the previous build-time constant approach. * Registered a new `cloudBadge` extension that conditionally adds a "Comfy Cloud" badge with a "BETA" label when running in production. [[1]](diffhunk://#diff-b7818ca9daae2411d56695777160b8132507f2a3ff4f700d2510453c8833ca75R1-R15) [[2]](diffhunk://#diff-236993d9e4213efe96d267c75c3292d32b93aa4dd6c3318d26a397e0ae56bc87R2) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6048-Badge-for-cloud-environment-28c6d73d365081188050ece527c3c8f3) by [Unito](https://www.unito.io) <img width="996" height="897" alt="Screenshot 2025-10-14 at 20 02 40" src="https://github.com/user-attachments/assets/5a3258c5-87fc-46ae-ad23-7669696cb8b6" />