style: update ui and design of system notification components (what's new, new release notification, help center) #6300
Conversation
christian-byrne
requested review from
a team,
KarryCharon,
Yorha4D and
shinshin86
as code owners
dosubot
bot
added
the
size:L
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/09/2025, 05:08:51 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 12/09/2025, 05:18:11 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.21 MB (baseline 3.21 MB) • 🔴 +502 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 982 kB (baseline 978 kB) • 🔴 +3.94 kBGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 177 kB (baseline 177 kB) • ⚪ 0 BReusable component library chunks
Status: 6 added / 6 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 3.18 kB (baseline 3.18 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.81 MB (baseline 3.81 MB) • ⚪ 0 BBundles that do not match a named category
Status: 17 added / 17 removed |
christian-byrne
added
claude-review
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
github-actions
bot
removed
the
claude-review
christian-byrne
force-pushed
the
style/whatsnew-light-mode
branch
from
d9eef91 to
f62a5e4
Compare
dosubot
bot
added
size:XXL
christian-byrne
force-pushed
the
style/whatsnew-light-mode
branch
from
467de81 to
e7a6eae
Compare
|
Warning Rate limit exceeded@christian-byrne has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 13 minutes and 29 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (4)
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughReworked release notifications (toast and popup) UI/behavior, refactored Help Center menu and locale keys, added new design-system tokens, replaced a browser test CSS selector with a test-id, added stories and unit tests for release components, and removed a legacy UI test file. Changes
Possibly related PRs
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/platform/updates/components/ReleaseNotificationToast.stories.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Minimize the surface area (exported values) of each module and composable
Use es-toolkit for utility functions
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
src/**/*.{ts,tsx,vue}: Write expressive and self-documenting code to reduce the need for comments; clean redundant comments as you go
Consider if there is a simpler way to introduce functionality before writing code; choose the simpler approach when possible
Use refactoring to make complex code simpler
Keep functions short and functional
Minimize nesting in code (e.g.,if () { ... }orfor () { ... }) to avoid arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions (especially testable ones)
Watch out for code smells and refactor to avoid them
Implement proper error handling in code
If a complex type definition is inlined in multiple related places, extract and name it for reuse
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
**/*.{js,ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively (no new JavaScript)
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Do not useanytype in TypeScript code
Do not useas anytype assertions in TypeScript code; fix the underlying type issue
Style formatting: 2 space indent, single quotes, no trailing semicolons, 80 character width
Import statements should be sorted and grouped by plugin; runpnpm formatbefore committing
ESLint rules: no floating promises, no unused imports, i18n raw text restrictions in templates
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use vue-i18n in Composition API for string literals and place new translation entries in
src/locales/en/main.json
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
🧠 Learnings (9)
📓 Common learnings
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,css} : Use the correct tokens from style.css in the design system package
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Use `vitest` for unit testing in this project
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocks
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,tsx,vue} : ESLint rules: no floating promises, no unused imports, i18n raw text restrictions in templates
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Prefer the use of `test.extend` over loose variables; import `test as baseTest` from `vitest`
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
📚 Learning: 2025-11-24T19:47:02.860Z
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} : Implement proper error handling
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.test.ts : Use Vitest with happy-dom for unit and component tests
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
📚 Learning: 2025-11-24T19:47:34.324Z
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
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.stories.ts
🧬 Code graph analysis (1)
src/platform/updates/components/ReleaseNotificationToast.stories.ts (1)
src/platform/updates/common/releaseService.ts (1)
ReleaseNote(10-10)
src/platform/updates/components/ReleaseNotificationToast.stories.ts
Outdated
Show resolved
Hide resolved
- Add proper semantic design tokens (corner-radius, blue surface) - Convert hardcoded colors to theme-aware tokens in toast and popup - Implement Figma-compliant styling with image support - Add comprehensive component tests for behavioral validation - Update translation strings for improved UI copy
- Remove temporary mock data from WhatsNewPopup component - Fix i18n mocking issues in both test suites - Fix TypeScript errors with vi.mocked calls - Update failing tests to use direct method calls instead of DOM events - Remove duplicate/outdated test file - All 22 tests now passing
…se notifications - Replace hardcoded colors with semantic design tokens (bg-primary-background-hover, bg-secondary-background) - Add proper height constraints and scrolling for long content in toast - Remove image support from toast component (design requirement) - Fix empty content handling - components don't show when no meaningful content - Add comprehensive Storybook stories for both WhatsNewPopup and ReleaseNotificationToast - Fix TypeScript errors by updating mock data with required ReleaseNote properties - Clean up redundant CSS and remove development console.log statements - Ensure proper markdown rendering with bullet points using dash syntax
…ling - Update test selectors to match new Tailwind-based template structure - Fix component behavior to show fallback content instead of disappearing - Add proper mock setup for tests requiring shouldShow state - Update button and link selectors for new component structure - Fix TypeScript error with undefined button reference Components now gracefully handle empty content by showing meaningful fallback messages instead of returning null.
Add DOMPurify sanitization to HTML content rendered via v-html in both: - ReleaseNotificationToast.vue: Sanitize all HTML output including fallback content - WhatsNewPopup.vue: Sanitize fallback and error HTML content Markdown content is already sanitized by renderMarkdownToHtml utility.
- Consolidate duplicate translation mocks in WhatsNewPopup.test.ts - Fix type assertion in test with proper typing approach - Replace hardcoded bg-gray-900 with semantic color token - Fix Object.defineProperty store mocking approach using - Use Tailwind utility classes instead of inline styles - Add i18n for relative time strings in formatReleaseDate - Use design system Button for footer actions consistently
…rolling - Remove update button from WhatsNewPopup since it's shown AFTER updating - Remove handleCTA function and related translation key - Add max-h-96 and overflow-y-auto to content for consistency with toast - Update test mocks to remove update-related references The WhatsNewPopup is displayed after a user has already updated, so having an "Update" button is inappropriate and confusing. Also added scrolling capability to match the behavior of ReleaseNotificationToast.
- Remove image content from ReleaseNotificationToast stories since component strips images - Rename 'WithImage' to 'MajorRelease' for clarity - Rename 'MajorRelease' to 'ExtensiveFeatures' to avoid confusion - Stories now accurately reflect toast component's text-only design
christian-byrne
force-pushed
the
style/whatsnew-light-mode
branch
from
914eaeb to
468335c
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/components/helpcenter/HelpCenterMenuContent.vue (1)
464-488: Avoid raw'date'fallback; use i18n for all user-facing strings.
formatReleaseDatereturns the literal'date'whendateStringis missing, which bypasses vue-i18n and contradicts the repo’s “no raw text” guidance in TS as well.Consider instead:
- Returning an i18n key, e.g.
t('g.relativeTime.now'), or- Adding a dedicated key like
g.relativeTime.unknown/helpCenter.unknownDateand using that here.This keeps behavior localized and consistent with the rest of the component.
src/platform/updates/components/ReleaseNotificationToast.vue (1)
138-153: Add timer cleanup on component unmount to prevent memory leaks.The
hideTimeris not cleared when the component unmounts. If the component is destroyed while the timer is active, it could attempt to update state on an unmounted component.-import { computed, onMounted, ref, watch } from 'vue' +import { computed, onMounted, onUnmounted, ref, watch } from 'vue'Then add cleanup in the script:
+onUnmounted(() => { + clearAutoHide() +}) + // Initialize on mount onMounted(async () => {
♻️ Duplicate comments (8)
src/components/helpcenter/HelpCenterMenuContent.vue (1)
656-663: Use a semantic text token instead of palette token for section heading.
.section-descriptioncurrently usescolor: var(--color-stone-100);, which is a palette token. For text, the design-system guidelines prefer semantic tokens (e.g.,var(--text-secondary)/var(--text-primary)/ similar), so typography adapts correctly across themes.Update this to use the appropriate semantic text token from
style.cssto stay aligned with the design system.src/platform/updates/components/WhatsNewPopup.test.ts (2)
57-60: Avoidas anywhen calling exposed methods; type the wrapper instead.
await (wrapper.vm as any).closePopup()bypasses type checking and goes against the no-anyguidance.You can keep this type-safe by:
- Typing the wrapper with the component instance, then calling
closePopupdirectly:-import type { VueWrapper } from '@vue/test-utils' +import type { VueWrapper } from '@vue/test-utils' @@ -describe('WhatsNewPopup', () => { - let wrapper: VueWrapper +describe('WhatsNewPopup', () => { + let wrapper: VueWrapper<InstanceType<typeof WhatsNewPopup>> @@ - // Call the close method directly instead of triggering DOM event - await (wrapper.vm as any).closePopup() + // Call the close method directly instead of triggering DOM event + await wrapper.vm.closePopup()This leverages the public instance type that includes
closePopupviadefineExpose.Also applies to: 80-85, 148-161
80-85: ResetmockReleaseStore.releasesinbeforeEachto avoid hidden state coupling.
mockReleaseStore.releasesis mutated in some tests but not reset inbeforeEach, so later tests may see leftover data depending on run order. It’s safer to reset it alongside the other store fields:beforeEach(() => { vi.clearAllMocks() // Reset store state mockReleaseStore.recentRelease = null mockReleaseStore.shouldShowPopup = false + mockReleaseStore.releases = [] })This keeps each test isolated and easier to reason about.
src/platform/updates/components/ReleaseNotificationToast.stories.ts (2)
69-69: Do not usevi.spyOninside Storybook decorators; it will break in the browser.The decorator calls
vi.spyOn(releaseStore, 'shouldShowToast', 'get'), but:
viisn’t imported in this file, and- Vitest APIs are not available at runtime in Storybook’s browser environment.
This will cause runtime errors when the story loads.
Refactor to a Storybook‑safe pattern, for example:
- decorators: [ - (_story, context) => { + decorators: [ + (_, context) => { // Set up the store with mock data for this story const releaseStore = useReleaseStore() // Patch store state directly for Storybook releaseStore.$patch({ releases: [context.args.releaseData] }) - // Mock shouldShowToast getter - vi.spyOn(releaseStore, 'shouldShowToast', 'get').mockReturnValue(true) + // Override shouldShowToast getter for Storybook + Object.defineProperty(releaseStore, 'shouldShowToast', { + get: () => true, + configurable: true + })This avoids any dependency on Vitest in Storybook while still forcing the toast to be shown.
Also applies to: 82-93
82-83: Optional: simplify the unused_storyparameter.The first decorator parameter isn’t used; you can rename it to
_to make that explicit and satisfy some linters:- decorators: [ - (_story, context) => { + decorators: [ + (_, context) => {src/platform/updates/components/WhatsNewPopup.vue (3)
32-32: Fixrelattribute separator syntax.The
relattribute values should be space-separated, not comma-separated per HTML specification.- rel="noopener,noreferrer" + rel="noopener noreferrer"
97-133: Hardcoded English strings should use i18n.Per coding guidelines, all user-facing strings must use vue-i18n. The string "No release notes available." appears three times (lines 99, 108, 131).
Add the i18n key to
src/locales/en/main.json:{ "whatsNewPopup": { "noReleaseNotes": "No release notes available." } }Then update the component:
+import { useI18n } from 'vue-i18n' import { computed, onMounted, ref } from 'vue' +const { t } = useI18n() const formattedContent = computed(() => { if (!latestRelease.value?.content) { - return DOMPurify.sanitize(`<p>No release notes available.</p>`) + return DOMPurify.sanitize(`<p>${t('whatsNewPopup.noReleaseNotes')}</p>`) } // ... apply same pattern to lines 108 and 131
55-56: Remove PrimeVue Button import when refactoring to native buttons.If you adopt the native button approach suggested above, remove this import:
import { default as DOMPurify } from 'dompurify' -import Button from 'primevue/button' import { computed, onMounted, ref } from 'vue'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (11)
browser_tests/tests/releaseNotifications.spec.ts(7 hunks)packages/design-system/src/css/style.css(4 hunks)src/components/helpcenter/HelpCenterMenuContent.vue(15 hunks)src/locales/en/main.json(5 hunks)src/platform/updates/components/ReleaseNotificationToast.stories.ts(1 hunks)src/platform/updates/components/ReleaseNotificationToast.test.ts(1 hunks)src/platform/updates/components/ReleaseNotificationToast.vue(4 hunks)src/platform/updates/components/WhatsNewPopup.stories.ts(1 hunks)src/platform/updates/components/WhatsNewPopup.test.ts(1 hunks)src/platform/updates/components/WhatsNewPopup.vue(6 hunks)tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts(0 hunks)
💤 Files with no reviewable changes (1)
- tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts
🧰 Additional context used
📓 Path-based instructions (17)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.tssrc/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/ReleaseNotificationToast.test.tssrc/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.test.tssrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Minimize the surface area (exported values) of each module and composable
Use es-toolkit for utility functions
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.tssrc/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/ReleaseNotificationToast.test.tssrc/platform/updates/components/WhatsNewPopup.test.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
src/**/*.{ts,tsx,vue}: Write expressive and self-documenting code to reduce the need for comments; clean redundant comments as you go
Consider if there is a simpler way to introduce functionality before writing code; choose the simpler approach when possible
Use refactoring to make complex code simpler
Keep functions short and functional
Minimize nesting in code (e.g.,if () { ... }orfor () { ... }) to avoid arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions (especially testable ones)
Watch out for code smells and refactor to avoid them
Implement proper error handling in code
If a complex type definition is inlined in multiple related places, extract and name it for reuse
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.tssrc/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/ReleaseNotificationToast.test.tssrc/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.test.tssrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.tssrc/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/ReleaseNotificationToast.test.tssrc/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.test.tssrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.tssrc/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/ReleaseNotificationToast.test.tssrc/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.test.tssrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.tssrc/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/ReleaseNotificationToast.test.tssrc/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.test.tssrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
**/*.{js,ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively (no new JavaScript)
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.tssrc/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/ReleaseNotificationToast.test.tsbrowser_tests/tests/releaseNotifications.spec.tssrc/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.test.tssrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Do not useanytype in TypeScript code
Do not useas anytype assertions in TypeScript code; fix the underlying type issue
Style formatting: 2 space indent, single quotes, no trailing semicolons, 80 character width
Import statements should be sorted and grouped by plugin; runpnpm formatbefore committing
ESLint rules: no floating promises, no unused imports, i18n raw text restrictions in templates
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.tssrc/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/ReleaseNotificationToast.test.tsbrowser_tests/tests/releaseNotifications.spec.tssrc/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.test.tssrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use vue-i18n in Composition API for string literals and place new translation entries in
src/locales/en/main.json
Files:
src/platform/updates/components/ReleaseNotificationToast.stories.tssrc/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/ReleaseNotificationToast.test.tsbrowser_tests/tests/releaseNotifications.spec.tssrc/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.test.tssrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
**/*.test.ts
📄 CodeRabbit inference engine (AGENTS.md)
**/*.test.ts: Write unit and component tests in**/*.test.ts
Use Vitest with happy-dom for unit and component tests
Files:
src/platform/updates/components/ReleaseNotificationToast.test.tssrc/platform/updates/components/WhatsNewPopup.test.ts
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (browser_tests/CLAUDE.md)
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}: Test user workflows in browser tests
Use Playwright fixtures for browser tests
Follow naming conventions for browser tests
Check assets/ directory for test data when writing tests
Prefer specific selectors in browser tests
Test across multiple viewports
Files:
browser_tests/tests/releaseNotifications.spec.ts
browser_tests/**/*.spec.ts
📄 CodeRabbit inference engine (AGENTS.md)
Write E2E tests in
browser_tests/**/*.spec.tsusing Playwright
Files:
browser_tests/tests/releaseNotifications.spec.ts
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
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)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs with Composition API only (.vuefiles)
Use Tailwind 4 styling and avoid<style>blocks in Vue components
Use<script setup lang="ts">for component logic in Vue components
Use Vue 3.5 TypeScript style of default prop declaration with reactive props destructuring
Do not usewithDefaultsor runtime props declaration in Vue components
PreferuseModelto separately defining a prop and emit in Vue components
Usereffor reactive state in Vue components
Implement computed properties withcomputed()instead of usingrefandwatch
UsewatchandwatchEffectfor side effects in Vue components
Useprovide/injectfor dependency injection only when simpler alternatives (Store or composable) are not suitable
Do not use thedark:Tailwind variant; use semantic values fromstyle.csstheme instead (e.g.,bg-node-component-surface)
Useimport { cn } from '@/utils/tailwindUtil'to merge class names instead of:class="[]"
Avoid new usage of PrimeVue components
Use VueUse functions for performance-enhancing styles in Vue components
Do not import Vue macros unnecessarily in components
Be judicious with addition of new refs or other state; prefer using props or composables when possible
Do not add acomputedif it's possible to use arefor prop directly
Do not use awatchif acomputedwould work instead
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsName Vue components in PascalCase (e.g.,
MenuHamburger.vue)
Files:
src/components/helpcenter/HelpCenterMenuContent.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/helpcenter/HelpCenterMenuContent.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/helpcenter/HelpCenterMenuContent.vue
🧠 Learnings (61)
📓 Common learnings
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Check tests-ui/README.md for test guidelines
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocks
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.stories.tssrc/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/ReleaseNotificationToast.test.tssrc/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possible
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.stories.tssrc/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/ReleaseNotificationToast.test.tssrc/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in tests
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.stories.tssrc/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/ReleaseNotificationToast.test.tssrc/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-11-24T19:47:34.324Z
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/**/stores/**/*.{ts,tsx} : Maintain clear public interfaces and restrict extension access in stores
Applied to files:
src/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/stores/*Store.ts : Name Pinia stores as `*Store.ts`
Applied to files:
src/platform/updates/components/WhatsNewPopup.stories.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Avoid mutable state; prefer immutability and assignment at point of declaration
Applied to files:
src/platform/updates/components/WhatsNewPopup.stories.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features
Applied to files:
src/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/ReleaseNotificationToast.test.tsbrowser_tests/tests/releaseNotifications.spec.tssrc/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Follow existing test patterns in the codebase
Applied to files:
src/platform/updates/components/WhatsNewPopup.stories.tssrc/platform/updates/components/ReleaseNotificationToast.test.tsbrowser_tests/tests/releaseNotifications.spec.tssrc/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Favor pure functions (especially testable ones)
Applied to files:
src/platform/updates/components/WhatsNewPopup.stories.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Watch out for code smells and refactor to avoid them
Applied to files:
src/platform/updates/components/WhatsNewPopup.stories.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Check tests-ui/README.md for test guidelines
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.tsbrowser_tests/tests/releaseNotifications.spec.tssrc/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.test.ts : Write unit and component tests in `**/*.test.ts`
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.tssrc/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Write tests for all changes, especially bug fixes to catch future regressions
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Use existing test utilities rather than writing custom utilities
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.tsbrowser_tests/tests/releaseNotifications.spec.tssrc/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Follow naming conventions for browser tests
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.tsbrowser_tests/tests/releaseNotifications.spec.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Prefer specific selectors in browser tests
Applied to files:
browser_tests/tests/releaseNotifications.spec.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Check assets/ directory for test data when writing tests
Applied to files:
browser_tests/tests/releaseNotifications.spec.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to browser_tests/**/*.spec.ts : Write E2E tests in `browser_tests/**/*.spec.ts` using Playwright
Applied to files:
browser_tests/tests/releaseNotifications.spec.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test user workflows in browser tests
Applied to files:
browser_tests/tests/releaseNotifications.spec.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Use Playwright fixtures for browser tests
Applied to files:
browser_tests/tests/releaseNotifications.spec.ts
📚 Learning: 2025-11-24T19:47:34.324Z
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/**/*.{ts,tsx,vue} : Sanitize HTML with DOMPurify to prevent XSS attacks
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:34.324Z
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/**/{components,composables}/**/*.{ts,tsx,vue} : Use vue-i18n for ALL user-facing strings by adding them to `src/locales/en/main.json`
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:45.616Z
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,ts,js} : Use vue-i18n for ALL UI strings
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:02.860Z
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} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,vue} : Use vue-i18n in Composition API for string literals and place new translation entries in `src/locales/en/main.json`
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-12-05T20:35:28.330Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/locales/en/main.json:2257-2272
Timestamp: 2025-12-05T20:35:28.330Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, vue-i18n pluralization uses a two-parameter pattern: `t('key', { count: value })` where the `count` property in the interpolation object automatically triggers plural selection from pipe-separated locale strings (e.g., "no items | 1 item | {count} items"). This is the correct pattern used throughout the codebase, as validated by Playwright tests.
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,tsx,vue} : ESLint rules: no floating promises, no unused imports, i18n raw text restrictions in templates
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.vuesrc/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test across multiple viewports
Applied to files:
src/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.test.ts : Use Vitest with happy-dom for unit and component tests
Applied to files:
src/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-11-24T19:47:34.324Z
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/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaks
Applied to files:
src/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Prefer the use of `test.extend` over loose variables; import `test as baseTest` from `vitest`
Applied to files:
src/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
src/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,tsx,vue} : Do not use `as any` type assertions in TypeScript code; fix the underlying type issue
Applied to files:
src/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,tsx,vue} : Do not use `any` type in TypeScript code
Applied to files:
src/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-11-24T19:47:34.324Z
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/**/*.{ts,tsx,vue} : Avoid using ts-expect-error; use proper TypeScript types instead
Applied to files:
src/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-12-06T02:11:00.366Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/rightSidePanel/RightSidePanel.vue:174-180
Timestamp: 2025-12-06T02:11:00.366Z
Learning: PrimeVue components have poor TypeScript typing, so type assertions (like `as RightSidePanelTab`) may be necessary when handling emitted events or prop values from PrimeVue components like TabList.
Applied to files:
src/platform/updates/components/WhatsNewPopup.test.ts
📚 Learning: 2025-11-24T19:47:45.616Z
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 : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/platform/updates/components/WhatsNewPopup.test.tssrc/platform/updates/components/WhatsNewPopup.vue
📚 Learning: 2025-11-24T19:47:45.616Z
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 : Replace PrimeVue InlineMessage component with Message
Applied to files:
src/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:45.616Z
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 : Replace PrimeVue InputSwitch component with ToggleSwitch
Applied to files:
src/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Avoid new usage of PrimeVue components
Applied to files:
src/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:45.616Z
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 : Replace PrimeVue Calendar component with DatePicker
Applied to files:
src/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:45.616Z
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 : Replace PrimeVue Dropdown component with Select
Applied to files:
src/platform/updates/components/WhatsNewPopup.vue
📚 Learning: 2025-11-24T19:47:45.616Z
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 : Replace PrimeVue Steps component with Stepper without panels
Applied to files:
src/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Do not use the `dark:` Tailwind variant; use semantic values from `style.css` theme instead (e.g., `bg-node-component-surface`)
Applied to files:
src/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:45.616Z
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,css} : Use the correct tokens from style.css in the design system package
Applied to files:
src/platform/updates/components/WhatsNewPopup.vuepackages/design-system/src/css/style.csssrc/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:45.616Z
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 : Replace PrimeVue Sidebar component with Drawer
Applied to files:
src/platform/updates/components/WhatsNewPopup.vue
📚 Learning: 2025-11-24T19:47:45.616Z
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 : Replace PrimeVue TabMenu component with Tabs without panels
Applied to files:
src/platform/updates/components/WhatsNewPopup.vuesrc/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:45.616Z
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 : Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Applied to files:
src/platform/updates/components/WhatsNewPopup.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Use `import { cn } from '@/utils/tailwindUtil'` to merge class names instead of `:class="[]"`
Applied to files:
src/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-12-04T22:01:48.135Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/LiteGraphCanvasSplitterOverlay.vue:2-4
Timestamp: 2025-12-04T22:01:48.135Z
Learning: In Tailwind CSS v4, z-index utilities support direct numeric values without brackets. For example, `z-999` generates `z-index: 999;` automatically. This is different from v3 which required bracket syntax `z-[999]` for arbitrary values.
Applied to files:
src/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:02.860Z
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 Tailwind CSS for styling
Applied to files:
src/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-12-01T23:45:28.610Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7084
File: src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue:23-26
Timestamp: 2025-12-01T23:45:28.610Z
Learning: Tailwind CSS supports arbitrary fractional width utilities beyond the common predefined ones. For example, `w-5/2` is valid syntax that represents 250% width (5÷2 = 2.5 = 250%). This applies to all utility variants including pseudo-elements like `after:w-5/2`.
Applied to files:
src/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-12-01T23:42:30.894Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7084
File: src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue:23-26
Timestamp: 2025-12-01T23:42:30.894Z
Learning: In the ComfyUI frontend codebase, Tailwind CSS is configured with Preflight enabled (default), which automatically provides `content: ''` for pseudo-elements when using `after:` or `before:` variants - no need to explicitly add `after:content-['']`.
Applied to files:
src/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Use Tailwind 4 styling and avoid `<style>` blocks in Vue components
Applied to files:
src/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:45.616Z
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,css} : Use Tailwind CSS only for styling (no custom CSS)
Applied to files:
src/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Use `<script setup lang="ts">` for component logic in Vue components
Applied to files:
src/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:45.616Z
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 : Use ref/reactive for state management in Vue 3 Composition API
Applied to files:
src/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Use `ref` for reactive state in Vue components
Applied to files:
src/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:45.616Z
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 : Use setup() function in Vue 3 Composition API
Applied to files:
src/components/helpcenter/HelpCenterMenuContent.vue
📚 Learning: 2025-11-24T19:47:45.616Z
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 : Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Applied to files:
src/components/helpcenter/HelpCenterMenuContent.vue
🧬 Code graph analysis (3)
src/platform/updates/components/WhatsNewPopup.stories.ts (3)
src/platform/updates/common/releaseService.ts (1)
ReleaseNote(10-10)src/platform/updates/common/releaseStore.ts (1)
useReleaseStore(16-291)src/platform/updates/components/ReleaseNotificationToast.stories.ts (4)
Default(116-120)MajorRelease(122-126)LongContent(134-156)EmptyContent(158-169)
src/platform/updates/components/ReleaseNotificationToast.test.ts (3)
scripts/size-collect.js (1)
content(49-49)src/platform/updates/common/releaseService.ts (1)
ReleaseNote(10-10)browser_tests/fixtures/ComfyPage.ts (1)
buttons(61-63)
src/platform/updates/components/WhatsNewPopup.test.ts (2)
scripts/size-collect.js (1)
content(49-49)src/platform/updates/common/releaseService.ts (1)
ReleaseNote(10-10)
🪛 Biome (2.1.2)
src/locales/en/main.json
[error] 2285-2285: unexpected character <
(parse)
[error] 2285-2285: unexpected character <
(parse)
[error] 2285-2285: unexpected character <
(parse)
[error] 2285-2285: unexpected character <
(parse)
[error] 2285-2285: unexpected character <
(parse)
[error] 2285-2285: unexpected character <
(parse)
[error] 2285-2285: unexpected character <
(parse)
[error] 2285-2285: String values must be double quoted.
(parse)
[error] 2285-2286: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2286-2286: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2286-2286: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2286-2286: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2286-2286: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2286-2286: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2286-2287: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2287-2287: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2287-2288: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2288-2288: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2288-2289: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2289-2289: unexpected character =
(parse)
[error] 2289-2289: unexpected character =
(parse)
[error] 2289-2289: unexpected character =
(parse)
[error] 2289-2289: unexpected character =
(parse)
[error] 2289-2289: unexpected character =
(parse)
[error] 2289-2289: unexpected character =
(parse)
[error] 2289-2289: unexpected character =
(parse)
[error] 2289-2290: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2290-2290: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2290-2290: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2290-2290: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2290-2291: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2291-2291: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2291-2291: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2291-2291: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2291-2292: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2292-2293: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2293-2293: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2294-2294: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2294-2294: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2294-2294: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2294-2296: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 2296-2296: unexpected character >
(parse)
[error] 2296-2296: unexpected character >
(parse)
[error] 2296-2296: unexpected character >
(parse)
[error] 2296-2296: unexpected character >
(parse)
[error] 2296-2296: unexpected character >
(parse)
[error] 2296-2296: unexpected character >
(parse)
[error] 2296-2296: unexpected character >
(parse)
[error] 2296-2296: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
🪛 GitHub Actions: CI: JSON Validation
src/locales/en/main.json
[error] 2284-2284: jq: parse error: Invalid numeric literal. Invalid JSON syntax. JSON validation failed while running './scripts/cicd/check-json.sh'. Process exited with code 1.
🪛 GitHub Actions: CI: Size Data
src/locales/en/main.json
[error] 2284-2284: TypeScript error: Merge conflict marker encountered in JSON file. Remove merge conflict markers (<<<<<<<, =======, >>>>>>>) to restore valid JSON.
🪛 GitHub Actions: CI: Tests Storybook
src/locales/en/main.json
[error] 2283-2285: Vite/Storybook JSON parsing failed: invalid JSON due to merge conflict markers ('<<<<<<< HEAD'). Please resolve merge conflicts in this file around line 2283.
🪛 GitHub Check: collect
src/locales/en/main.json
[failure] 2296-2296:
Merge conflict marker encountered.
[failure] 2288-2288:
Merge conflict marker encountered.
[failure] 2284-2284:
Merge conflict marker encountered.
🪛 GitHub Check: setup
src/locales/en/main.json
[failure] 2296-2296:
Merge conflict marker encountered.
[failure] 2288-2288:
Merge conflict marker encountered.
[failure] 2284-2284:
Merge conflict marker encountered.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: merge-reports
- GitHub Check: test
- GitHub Check: lint-and-format
🔇 Additional comments (12)
src/locales/en/main.json (1)
202-210: New relative time and help/release copy look consistent with usage.The
g.relativeTime.*entries, updatedhelpCenterlabels,releaseToaststrings, andwhatsNewPopup.laterkey align with the new Help Center and release UI logic and i18n usage in the Vue components. No changes needed here.Also applies to: 757-780, 1941-1942
packages/design-system/src/css/style.css (1)
188-189: Interface menu tokens are defined and aliased correctly.
--interface-menu-surface/--interface-menu-strokeare added for light and dark themes and exposed via--color-interface-menu-*in@theme inline, which matches how Help Center styling consumes them. Looks good.Also applies to: 310-311, 427-428
src/components/helpcenter/HelpCenterMenuContent.vue (1)
3-49: Help Center menu structure, aria, and release section wiring look good.The main menu buttons,
data-testid="whats-new-section", and ARIA labels bound tohelp.*keys are consistent with the updated locales and browser tests. The recent releases list, loading, and empty states are correctly tied to the release store andComfy.Notification.ShowVersionUpdates.Also applies to: 84-150, 225-234
browser_tests/tests/releaseNotifications.spec.ts (1)
52-59: Switch to data-testid locator improves test robustness.Using
page.getByTestId('whats-new-section')instead of a CSS class makes these tests less brittle and better aligned with the testing guidelines to prefer specific, semantic selectors.Also applies to: 81-88, 128-131, 178-179, 262-269, 311-324, 361-363
src/platform/updates/components/ReleaseNotificationToast.test.ts (1)
84-212: Test coverage and mocking for the toast behavior look solid.The suite exercises key paths: visibility gating via
shouldShowToast, skip/update/learn-more handlers, changelog URL generation, markdown title stripping, release fetching, missing content fallback, and auto-hide timing. The mocked store and utilities keep the tests focused on the component behavior.src/platform/updates/components/WhatsNewPopup.stories.ts (1)
7-67: Story setup for WhatsNewPopup is consistent and self‑contained.The stories provide realistic release payloads and use a decorator to seed the release store (
releases,recentRelease,shouldShowPopup) and stub handlers, which makes the popup easy to exercise in Storybook without depending on backend state. No changes needed.Also applies to: 73-118, 123-211
src/platform/updates/components/ReleaseNotificationToast.vue (4)
2-64: LGTM!The template is well-structured with proper Tailwind classes using semantic tokens, correct i18n usage for all user-facing strings, and the
relattribute is correctly space-separated.
67-81: LGTM!Imports are well-organized with proper DOMPurify and i18n integration.
199-205: LGTM!Exposing methods via
defineExposefor testing is appropriate.
126-127:renderMarkdownToHtmlcorrectly sanitizes with DOMPurify; the comment is accurate.The implementation of
renderMarkdownToHtmlinsrc/utils/markdownRendererUtil.tsconfirms the comment on lines 126-127. The function imports DOMPurify and returnsDOMPurify.sanitize(html, {...}), properly sanitizing all markdown-rendered HTML before it is returned. The code at line 127 is safe and does not require changes.src/platform/updates/components/WhatsNewPopup.vue (2)
144-158: LGTM!The async lifecycle and close handling logic is well-implemented.
179-189: LGTM!Good use of semantic design tokens (
--interface-menu-surface,--interface-menu-stroke) for theme-aware styling.
| <Button | ||
| class="close-button absolute top-2 right-2 z-10 w-8 h-8 p-2 rounded-lg opacity-50" | ||
| :aria-label="$t('g.close')" | ||
| icon="icon-[lucide--x]" | ||
| size="small" | ||
| severity="secondary" | ||
| text | ||
| @click="closePopup" | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Avoid new usage of PrimeVue components.
Per coding guidelines, new PrimeVue component usage should be avoided. Consider using native HTML buttons with Tailwind classes, similar to the approach in ReleaseNotificationToast.vue.
- <Button
- class="close-button absolute top-2 right-2 z-10 w-8 h-8 p-2 rounded-lg opacity-50"
- :aria-label="$t('g.close')"
- icon="icon-[lucide--x]"
- size="small"
- severity="secondary"
- text
- @click="closePopup"
- />
+ <button
+ class="close-button absolute top-2 right-2 z-10 w-8 h-8 p-2 rounded-lg opacity-50 bg-transparent border-none cursor-pointer text-muted-foreground hover:text-base-foreground"
+ :aria-label="$t('g.close')"
+ @click="closePopup"
+ >
+ <i class="icon-[lucide--x] w-4 h-4" />
+ </button>Apply the same pattern to the "Later" button at lines 39-47.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Button | |
| class="close-button absolute top-2 right-2 z-10 w-8 h-8 p-2 rounded-lg opacity-50" | |
| :aria-label="$t('g.close')" | |
| icon="icon-[lucide--x]" | |
| size="small" | |
| severity="secondary" | |
| text | |
| @click="closePopup" | |
| /> | |
| <button | |
| class="close-button absolute top-2 right-2 z-10 w-8 h-8 p-2 rounded-lg opacity-50 bg-transparent border-none cursor-pointer text-muted-foreground hover:text-base-foreground" | |
| :aria-label="$t('g.close')" | |
| @click="closePopup" | |
| > | |
| <i class="icon-[lucide--x] w-4 h-4" /> | |
| </button> |
🤖 Prompt for AI Agents
In src/platform/updates/components/WhatsNewPopup.vue around lines 5-13 (close
button) and 39-47 (Later button): the review asks to avoid new PrimeVue
component usage; replace the Button components with native <button> elements
styled with Tailwind classes matching existing look/behaviour (use class names
from ReleaseNotificationToast.vue as reference), keep aria-label, icon markup
(or inline SVG) and click handlers (closePopup / later handler) intact, ensure
accessibility (type="button", focus styles, screen-reader text if needed) and
remove PrimeVue-specific props (size, severity, text, icon attribute) so the UI
and behavior remain identical without using PrimeVue.
There was a problem hiding this comment.
Per coding guidelines, new PrimeVue component usage should be avoided. Consider using native HTML buttons with Tailwind classes, similar to the approach in ReleaseNotificationToast.vue.
Although that is true, the advice means, don't sue PrimeVue if you can use one of our common components in the repo, create a new component yourself using our design system, or can use shadcn/rekaui or something - not just that you should use stock HTML button (which you absolutely shouldn't).
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find what ReleaseNotificationToast.vue uses for buttons
echo "=== Checking ReleaseNotificationToast.vue button usage ==="
rg -n -A5 -B5 'button|Button' src/platform/updates/components/ReleaseNotificationToast.vue
echo -e "\n=== Looking for common button components in the repo ==="
# Search for button components in common/shared directories
fd -e vue -e ts -e tsx 'button' src/components src/common --type f | head -20
echo -e "\n=== Check for shadcn/rekaui imports ==="
rg -n 'from.*shadcn|from.*rekaui|from.*@radix' src/ --type ts --type vue -C2 | head -30
echo -e "\n=== Check design system for button exports ==="
rg -n 'export.*button|export.*Button' packages/design-system/src --type ts --type vue -C2 | head -30
Length of output: 2236
🏁 Script executed:
#!/bin/bash
# Check the button components available in src/components/button/
echo "=== Examining button components in src/components/button/ ==="
for file in src/components/button/*.vue; do
echo "--- $file ---"
head -30 "$file"
echo ""
done
echo -e "\n=== Check if there are any rekaui or design system button imports ==="
rg -n 'import.*Button' src/components/button/ -A2 -B2
Length of output: 7494
@christian-byrne Thank you for the clarification! You're absolutely right—I misunderstood the guideline. I should be recommending the repo's common button components from src/components/button/, not plain HTML buttons.
For this file, the correct approach would be to use:
IconButtonfor the close button (icon-only)TextButtonfor the "Later" button
These components wrap PrimeVue Button with the design system's styling and tokens, which is the intended pattern. Here's the corrected suggestion:
For the close button (lines 5-13):
<IconButton
class="close-button absolute top-2 right-2 z-10"
type="secondary"
size="small"
:aria-label="$t('g.close')"
@click="closePopup"
>
<i class="icon-[lucide--x]" />
</IconButton>For the "Later" button (lines 39-47):
<TextButton
:label="$t('whatsNewPopup.later')"
type="secondary"
size="small"
@click="closePopup"
/>I also note that ReleaseNotificationToast.vue is using plain HTML buttons, which should probably also be migrated to use these common components for consistency with the design system.
🐰
✏️ Learnings added
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, when avoiding PrimeVue components, prefer using the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) rather than plain HTML buttons. These components wrap PrimeVue with custom design system styling.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
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 : Replace PrimeVue OverlayPanel component with Popover
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Avoid new usage of PrimeVue components
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 : Replace PrimeVue InlineMessage component with Message
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 : Replace PrimeVue InputSwitch component with ToggleSwitch
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 : Replace PrimeVue Dropdown component with Select
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: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Be judicious with addition of new refs or other state; prefer using props or composables when possible
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 : Replace PrimeVue TabMenu component with Tabs without panels
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 : Replace PrimeVue Calendar component with DatePicker
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 : Replace PrimeVue Steps component with Stepper without panels
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/locales/en/main.json(5 hunks)src/platform/updates/components/ReleaseNotificationToast.test.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (10)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Minimize the surface area (exported values) of each module and composable
Use es-toolkit for utility functions
Files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
src/**/*.{ts,tsx,vue}: Write expressive and self-documenting code to reduce the need for comments; clean redundant comments as you go
Consider if there is a simpler way to introduce functionality before writing code; choose the simpler approach when possible
Use refactoring to make complex code simpler
Keep functions short and functional
Minimize nesting in code (e.g.,if () { ... }orfor () { ... }) to avoid arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions (especially testable ones)
Watch out for code smells and refactor to avoid them
Implement proper error handling in code
If a complex type definition is inlined in multiple related places, extract and name it for reuse
Files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
**/*.{js,ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively (no new JavaScript)
Files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Do not useanytype in TypeScript code
Do not useas anytype assertions in TypeScript code; fix the underlying type issue
Style formatting: 2 space indent, single quotes, no trailing semicolons, 80 character width
Import statements should be sorted and grouped by plugin; runpnpm formatbefore committing
ESLint rules: no floating promises, no unused imports, i18n raw text restrictions in templates
Files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
**/*.test.ts
📄 CodeRabbit inference engine (AGENTS.md)
**/*.test.ts: Write unit and component tests in**/*.test.ts
Use Vitest with happy-dom for unit and component tests
Files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use vue-i18n in Composition API for string literals and place new translation entries in
src/locales/en/main.json
Files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
🧠 Learnings (16)
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Follow existing test patterns in the codebase
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.test.ts : Write unit and component tests in `**/*.test.ts`
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in tests
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Check tests-ui/README.md for test guidelines
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possible
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Use existing test utilities rather than writing custom utilities
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocks
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Follow naming conventions for browser tests
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,tsx,vue} : Do not use `as any` type assertions in TypeScript code; fix the underlying type issue
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:47:34.324Z
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/**/*.{ts,tsx,vue} : Avoid using ts-expect-error; use proper TypeScript types instead
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,tsx,vue} : Do not use `any` type in TypeScript code
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:47:34.324Z
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/**/*.{ts,tsx,vue} : Implement proper TypeScript types throughout the codebase
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Watch out for code smells and refactor to avoid them
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Favor pure functions (especially testable ones)
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/platform/updates/components/ReleaseNotificationToast.test.ts
🧬 Code graph analysis (1)
src/platform/updates/components/ReleaseNotificationToast.test.ts (1)
src/platform/updates/common/releaseService.ts (1)
ReleaseNote(10-10)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: test
- GitHub Check: lint-and-format
- GitHub Check: collect
- GitHub Check: setup
🔇 Additional comments (6)
src/locales/en/main.json (5)
1939-1943: Added "later" button option to WhatsNewPopup.The addition of
"later": "Later"at line 1941 complements the existing"learnMore"and improves UX by allowing users to defer viewing release notes. This is semantically clear.
2290-2293: New root-level help section correctly referenced in HelpCenterMenuContent component.The new keys at lines 2290–2293 provide:
"recentReleases": "Recent releases""helpCenterMenu": "Help Center Menu"These are properly used in
src/components/helpcenter/HelpCenterMenuContent.vuewith the correcthelp.prefix via$t('help.helpCenterMenu')(line 5) and$t('help.recentReleases')(line 100).
757-772: Help Center menu structure updated with feedback button and renamed labels.The changes are correctly implemented:
- Line 758: Added
"feedback": "Give Feedback"for the new feedback button- Line 761: Updated to
"help": "Help & Support"with proper key namingComponent references verified:
src/components/helpcenter/HelpCenterMenuContent.vuecorrectly usest('helpCenter.feedback')andt('helpCenter.help'), with all other helpCenter keys properly referenced. No orphaned key references found.
202-210: Added relativeTime locale strings are correctly integrated with components.The
relativeTimeobject provides relative time formatting strings with{count}placeholders. Verification confirms that HelpCenterMenuContent.vue uses the correct interpolation patternt('g.relativeTime.${key}', { count: value }), which properly populates the count values into the locale strings.
2272-2289: Two of the three keys added torightSidePanelare not currently used in any components:
"nodeState": "Node state"is used inTabSettings.vue(line 6) ✓"properties": "Properties"is not referenced anywhere in the codebase ✗"settings": "Settings"is not used; the settings tab label inRightSidePanel.vue(line 71) usest('g.settings')instead ✗If these keys were intended for upcoming UI integrations, verify that the components are updated to use them. If they're no longer needed, remove them from the locale file.
Likely an incorrect or invalid review comment.
src/platform/updates/components/ReleaseNotificationToast.test.ts (1)
1-7: Strong, well-typed test suite that now aligns with repo typing rules.The suite is comprehensive and the recent changes (typed
wrapperasVueWrapper<InstanceType<typeof ReleaseNotificationToast>>and giving the markdown mock a concrete type instead ofany/as any) bring the file in line with the “noany/ proper TS types” guidelines. Mocks for i18n, format/markdown, and the release store are clear and focused, and the tests exercise the exposed methods and main behaviors ofReleaseNotificationToastthoroughly.Also applies to: 30-32, 48-52, 186-193
… new, new release notification, help center) (Comfy-Org#6300) ## Summary Migrated help center and release notification components from hardcoded colors to semantic design tokens for automatic light/dark theme support. <img width="808" height="874" alt="Selection_2298" src="https://github.com/user-attachments/assets/c7fb956e-700b-49df-bba0-b85705e89ce7" /> <img width="852" height="710" alt="Selection_2265" src="https://github.com/user-attachments/assets/618205e1-5068-499d-80ab-72626b32d7e1" /> <img width="493" height="838" alt="Screenshot from 2025-10-25 21-46-11" src="https://github.com/user-attachments/assets/7b696673-ec19-4a16-a0b5-ca744ae62fe1" /> <img width="493" height="838" alt="Screenshot from 2025-10-25 21-46-25" src="https://github.com/user-attachments/assets/2767d722-a0e1-426d-82d9-6d5a59f373ee" /> ## Changes - **What**: Replaced hardcoded hex/rgb colors with semantic tokens in HelpCenterMenuContent, WhatsNewPopup, and ReleaseNotificationToast components - **Design System**: Added `--interface-menu-surface` and `--interface-menu-stroke` tokens to style.css for consistent menu theming - **UX**: Updated help center menu structure - added "Give Feedback" button, renamed "Help & Feedback" to "Help & Support", switched to Lucide icons (except Discord brand logo), added external-link icons ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6300-style-update-ui-and-design-of-system-notification-components-what-s-new-new-release-no-2986d73d365081238458ea7d304b641e) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <[email protected]>
Summary
Migrated help center and release notification components from hardcoded colors to semantic design tokens for automatic light/dark theme support.
Changes
--interface-menu-surfaceand--interface-menu-stroketokens to style.css for consistent menu theming┆Issue is synchronized with this Notion page by Unito