[backport rh-test] change cloud feature flags to be loaded dynamically at runtime rather than set in build (#6257)

## Summary

Backport of #6246 to `rh-test` branch.

This PR cherry-picks commit d7a58a7a9b to
the `rh-test` branch with merge conflicts resolved.

### Conflicts Resolved

**GraphCanvas.vue:**
- Accepted incoming template structure changes (removed betaMenuEnabled
check, added workflow tabs)
- Added missing imports: TopbarBadges, WorkflowTabs, isNativeWindow
- Added showUI computed property

**cloudBadge.ts:**
- Deleted file (replaced by cloudBadges.ts plural)

**telemetry/types.ts:**
- Merged interface methods from both branches
- Accepted incoming event constant changes (app: prefix)

Original PR: #6246

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6257-backport-rh-test-change-cloud-feature-flags-to-be-loaded-dynamically-at-runtime-rather--2966d73d365081a59daeeb6dfbbf2af5)
by [Unito](https://www.unito.io)

src/components/actionbar/ComfyRunButton/index.ts

@@ -2,6 +2,6 @@ import { defineAsyncComponent } from 'vue'
 
 import { isCloud } from '@/platform/distribution/types'
 
-export default isCloud && __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION
+export default isCloud && window.__CONFIG__?.subscription_required
   ? defineAsyncComponent(() => import('./CloudRunButtonWrapper.vue'))
   : defineAsyncComponent(() => import('./ComfyQueueButton.vue'))

src/components/graph/GraphCanvas.vue

@@ -2,8 +2,23 @@
   <!-- Load splitter overlay only after comfyApp is ready. -->
   <!-- If load immediately, the top-level splitter stateKey won't be correctly
   synced with the stateStorage (localStorage). -->
-  <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady && betaMenuEnabled">
-    <template v-if="!workspaceStore.focusMode" #side-bar-panel>
+  <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady">
+    <template v-if="showUI && workflowTabsPosition === 'Topbar'" #workflow-tabs>
+      <div
+        class="workflow-tabs-container pointer-events-auto relative h-9.5 w-full"
+      >
+        <!-- Native drag area for Electron -->
+        <div
+          v-if="isNativeWindow() && workflowTabsPosition !== 'Topbar'"
+          class="app-drag fixed top-0 left-0 z-10 h-[var(--comfy-topbar-height)] w-full"
+        />
+        <div class="flex h-full items-center">
+          <WorkflowTabs />
+          <TopbarBadges />
+        </div>
+      </div>
+    </template>
+    <template v-if="showUI" #side-toolbar>
       <SideToolbar />
     </template>
     <template v-if="!workspaceStore.focusMode" #bottom-panel>
@@ -23,7 +38,6 @@
       />
     </template>
   </LiteGraphCanvasSplitterOverlay>
-  <GraphCanvasMenu v-if="!betaMenuEnabled && canvasMenuEnabled" />
   <canvas
     id="graph-canvas"
     ref="canvasRef"
@@ -91,6 +105,8 @@ import NodeOptions from '@/components/graph/selectionToolbox/NodeOptions.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
+import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
+import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useViewportCulling } from '@/composables/graph/useViewportCulling'
@@ -129,6 +145,7 @@ import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { isNativeWindow } from '@/utils/envUtil'
 
 const emit = defineEmits<{
   ready: []
@@ -163,6 +180,10 @@ const selectionToolboxEnabled = computed(() =>
 
 const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))
 
+const showUI = computed(
+  () => !workspaceStore.focusMode && betaMenuEnabled.value
+)
+
 // Feature flags
 const { shouldRenderVueNodes } = useVueFeatureFlags()
 

src/components/topbar/TopbarBadge.vue

@@ -1,39 +1,83 @@
 <template>
   <div
-    class="flex items-center gap-2 bg-comfy-menu-secondary"
+    v-tooltip="badge.tooltip"
+    class="flex h-full shrink-0 items-center gap-2 whitespace-nowrap"
     :class="[{ 'flex-row-reverse': reverseOrder }, noPadding ? '' : 'px-3']"
+    :style="{ backgroundColor: 'var(--comfy-menu-bg)' }"
   >
+    <i
+      v-if="iconClass"
+      :class="['shrink-0 text-base', iconClass, iconColorClass]"
+    />
     <div
       v-if="badge.label"
-      class="rounded-full bg-white px-1.5 py-0.5 text-xxxs font-semibold text-black"
-      :class="labelClass"
+      class="shrink-0 rounded-full px-1.5 py-0.5 text-xxxs font-semibold"
+      :class="labelClasses"
     >
       {{ badge.label }}
     </div>
-    <div
-      class="font-inter text-sm font-extrabold text-slate-100"
-      :class="textClass"
-    >
+    <div class="font-inter text-sm font-extrabold" :class="textClasses">
       {{ badge.text }}
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { TopbarBadge } from '@/types/comfy'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     badge: TopbarBadge
     reverseOrder?: boolean
     noPadding?: boolean
-    labelClass?: string
-    textClass?: string
   }>(),
   {
     reverseOrder: false,
-    noPadding: false,
-    labelClass: '',
-    textClass: ''
+    noPadding: false
   }
 )
+
+const variant = computed(() => props.badge.variant ?? 'info')
+
+const labelClasses = computed(() => {
+  switch (variant.value) {
+    case 'error':
+      return 'bg-danger-100 text-white'
+    case 'warning':
+      return 'bg-warning-100 text-black'
+    case 'info':
+    default:
+      return 'bg-white text-black'
+  }
+})
+
+const textClasses = computed(() => {
+  switch (variant.value) {
+    case 'error':
+      return 'text-danger-100'
+    case 'warning':
+      return 'text-warning-100'
+    case 'info':
+    default:
+      return 'text-slate-100'
+  }
+})
+
+const iconColorClass = computed(() => textClasses.value)
+
+const iconClass = computed(() => {
+  if (props.badge.icon) {
+    return props.badge.icon
+  }
+  switch (variant.value) {
+    case 'error':
+      return 'pi pi-exclamation-circle'
+    case 'warning':
+      return 'pi pi-exclamation-triangle'
+    case 'info':
+    default:
+      return undefined
+  }
+})
 </script>

src/components/topbar/TopbarBadges.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="flex">
+  <div v-if="notMobile" class="flex h-full shrink-0 items-center">
     <TopbarBadge
       v-for="badge in topbarBadgeStore.badges"
       :key="badge.text"
       :badge
       :reverse-order="reverseOrder"
       :no-padding="noPadding"
-      :label-class="labelClass"
-      :text-class="textClass"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useBreakpoints } from '@vueuse/core'
+
 import { useTopbarBadgeStore } from '@/stores/topbarBadgeStore'
 
 import TopbarBadge from './TopbarBadge.vue'
@@ -21,16 +21,16 @@ withDefaults(
   defineProps<{
     reverseOrder?: boolean
     noPadding?: boolean
-    labelClass?: string
-    textClass?: string
   }>(),
   {
     reverseOrder: false,
-    noPadding: false,
-    labelClass: '',
-    textClass: ''
+    noPadding: false
   }
 )
 
+const BREAKPOINTS = { md: 880 }
+const breakpoints = useBreakpoints(BREAKPOINTS)
+const notMobile = breakpoints.greater('md')
+
 const topbarBadgeStore = useTopbarBadgeStore()
 </script>