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