[backport cloud/1.36] feat: add HoneyToast component for persistent progress notifications (#7918)

Backport of #7902 to cloud/1.36

Original PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/7902

Cherry-picked merge commit e26e1f0c9e.

## Conflicts resolved
- **pnpm-lock.yaml**: Regenerated with `pnpm install`
-
**tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts**:
Removed (PR deletes this file along with the component it tested)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7918-backport-cloud-1-36-feat-add-HoneyToast-component-for-persistent-progress-notification-2e36d73d3650811a9f57f26c56b84c97)
by [Unito](https://www.unito.io)

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: sno <snomiao@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: GitHub Action <action@github.com>

src/components/toast/ProgressToastItem.stories.ts

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { AssetDownload } from '@/stores/assetDownloadStore'
+
+import ProgressToastItem from './ProgressToastItem.vue'
+
+const meta: Meta<typeof ProgressToastItem> = {
+  title: 'Toast/ProgressToastItem',
+  component: ProgressToastItem,
+  parameters: {
+    layout: 'padded'
+  },
+  decorators: [
+    () => ({
+      template: '<div class="w-[400px] bg-base-background p-4"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function createMockJob(overrides: Partial<AssetDownload> = {}): AssetDownload {
+  return {
+    taskId: 'task-1',
+    assetId: 'asset-1',
+    assetName: 'model-v1.safetensors',
+    bytesTotal: 1000000,
+    bytesDownloaded: 0,
+    progress: 0,
+    status: 'created',
+    ...overrides
+  }
+}
+
+export const Pending: Story = {
+  args: {
+    job: createMockJob({
+      status: 'created',
+      assetName: 'sd-xl-base-1.0.safetensors'
+    })
+  }
+}
+
+export const Running: Story = {
+  args: {
+    job: createMockJob({
+      status: 'running',
+      progress: 0.45,
+      assetName: 'lora-detail-enhancer.safetensors'
+    })
+  }
+}
+
+export const RunningAlmostComplete: Story = {
+  args: {
+    job: createMockJob({
+      status: 'running',
+      progress: 0.92,
+      assetName: 'vae-ft-mse-840000.safetensors'
+    })
+  }
+}
+
+export const Completed: Story = {
+  args: {
+    job: createMockJob({
+      status: 'completed',
+      progress: 1,
+      assetName: 'controlnet-canny.safetensors'
+    })
+  }
+}
+
+export const Failed: Story = {
+  args: {
+    job: createMockJob({
+      status: 'failed',
+      progress: 0.23,
+      assetName: 'unreachable-model.safetensors'
+    })
+  }
+}
+
+export const LongFileName: Story = {
+  args: {
+    job: createMockJob({
+      status: 'running',
+      progress: 0.67,
+      assetName:
+        'very-long-model-name-with-lots-of-descriptive-text-v2.1-final-release.safetensors'
+    })
+  }
+}

src/components/toast/ProgressToastItem.vue

@@ -30,9 +30,7 @@ const isPending = computed(() => job.status === 'created')
   >
     <div class="flex flex-col">
       <span class="text-sm text-base-foreground">{{ job.assetName }}</span>
-      <span v-if="isRunning" class="text-xs text-muted-foreground">
-        {{ progressPercent }}%
-      </span>
+      <span v-if="isRunning" class="text-xs text-muted-foreground"> </span>
     </div>
 
     <div class="flex items-center gap-2">
@@ -49,9 +47,9 @@ const isPending = computed(() => job.status === 'created')
 
       <template v-else-if="isRunning">
         <i
-          class="icon-[lucide--loader-circle] size-4 animate-spin text-primary-background"
+          class="icon-[lucide--loader-circle] size-4 animate-spin text-base-foreground"
         />
-        <span class="text-xs text-primary-background">
+        <span class="text-xs text-base-foreground">
           {{ progressPercent }}%
         </span>
       </template>