From 636a89ac0c3f2d76b6e1f7e1e2a385533a30d75a Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Mon, 13 Oct 2025 23:17:36 +0100
Subject: [PATCH] feat: replace CloudBar with TopbarBadges and add
 topbarBadgeStore

---
 src/components/topbar/TopMenubar.vue           |  7 ++++---
 .../topbar/{CloudBar.vue => TopbarBadges.vue}  | 18 +++++++++++++-----
 src/stores/topbarBadgeStore.ts                 | 18 ++++++++++++++++++
 3 files changed, 35 insertions(+), 8 deletions(-)
 rename src/components/topbar/{CloudBar.vue => TopbarBadges.vue} (50%)
 create mode 100644 src/stores/topbarBadgeStore.ts

diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index cc2c438e4..1bed0d400 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -6,12 +6,12 @@
       style="background: var(--border-color)"
     >
       <WorkflowTabs />
-      <CloudBar />
+      <TopbarBadges />
     </div>
     <div
       v-show="showTopMenu"
       ref="topMenuRef"
-      class="comfyui-menu flex items-center"
+      class="comfyui-menu flex items-center bg-gray-100"
       :class="{ dropzone: isDropZone, 'dropzone-active': isDroppable }"
     >
       <CommandMenubar />
@@ -44,7 +44,8 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI, isElectron, isNativeWindow } from '@/utils/envUtil'
-import CloudBar from './CloudBar.vue'
+
+import TopbarBadges from './TopbarBadges.vue'
 
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()
diff --git a/src/components/topbar/CloudBar.vue b/src/components/topbar/TopbarBadges.vue
similarity index 50%
rename from src/components/topbar/CloudBar.vue
rename to src/components/topbar/TopbarBadges.vue
index e65a2d312..a6a136dc5 100644
--- a/src/components/topbar/CloudBar.vue
+++ b/src/components/topbar/TopbarBadges.vue
@@ -1,24 +1,32 @@
 <template>
-  <div class="flex flex-col justify-center bg-comfy-menu-secondary">
+  <div
+    v-for="badge in topbarBadgeStore.badges"
+    :key="badge.text"
+    class="flex flex-col justify-center bg-comfy-menu-secondary"
+  >
     <div class="flex gap-2 px-3">
-      <div class="justify-center flex-col flex">
+      <div v-if="badge.label" class="justify-center flex-col flex">
         <div
           class="rounded-4xl text-black bg-white gap-2.5 px-1 py-0.5 text-[9px] font-semibold"
         >
-          BETA
+          {{ badge.label }}
         </div>
       </div>
 
       <div
         class="rounded-8 font-abcrom font-extrabold text-slate-100 text-[14px]"
       >
-        Comfy Cloud
+        {{ badge.text }}
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useTopbarBadgeStore } from '@/stores/topbarBadgeStore'
+
+const topbarBadgeStore = useTopbarBadgeStore()
+</script>
 <style>
 @import '../../platform/onboarding/cloud/assets/css/fonts.css';
 </style>
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<TopbarBadge[]>(() =>
+    extensionStore.extensions.flatMap((e) => e.topbarBadges ?? [])
+  )
+
+  return {
+    badges
+  }
+})