From fb3ab88f0484b19733af090966d7a4a4cbe366fd Mon Sep 17 00:00:00 2001 From: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com> Date: Wed, 15 Oct 2025 05:27:19 +0100 Subject: [PATCH] fix Cloudbadge (#6063) This pull request refactors how top bar badges are handled in the application, making badge rendering extensible and moving cloud badge logic into the extension system. The main changes include replacing the old `CloudBetaBadge` component with a new, generic badge system, introducing a Pinia store for badge management, and updating the extension API to support top bar badges. **Badge System Refactor and Extensibility** * Replaced the hardcoded `CloudBetaBadge` with a new `TopbarBadges` component, which dynamically renders badges from the store instead of relying on the `isCloud` flag in `TopMenubar.vue`. [[1]](diffhunk://#diff-b7d7bf1028f09fb907c09edf27631214d005c93b80eaff7cf15cfd53671b1e8aL9-R9) [[2]](diffhunk://#diff-b7d7bf1028f09fb907c09edf27631214d005c93b80eaff7cf15cfd53671b1e8aL43-R48) * Renamed and refactored `CloudBetaBadge.vue` to `TopbarBadge.vue`, making it accept a generic `badge` prop and removing i18n logic from the component. * Added a new `TopbarBadges.vue` component to render all badges from the `topbarBadgeStore`. **Badge Data Management** * Introduced a new Pinia store `topbarBadgeStore` that aggregates top bar badges from all extensions, enabling dynamic badge management. **Extension System Integration** * Updated the extension API (`ComfyExtension` interface) to support a new `topbarBadges` property, allowing extensions to contribute badges to the top bar. * Added a core extension (`cloudBadge.ts`) that registers a "Comfy Cloud" beta badge when running in a cloud environment, using the new badge system. [[1]](diffhunk://#diff-b7818ca9daae2411d56695777160b8132507f2a3ff4f700d2510453c8833ca75R1-R16) [[2]](diffhunk://#diff-236993d9e4213efe96d267c75c3292d32b93aa4dd6c3318d26a397e0ae56bc87R2) **Type Definitions** * Added a new `TopbarBadge` type to `comfy.ts` to define the structure for top bar badges, supporting optional labels. --- src/components/topbar/TopMenubar.vue | 5 ++--- .../{CloudBetaBadge.vue => TopbarBadge.vue} | 13 +++++++------ src/components/topbar/TopbarBadges.vue | 17 +++++++++++++++++ src/extensions/core/cloudBadge.ts | 16 ++++++++++++++++ src/extensions/core/index.ts | 6 ++++++ src/stores/topbarBadgeStore.ts | 18 ++++++++++++++++++ src/types/comfy.ts | 12 ++++++++++++ 7 files changed, 78 insertions(+), 9 deletions(-) rename src/components/topbar/{CloudBetaBadge.vue => TopbarBadge.vue} (66%) create mode 100644 src/components/topbar/TopbarBadges.vue create mode 100644 src/extensions/core/cloudBadge.ts create mode 100644 src/stores/topbarBadgeStore.ts diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue index 3586e1a86..8e9bf015f 100644 --- a/src/components/topbar/TopMenubar.vue +++ b/src/components/topbar/TopMenubar.vue @@ -6,7 +6,7 @@ style="background: var(--border-color)" > - +
- {{ betaString }} + {{ badge.label }}
- {{ cloudText }} + {{ badge.text }}
diff --git a/src/components/topbar/TopbarBadges.vue b/src/components/topbar/TopbarBadges.vue new file mode 100644 index 000000000..381b4d13c --- /dev/null +++ b/src/components/topbar/TopbarBadges.vue @@ -0,0 +1,17 @@ + + + diff --git a/src/extensions/core/cloudBadge.ts b/src/extensions/core/cloudBadge.ts new file mode 100644 index 000000000..5f2b569fa --- /dev/null +++ b/src/extensions/core/cloudBadge.ts @@ -0,0 +1,16 @@ +import { t } from '@/i18n' +import { isCloud } from '@/platform/distribution/types' +import { useExtensionService } from '@/services/extensionService' + +useExtensionService().registerExtension({ + name: 'Comfy.CloudBadge', + // Only show badge when running in cloud environment + topbarBadges: isCloud + ? [ + { + label: t('g.beta'), + text: 'Comfy Cloud' + } + ] + : undefined +}) diff --git a/src/extensions/core/index.ts b/src/extensions/core/index.ts index 5354ef4e9..011502f44 100644 --- a/src/extensions/core/index.ts +++ b/src/extensions/core/index.ts @@ -1,3 +1,5 @@ +import { isCloud } from '@/platform/distribution/types' + import './clipspace' import './contextMenuFilter' import './dynamicPrompts' @@ -21,3 +23,7 @@ import './uploadAudio' import './uploadImage' import './webcamCapture' import './widgetInputs' + +if (isCloud) { + import('./cloudBadge') +} diff --git a/src/stores/topbarBadgeStore.ts b/src/stores/topbarBadgeStore.ts new file mode 100644 index 000000000..e4547ae46 --- /dev/null +++ b/src/stores/topbarBadgeStore.ts @@ -0,0 +1,18 @@ +import { defineStore } from 'pinia' +import { computed } from 'vue' + +import type { TopbarBadge } from '@/types/comfy' + +import { useExtensionStore } from './extensionStore' + +export const useTopbarBadgeStore = defineStore('topbarBadge', () => { + const extensionStore = useExtensionStore() + + const badges = computed(() => + extensionStore.extensions.flatMap((e) => e.topbarBadges ?? []) + ) + + return { + badges + } +}) diff --git a/src/types/comfy.ts b/src/types/comfy.ts index 184aa7a4e..f11488380 100644 --- a/src/types/comfy.ts +++ b/src/types/comfy.ts @@ -33,6 +33,14 @@ type MenuCommandGroup = { commands: string[] } +export interface TopbarBadge { + text: string + /** + * Optional badge label (e.g., "BETA", "ALPHA", "NEW") + */ + label?: string +} + export type MissingNodeType = | string // Primarily used by group nodes. @@ -74,6 +82,10 @@ export interface ComfyExtension { * Badges to add to the about page */ aboutPageBadges?: AboutPageBadge[] + /** + * Badges to add to the top bar + */ + topbarBadges?: TopbarBadge[] /** * Allows any initialisation, e.g. loading resources. Called after the canvas is created but before nodes are added * @param app The ComfyUI app instance