make topbar badges responsive and fix server health badges showing on unrelated dialogs (#6291)

## Summary

Implemented responsive topbar badges with three display modes (full,
compact, icon-only) using Tailwind breakpoints and PrimeVue Popover
interactions.


https://github.com/user-attachments/assets/57912253-b1b5-4a68-953e-0be942ff09c4

## Changes

- **What**: Replaced hardcoded 880px breakpoint with [Tailwind
breakpoints](https://tailwindcss.com/docs/responsive-design) via
[@vueuse/core](https://vueuse.org/core/useBreakpoints/)
  - `xl (≥1280px)`: Full display (icon + label + text)
  - `lg (≥1024px)`: Compact (icon + label, click for popover)
  - `<lg (<1024px)`: Icon-only (icon/label/dot, click for popover)
- **What**: Added `CloudBadge` component to isolate static "Comfy Cloud
BETA" badge from runtime store badges
- **What**: Added `backgroundColor` prop to support different contexts
(topbar vs dialog backgrounds)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6291-make-topbar-badges-responsive-and-fix-server-health-badges-showing-on-unrelated-dialogs-2986d73d365081d294e5c9a7af1aafb2)
by [Unito](https://www.unito.io)

Author: christian-byrne

src/components/topbar/CloudBadge.vue

@@ -0,0 +1,38 @@
+<template>
+  <TopbarBadge
+    :badge="cloudBadge"
+    :display-mode="displayMode"
+    :reverse-order="reverseOrder"
+    :no-padding="noPadding"
+    :background-color="backgroundColor"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { t } from '@/i18n'
+import type { TopbarBadge as TopbarBadgeType } from '@/types/comfy'
+
+import TopbarBadge from './TopbarBadge.vue'
+
+withDefaults(
+  defineProps<{
+    displayMode?: 'full' | 'compact' | 'icon-only'
+    reverseOrder?: boolean
+    noPadding?: boolean
+    backgroundColor?: string
+  }>(),
+  {
+    displayMode: 'full',
+    reverseOrder: false,
+    noPadding: false,
+    backgroundColor: 'var(--comfy-menu-bg)'
+  }
+)
+
+const cloudBadge = computed<TopbarBadgeType>(() => ({
+  label: t('g.beta'),
+  text: 'Comfy Cloud'
+}))
+</script>

src/components/topbar/TopbarBadge.test.ts

@@ -0,0 +1,231 @@
+import { mount } from '@vue/test-utils'
+import Popover from 'primevue/popover'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import type { TopbarBadge as TopbarBadgeType } from '@/types/comfy'
+
+import TopbarBadge from './TopbarBadge.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {}
+  }
+})
+
+describe('TopbarBadge', () => {
+  const exampleBadge: TopbarBadgeType = {
+    text: 'Test Badge',
+    label: 'BETA',
+    variant: 'info'
+  }
+
+  const mountTopbarBadge = (
+    badge: Partial<TopbarBadgeType> = {},
+    displayMode: 'full' | 'compact' | 'icon-only' = 'full'
+  ) => {
+    return mount(TopbarBadge, {
+      global: {
+        plugins: [PrimeVue, i18n],
+        directives: { tooltip: Tooltip },
+        components: { Popover }
+      },
+      props: {
+        badge: { ...exampleBadge, ...badge },
+        displayMode
+      }
+    })
+  }
+
+  describe('full display mode', () => {
+    it('renders all badge elements (icon, label, text)', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Comfy Cloud',
+          label: 'BETA',
+          icon: 'pi pi-cloud'
+        },
+        'full'
+      )
+
+      expect(wrapper.find('.pi-cloud').exists()).toBe(true)
+      expect(wrapper.text()).toContain('BETA')
+      expect(wrapper.text()).toContain('Comfy Cloud')
+    })
+
+    it('renders without icon when not provided', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Test',
+          label: 'NEW'
+        },
+        'full'
+      )
+
+      expect(wrapper.find('i').exists()).toBe(false)
+      expect(wrapper.text()).toContain('NEW')
+      expect(wrapper.text()).toContain('Test')
+    })
+  })
+
+  describe('compact display mode', () => {
+    it('renders icon and label but not text', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Hidden Text',
+          label: 'BETA',
+          icon: 'pi pi-cloud'
+        },
+        'compact'
+      )
+
+      expect(wrapper.find('.pi-cloud').exists()).toBe(true)
+      expect(wrapper.text()).toContain('BETA')
+      expect(wrapper.text()).not.toContain('Hidden Text')
+    })
+
+    it('opens popover on click', async () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Full Text',
+          label: 'ALERT'
+        },
+        'compact'
+      )
+
+      const clickableArea = wrapper.find('[class*="flex h-full"]')
+      await clickableArea.trigger('click')
+
+      const popover = wrapper.findComponent(Popover)
+      expect(popover.exists()).toBe(true)
+    })
+  })
+
+  describe('icon-only display mode', () => {
+    it('renders only icon', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Hidden Text',
+          label: 'BETA',
+          icon: 'pi pi-cloud'
+        },
+        'icon-only'
+      )
+
+      expect(wrapper.find('.pi-cloud').exists()).toBe(true)
+      expect(wrapper.text()).not.toContain('BETA')
+      expect(wrapper.text()).not.toContain('Hidden Text')
+    })
+
+    it('renders label when no icon provided', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Hidden Text',
+          label: 'NEW'
+        },
+        'icon-only'
+      )
+
+      expect(wrapper.text()).toContain('NEW')
+      expect(wrapper.text()).not.toContain('Hidden Text')
+    })
+  })
+
+  describe('badge variants', () => {
+    it('applies error variant styles', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Error Message',
+          label: 'ERROR',
+          variant: 'error'
+        },
+        'full'
+      )
+
+      expect(wrapper.find('.bg-danger-100').exists()).toBe(true)
+      expect(wrapper.find('.text-danger-100').exists()).toBe(true)
+    })
+
+    it('applies warning variant styles', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Warning Message',
+          label: 'WARN',
+          variant: 'warning'
+        },
+        'full'
+      )
+
+      expect(wrapper.find('.bg-warning-100').exists()).toBe(true)
+      expect(wrapper.find('.text-warning-100').exists()).toBe(true)
+    })
+
+    it('uses default error icon for error variant', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Error',
+          variant: 'error'
+        },
+        'full'
+      )
+
+      expect(wrapper.find('.pi-exclamation-circle').exists()).toBe(true)
+    })
+
+    it('uses default warning icon for warning variant', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Warning',
+          variant: 'warning'
+        },
+        'full'
+      )
+
+      expect(wrapper.find('.pi-exclamation-triangle').exists()).toBe(true)
+    })
+  })
+
+  describe('popover', () => {
+    it('includes popover component in compact and icon-only modes', () => {
+      const compactWrapper = mountTopbarBadge({}, 'compact')
+      const iconOnlyWrapper = mountTopbarBadge({}, 'icon-only')
+      const fullWrapper = mountTopbarBadge({}, 'full')
+
+      expect(compactWrapper.findComponent(Popover).exists()).toBe(true)
+      expect(iconOnlyWrapper.findComponent(Popover).exists()).toBe(true)
+      expect(fullWrapper.findComponent(Popover).exists()).toBe(false)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('handles badge with only text', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Simple Badge'
+        },
+        'full'
+      )
+
+      expect(wrapper.text()).toContain('Simple Badge')
+      expect(wrapper.find('i').exists()).toBe(false)
+    })
+
+    it('handles custom icon override', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Custom',
+          variant: 'error',
+          icon: 'pi pi-custom-icon'
+        },
+        'full'
+      )
+
+      expect(wrapper.find('.pi-custom-icon').exists()).toBe(true)
+      expect(wrapper.find('.pi-exclamation-circle').exists()).toBe(false)
+    })
+  })
+})