Merge branch 'main' into feature/migrate-primevue-chip

SearchFilterChip (5 tests): badge rendering, semantic class
mapping, remove event, fallback class.
DownloadItem (4 tests): cancelled/error tag display, remove
button, in-progress state, file path label.

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -81,7 +81,10 @@ export class ComfyNodeSearchBox {
   }
 
   async removeFilter(index: number) {
-    await this.filterChips.nth(index).locator('.p-chip-remove-icon').click()
+    await this.filterChips
+      .nth(index)
+      .getByRole('button', { name: 'Remove' })
+      .click()
   }
 
   /**

browser_tests/tests/nodeSearchBox.spec.ts

@@ -127,7 +127,7 @@ test.describe('Node search box', { tag: '@node' }, () => {
       const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
       await comfyPage.canvasOps.disconnectEdge()
       await expect(comfyPage.searchBox.input).toHaveCount(1)
-      await comfyPage.page.locator('.p-chip-remove-icon').click()
+      await comfyPage.searchBox.removeFilter(0)
       await comfyPage.searchBox.fillAndSelectFirstNode('KSampler', {
         exact: true
       })

src/components/common/SearchFilterChip.test.ts

@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SearchFilterChip from './SearchFilterChip.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: { g: { remove: 'Remove' } } }
+})
+
+function renderChip(
+  props: { text: string; badge: string; badgeClass: string },
+  onRemove?: (...args: unknown[]) => void
+) {
+  return render(SearchFilterChip, {
+    props: { ...props, ...(onRemove ? { onRemove } : {}) },
+    global: { plugins: [i18n] }
+  })
+}
+
+describe('SearchFilterChip', () => {
+  it('renders badge and text', () => {
+    renderChip({ text: 'MODEL', badge: 'I', badgeClass: 'i-badge' })
+    expect(screen.getByText('MODEL')).toBeInTheDocument()
+    expect(screen.getByText('I')).toBeInTheDocument()
+  })
+
+  it.each([
+    ['input type', 'I', 'i-badge', 'bg-green-500'],
+    ['output type', 'O', 'o-badge', 'bg-red-500'],
+    ['combo type', 'C', 'c-badge', 'bg-blue-500'],
+    ['seed type', 'S', 's-badge', 'bg-yellow-500']
+  ])(
+    'applies semantic badge class for %s',
+    (_, badgeText, badgeClass, color) => {
+      renderChip({ text: 'CLIP', badge: badgeText, badgeClass })
+      const badge = screen.getByText(badgeText)
+      expect(badge.className).toContain(color)
+    }
+  )
+
+  it('shows remove button and emits remove on click', async () => {
+    const user = userEvent.setup()
+    const onRemove = vi.fn()
+    renderChip({ text: 'MODEL', badge: 'I', badgeClass: 'i-badge' }, onRemove)
+
+    await user.click(screen.getByRole('button', { name: 'Remove' }))
+    expect(onRemove).toHaveBeenCalledOnce()
+  })
+
+  it('falls back to raw badgeClass when no semantic mapping', () => {
+    renderChip({
+      text: 'CUSTOM',
+      badge: 'X',
+      badgeClass: 'custom-class'
+    })
+    const badge = screen.getByText('X')
+    expect(badge.className).toContain('custom-class')
+  })
+})

src/components/common/SearchFilterChip.vue

@@ -1,17 +1,23 @@
 <template>
-  <Chip removable @remove="emit('remove', $event)">
-    <Badge size="small" :class="semanticBadgeClass">
-      {{ badge }}
-    </Badge>
-    {{ text }}
-  </Chip>
+  <Tag
+    :label="text"
+    shape="rounded"
+    removable
+    class="bg-surface-700"
+    @remove="emit('remove', $event)"
+  >
+    <template #icon>
+      <Badge :label="badge" :class="semanticBadgeClass" />
+    </template>
+  </Tag>
 </template>
 
 <script setup lang="ts">
-import Badge from 'primevue/badge'
-import Chip from 'primevue/chip'
 import { computed } from 'vue'
 
+import Badge from '@/components/common/Badge.vue'
+import Tag from '@/components/chip/Tag.vue'
+
 export interface SearchFilter {
   text: string
   badge: string

src/components/searchbox/NodeSearchItem.vue

@@ -37,21 +37,20 @@
         :value="formatNumberWithSuffix(nodeFrequency, { roundToInt: true })"
         severity="secondary"
       />
-      <Chip
+      <ChipTag
         v-if="nodeDef.nodeSource.type !== NodeSourceType.Unknown"
+        :label="nodeDef.nodeSource.displayText"
         class="text-sm font-light"
-      >
-        {{ nodeDef.nodeSource.displayText }}
-      </Chip>
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Chip from 'primevue/chip'
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
 
+import ChipTag from '@/components/chip/Tag.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'

src/components/sidebar/tabs/modelLibrary/DownloadItem.test.ts

@@ -0,0 +1,118 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { createTestingPinia } from '@pinia/testing'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import { DownloadStatus } from '@comfyorg/comfyui-electron-types'
+
+import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
+import type { ElectronDownload } from '@/stores/electronDownloadStore'
+
+import DownloadItem from './DownloadItem.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { remove: 'Remove' },
+      electronFileDownload: {
+        cancelled: 'Cancelled',
+        pause: 'Pause',
+        resume: 'Resume',
+        cancel: 'Cancel',
+        error: 'Error'
+      }
+    }
+  }
+})
+
+function createDownload(
+  status: DownloadStatus,
+  url = 'http://example.com/model.bin'
+): ElectronDownload {
+  return {
+    url,
+    filename: 'model.bin',
+    savePath: '/models/checkpoints/model.bin',
+    status
+  }
+}
+
+function renderDownloadItem(
+  download: ElectronDownload,
+  initialDownloads: ElectronDownload[] = []
+) {
+  const pinia = createTestingPinia({
+    initialState: {
+      downloads: { downloads: initialDownloads }
+    }
+  })
+
+  const view = render(DownloadItem, {
+    props: { download },
+    global: {
+      plugins: [pinia, i18n],
+      stubs: {
+        ProgressBar: true
+      }
+    }
+  })
+
+  return {
+    ...view,
+    electronDownloadStore: useElectronDownloadStore()
+  }
+}
+
+describe('DownloadItem', () => {
+  it('shows cancelled tag with remove button for cancelled downloads', () => {
+    renderDownloadItem(createDownload(DownloadStatus.CANCELLED))
+
+    expect(screen.getByText('Cancelled')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Remove' })).toBeInTheDocument()
+  })
+
+  it('removes cancelled downloads from the store', async () => {
+    const user = userEvent.setup()
+    const cancelledDownload = createDownload(DownloadStatus.CANCELLED)
+    const pausedDownload = createDownload(
+      DownloadStatus.PAUSED,
+      'http://example.com/other-model.bin'
+    )
+    const { electronDownloadStore } = renderDownloadItem(cancelledDownload, [
+      cancelledDownload,
+      pausedDownload
+    ])
+
+    await user.click(screen.getByRole('button', { name: 'Remove' }))
+
+    expect(electronDownloadStore.downloads).toEqual([pausedDownload])
+  })
+
+  it('shows error tag for error downloads', () => {
+    renderDownloadItem(createDownload(DownloadStatus.ERROR))
+
+    expect(screen.getByText('Error')).toBeInTheDocument()
+  })
+
+  it('does not show cancelled tag for in-progress downloads', () => {
+    renderDownloadItem({
+      url: 'http://example.com/model.bin',
+      filename: 'model.bin',
+      savePath: '/models/checkpoints/model.bin',
+      status: DownloadStatus.IN_PROGRESS,
+      progress: 0.5
+    })
+
+    expect(screen.queryByText('Cancelled')).not.toBeInTheDocument()
+    expect(screen.queryByText('Error')).not.toBeInTheDocument()
+  })
+
+  it('displays file path label', () => {
+    renderDownloadItem(createDownload(DownloadStatus.CANCELLED))
+
+    expect(screen.getByText('checkpoints/model.bin')).toBeInTheDocument()
+  })
+})

src/components/sidebar/tabs/modelLibrary/DownloadItem.vue

@@ -4,13 +4,18 @@
       {{ getDownloadLabel(download.savePath ?? '') }}
     </div>
     <div v-if="['cancelled', 'error'].includes(download.status ?? '')">
-      <Chip
-        class="mt-2 h-6 bg-red-700 text-sm font-light"
+      <Tag
+        :label="
+          t(
+            download.status === 'error'
+              ? 'electronFileDownload.error'
+              : 'electronFileDownload.cancelled'
+          )
+        "
+        class="mt-2 bg-red-700 text-sm font-light"
         removable
         @remove="handleRemoveDownload"
-      >
-        {{ t('electronFileDownload.cancelled') }}
-      </Chip>
+      />
     </div>
     <div
       v-if="
@@ -67,10 +72,10 @@
 </template>
 
 <script setup lang="ts">
-import Chip from 'primevue/chip'
 import ProgressBar from 'primevue/progressbar'
 import { useI18n } from 'vue-i18n'
 
+import Tag from '@/components/chip/Tag.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import type { ElectronDownload } from '@/stores/electronDownloadStore'

src/locales/en/main.json

@@ -1200,7 +1200,8 @@
     "paused": "Paused",
     "resume": "Resume Download",
     "cancel": "Cancel Download",
-    "cancelled": "Cancelled"
+    "cancelled": "Cancelled",
+    "error": "Error"
   },
   "maskEditor": {
     "title": "Mask Editor",