Skip to content

feat: add HoneyToast component for persistent progress notifications #7902

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DrJKL merged 23 commits into from
Jan 9, 2026
Merged

feat: add HoneyToast component for persistent progress notifications #7902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
50f83a2
chore: add Storybook MCP addon
DrJKL Jan 8, 2026
42d8a69
docs(AGENTS): add Vue 3.4+ and Tailwind best practices
DrJKL Jan 8, 2026
ce9b048
Add HoneyToast component for persistent progress notifications
DrJKL Jan 8, 2026
4d7b1af
Migrate ModelImportProgressDialog to use HoneyToast
DrJKL Jan 8, 2026
e2bd15d
Migrate ManagerProgressDialog to HoneyToast-based ManagerProgressToast
DrJKL Jan 8, 2026
6fd86d7
Remove deprecated ManagerProgress dialog components
DrJKL Jan 8, 2026
f1e648e
Add Storybook stories for HoneyToast and ProgressToastItem
DrJKL Jan 8, 2026
9fc8caa
refactor: remove deprecated showManagerProgressDialog no-ops
DrJKL Jan 8, 2026
a1295e3
chore: remove unused useHoneyToast composable
DrJKL Jan 8, 2026
8edd520
style: use same-name shorthand for slot prop bindings in HoneyToast
DrJKL Jan 8, 2026
45db57d
refactor: replace watch with whenever in ModelImportProgressDialog
DrJKL Jan 8, 2026
75e8c8d
style: update HoneyToast stories to use decorators pattern
DrJKL Jan 8, 2026
72d3507
style: match HoneyToast stories styling to ModelImportProgressDialog
DrJKL Jan 8, 2026
0be8934
refactor: use ProgressToastItem in HoneyToast stories
DrJKL Jan 8, 2026
cf4e2b0
design: Remove one progress, use foreground for the other.
DrJKL Jan 8, 2026
d6468ee
tailwind: Use proper numbers instead of arbitrary values with pixels.
DrJKL Jan 8, 2026
2d62844
Update AGENTS.md
DrJKL Jan 8, 2026
7e69ef6
Update src/workbench/extensions/manager/components/ManagerProgressToa…
DrJKL Jan 8, 2026
16a3046
fix: enable immediate file saving for i18n translations (#7785)
snomiao Jan 8, 2026
32ec1e8
refactor(stories): inline createStorySetup and use createMockJob in C…
DrJKL Jan 8, 2026
f4a829c
Update src/workbench/extensions/manager/components/ManagerProgressToa…
DrJKL Jan 8, 2026
b9d6413
Merge branch 'main' into drjkl/I-do-like-fruit-on-things
DrJKL Jan 8, 2026
701f2e2
[automated] Apply ESLint and Prettier fixes
actions-user Jan 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import type { InlineConfig } from 'vite'

const config: StorybookConfig = {
stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: ['@storybook/addon-docs'],
addons: ['@storybook/addon-docs', '@storybook/addon-mcp'],
framework: {
name: '@storybook/vue3-vite',
options: {}
Expand Down
7 changes: 6 additions & 1 deletion AGENTS.md
View file
Open in desktop
Copy link
Contributor

@luke-mino-altherr luke-mino-altherr Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<3

Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,10 @@ The project uses **Nx** for build orchestration and task management
- Prefer reactive props destructuring to `const props = defineProps<...>`
- Do not use `withDefaults` or runtime props declaration
- Do not import Vue macros unnecessarily
- Prefer `useModel` to separately defining a prop and emit
- Prefer `defineModel` to separately defining a prop and emit for v-model bindings
- Define slots via template usage, not `defineSlots`
- Use same-name shorthand for slot prop bindings: `:isExpanded` instead of `:is-expanded="isExpanded"`
Copy link
Contributor

@christian-byrne christian-byrne Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai is there a linter rule for this?

Copy link
Contributor

@coderabbitai coderabbitai bot Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check the ESLint configuration file
cat eslint.config.ts

Length of output: 7757

🏁 Script executed:

#!/bin/bash
# Search for any existing rules related to defineModel, defineSlots, or prop shorthand
rg -i "defineModel|defineSlots|shorthand" eslint.config.ts

Length of output: 0

🏁 Script executed:

#!/bin/bash
# Check if there are Vue-specific ESLint rules configured
rg -A5 "plugin.*vue|vue.*plugin" eslint.config.ts

Length of output: 759

🏁 Script executed:

#!/bin/bash
# Check available vue ESLint rules in node_modules to see if rules exist for these guidelines
fd -t f "index.js" node_modules/eslint-plugin-vue/lib/rules --exec head -1 {} \; | head -20

Length of output: 127

🏁 Script executed:

#!/bin/bash
# List all available vue eslint rules
fd -t f ".js$" node_modules/eslint-plugin-vue/lib/rules -x basename {} .js | sort

Length of output: 127

🏁 Script executed:

#!/bin/bash
# Search for defineModel-related rules in the vue plugin
rg -i "defineModel|define-model" node_modules/eslint-plugin-vue/lib/rules/ --type js -l

Length of output: 81

🏁 Script executed:

#!/bin/bash
# Search for slot-related rules
rg -i "slot.*shorthand|v-slot.*shorthand" node_modules/eslint-plugin-vue/lib/rules/ --type js -l

Length of output: 81

🌐 Web query:

eslint-plugin-vue defineModel rule

💡 Result:

There’s no standalone “defineModel” rule; handling of defineModel (the compiler macro) is covered by the vue/define-macros-order rule (which lets you enforce the order of compiler macros in <script setup>) and by deprecation/validation rules for model definitions. Example:

  • rule: vue/define-macros-order — enforces order of macros and accepts a custom order array (you can include "defineModel" in that order). Configure like:
    {
    "vue/define-macros-order": ["error", { "order": ["defineOptions","defineModel","defineProps","defineEmits","defineSlots"] }]
    }
    [1]

  • rule: vue/no-deprecated-model-definition — flags use of the deprecated component model option (Vue 3) and has an allowVue3Compat option. [2]

Sources:
[1] eslint-plugin-vue — vue/define-macros-order documentation.
[2] eslint-plugin-vue — vue/no-deprecated-model-definition documentation.

🌐 Web query:

eslint-plugin-vue v-slot shorthand directive rule

💡 Result:

Rule: vue/v-slot-style — enforces v-slot directive style (shorthand #, longform v-slot:, or plain v-slot). Options: atComponent, default, named (each "shorthand" | "longform" | "v-slot") or a single "shorthand"/"longform" preset. Introduced in eslint-plugin-vue v6.0.0. Example: use <template #default> or per your option. [1][2]

Sources:
[1] eslint-plugin-vue — vue/v-slot-style (rule docs).
[2] eslint-plugin-vue — rules list (index).

🌐 Web query:

eslint-plugin-vue defineSlots rule enforce

💡 Result:

Short answer: eslint-plugin-vue enforces defineSlots usage via multiple rules:

  • Order in <script setup>: vue/define-macros-order — can require defineSlots to appear (and where) among macros (configurable "order"). [1]
  • Macro variable name: vue/require-macro-variable-name — can require the return of defineSlots be named (e.g. slots). [2]
  • Feature availability: vue/no-unsupported-features includes "define-slots" so you can flag usage if your target Vue version doesn’t support it. [3]
  • There is also a rule added to require explicit slots: vue/require-explicit-slots (introduced v9.21.0) which requires slots to be explicitly defined with defineSlots or the slots option. [4]

Examples / config pointers:

  • Enforce macros order (default):
    { "vue/define-macros-order": ["error", { "order": ["defineProps","defineEmits","defineSlots"] }] }. [1]
  • Enforce macro variable name:
    { "vue/require-macro-variable-name": ["error", { "defineSlots":"slots" }] }. [2]

Sources: eslint-plugin-vue docs for vue/define-macros-order, vue/require-macro-variable-name, vue/no-unsupported-features, and changelog noting require-explicit-slots. [1][2][3][4]

🌐 Web query:

eslint-plugin-vue attribute shorthand same name binding rule

💡 Result:

There’s a dedicated rule in eslint-plugin-vue: vue/v-bind-style — it enforces v-bind shorthand vs longform and (since recent releases) includes a sameNameShorthand option to control the Vue 3.4+ same-name shorthand (:foo when the variable is named foo).

  • Rule docs (options): "shorthand" | "longform" and sameNameShorthand: "ignore" | "always" | "never". [1]
  • If you need to allow or disallow the Vue 3.4 same-name shorthand globally, set sameNameShorthand accordingly. Example:
    {
    "vue/v-bind-style": ["error", "shorthand", { "sameNameShorthand": "always" }]
    }
    [1]
  • If using features from Vue 3.4 you may also need to allow them in vue/no-unsupported-features (the rule’s "ignores" can include "v-bind-same-name-shorthand"). [2]
  • The option was added in recent plugin releases (see changelog). [3]

Sources:
[1] eslint-plugin-vue — vue/v-bind-style docs.
[2] eslint-plugin-vue — vue/no-unsupported-features docs.
[3] eslint-plugin-vue changelog / release notes.

@christian-byrne Unfortunately, only one of the three guidelines has a linter rule available:

1. ✅ Same-name shorthand (:isExpanded instead of :is-expanded="isExpanded")

Rule: vue/v-bind-style with sameNameShorthand: "always"

This can be added to your eslint.config.ts:

rules: {
  'vue/v-bind-style': ['error', 'shorthand', { sameNameShorthand: 'always' }],
  // ... other rules
}

2. ❌ Prefer defineModel over separate prop and emit

No direct rule exists. The vue/define-macros-order rule can enforce the order of macros if defineModel is used, but it won't flag cases where you use separate defineProps + defineEmits instead of defineModel.

3. ❌ Define slots via template usage, not defineSlots

No rule to enforce this. Interestingly, vue/require-explicit-slots does the opposite—it requires explicit defineSlots declarations. Your guideline intentionally goes against this pattern.

Recommendation: Add the vue/v-bind-style rule to automatically enforce the same-name shorthand. The other two guidelines will need to be caught during code review.

🧠 Learnings used 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-08T22:30:03.686Z
Learning: Applies to **/*.vue : Prefer useModel over separate prop and emit definitions in Vue components

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-08T22:30:03.686Z
Learning: Applies to **/*.vue : Be judicious with addition of new refs and state in Vue; use props directly, computed instead of watch, useModel instead of prop+emit when appropriate

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guide

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Define proper props and emits definitions in Vue components

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Implement proper props and emits definitions

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Follow Vue 3 style guide and naming conventions

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-08T22:30:03.686Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Use VueUse functions for performance-enhancing styles

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-08T22:30:03.686Z
Learning: Applies to **/*.vue : Use default prop declaration with destructuring in Vue 3.5 TypeScript style; avoid withDefaults and runtime props

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-08T22:30:03.686Z
Learning: Applies to **/*.{ts,tsx,vue} : Watch out for Code Smells and refactor to avoid them

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-08T22:30:03.686Z
Learning: Applies to **/*.vue : Use Tailwind 4 for styling; avoid <style> blocks in Vue components

- Derive component types using `vue-component-type-helpers` (`ComponentProps`, `ComponentSlots`) instead of separate type files
- Be judicious with addition of new refs or other state
- If it's possible to accomplish the design goals with just a prop, don't add a `ref`
- If it's possible to use the `ref` or prop directly, don't add a `computed`
Expand Down Expand Up @@ -271,6 +274,8 @@ When referencing Comfy-Org repos:
- Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value
- NEVER use `!important` or the `!` important prefix for tailwind classes
- Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
- NEVER use arbitrary percentage values like `w-[80%]` when a Tailwind fraction utility exists
- Use `w-4/5` instead of `w-[80%]`, `w-1/2` instead of `w-[50%]`, etc.

## Agent-only rules

Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@
"@prettier/plugin-oxc": "catalog:",
"@sentry/vite-plugin": "catalog:",
"@storybook/addon-docs": "catalog:",
"@storybook/addon-mcp": "catalog:",
"@storybook/vue3": "catalog:",
"@storybook/vue3-vite": "catalog:",
"@tailwindcss/vite": "catalog:",
Expand Down
134 changes: 133 additions & 1 deletion pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions pnpm-workspace.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ catalog:
'@sentry/vue': ^10.32.1
'@sparkjsdev/spark': ^0.1.10
'@storybook/addon-docs': ^10.1.9
'@storybook/addon-mcp': 0.1.6
'@storybook/vue3': ^10.1.9
'@storybook/vue3-vite': ^10.1.9
'@tailwindcss/vite': ^4.1.12
Expand Down
Loading
Loading