Comfy Cloud Badge indicator (#6043)

## Summary

<!-- One sentence describing what changed and why. -->

## Changes

- **What**: <!-- Core functionality added/modified -->
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

## Review Focus

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6043-Comfy-Cloud-Badge-indicator-28b6d73d365081b8b549ecc3beb2c132)
by [Unito](https://www.unito.io)

src/components/topbar/TopMenubar.vue

@@ -2,15 +2,16 @@
   <div>
     <div
       v-show="showTopMenu && workflowTabsPosition === 'Topbar'"
-      class="w-full flex content-end z-1001 h-[38px]"
+      class="w-full flex content-end z-1001 h-9.5"
       style="background: var(--border-color)"
     >
       <WorkflowTabs />
+      <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,6 +45,8 @@ import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI, isElectron, isNativeWindow } from '@/utils/envUtil'
 
+import TopbarBadges from './TopbarBadges.vue'
+
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()
 

src/components/topbar/TopbarBadges.vue

@@ -0,0 +1,32 @@
+<template>
+  <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 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"
+        >
+          {{ badge.label }}
+        </div>
+      </div>
+
+      <div
+        class="rounded-8 font-abcrom font-extrabold text-slate-100 text-[14px]"
+      >
+        {{ badge.text }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTopbarBadgeStore } from '@/stores/topbarBadgeStore'
+
+const topbarBadgeStore = useTopbarBadgeStore()
+</script>
+<style>
+@import '../../platform/onboarding/cloud/assets/css/fonts.css';
+</style>