mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-07 14:09:59 +00:00
feat: add HoneyToast component for persistent progress notifications (#7902)
## Summary Add HoneyToast, a persistent bottom-anchored notification component for long-running task progress, and migrate existing progress dialogs to use it. ## Changes - **What**: - New `HoneyToast` component with slot-based API, Teleport, transitions, and accessibility - Migrated `ModelImportProgressDialog` to use HoneyToast - Created `ManagerProgressToast` combining the old Header/Content/Footer components - Deleted deprecated `ManagerProgressDialogContent`, `ManagerProgressHeader`, `ManagerProgressFooter`, and `useManagerProgressDialogStore` - Removed no-op `showManagerProgressDialog`/`toggleManagerProgressDialog` functions - Added Storybook stories for HoneyToast and ProgressToastItem ## Review Focus - HoneyToast component design and slot API - ManagerProgressToast self-contained state management (auto-shows when `comfyManagerStore.taskLogs.length > 0`) - Accessibility attributes on the toast component ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7902-feat-add-HoneyToast-component-for-persistent-progress-notifications-2e26d73d365081c78ae6edc5accb326e) by [Unito](https://www.unito.io) --------- 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>
This commit is contained in:
@@ -4,7 +4,6 @@ import type { Ref } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import { app } from '@/scripts/app'
|
||||
import { useDialogService } from '@/services/dialogService'
|
||||
import { normalizePackKeys } from '@/utils/packUtils'
|
||||
import type { components } from '@/workbench/extensions/manager/types/generatedManagerTypes'
|
||||
|
||||
@@ -27,8 +26,6 @@ export const useManagerQueue = (
|
||||
taskQueue: Ref<ManagerTaskQueue>,
|
||||
installedPacks: Ref<Record<string, any>>
|
||||
) => {
|
||||
const { showManagerProgressDialog } = useDialogService()
|
||||
|
||||
// Task queue state (read-only from server)
|
||||
const maxHistoryItems = ref(64)
|
||||
const isLoading = ref(false)
|
||||
@@ -113,15 +110,6 @@ export const useManagerQueue = (
|
||||
(event: CustomEvent<ManagerWsTaskDoneMsg>) => {
|
||||
if (event?.type === MANAGER_WS_TASK_DONE_NAME && event.detail?.state) {
|
||||
updateTaskState(event.detail.state)
|
||||
|
||||
// If no more tasks are running/pending, hide the progress dialog
|
||||
if (allTasksDone.value) {
|
||||
setTimeout(() => {
|
||||
if (allTasksDone.value) {
|
||||
showManagerProgressDialog()
|
||||
}
|
||||
}, 1000) // Small delay to let users see completion
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
@@ -133,9 +121,6 @@ export const useManagerQueue = (
|
||||
(event: CustomEvent<ManagerWsTaskStartedMsg>) => {
|
||||
if (event?.type === MANAGER_WS_TASK_STARTED_NAME && event.detail?.state) {
|
||||
updateTaskState(event.detail.state)
|
||||
|
||||
// Show progress dialog when a task starts
|
||||
showManagerProgressDialog()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user