feat: replace CloudBar with TopbarBadges and add topbarBadgeStore

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()

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>

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
+  }
+})