Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-11 10:30:10 +00:00
Code Issues Packages Projects Releases Wiki Activity
6,106 Commits 621 Branches 541 Tags
18ce8e940a5809b2fc338143de9de890027b3f0d
Commit Graph

1261 Commits

Author SHA1 Message Date
Alexander Brown
18ce8e940a Fix: Add slot for footer (used by Assets Sidebar) (#7532) 
## Summary

It contains the selected items controls.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7532-Fix-Add-slot-for-footer-used-by-Assets-Sidebar-2ca6d73d36508138b044da226dd24cea)
by [Unito](https://www.unito.io)
 2025-12-15 23:59:03 +00:00
Alexander Brown
79ddff692e Fix: Extra Scrollbars in Media Assets Sidebar (#7508) 
## Summary

The Divider was throwing off the sizing assumptions for the sidebar
tab's width and the interaction between the Sidebar Tab's container
height and the ScrollPanel's and VirtualGrid's sizing calculations.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7508-Fix-Extra-Scrollbars-in-Media-Assets-Sidebar-2ca6d73d365081dd8475e209d9b062c0)
by [Unito](https://www.unito.io)
 2025-12-15 15:21:48 -05:00
Terry Jia
fb944fef56 refactor: standardize z-index Tailwind classes (#7509) 
## Summary

Replace arbitrary z-index values (z-[n]) with standard Tailwind
utilities.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7499

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7509-refactor-standardize-z-index-Tailwind-classes-2ca6d73d365081339e66f0c8e6fcc20b)
by [Unito](https://www.unito.io)
 2025-12-15 15:09:11 -05:00
Terry Jia
4ec4da785b fix: render selection rectangle in DOM layer to appear above DOM widgets (#7474) 
## Summary
Selection box was being drawn on canvas which appeared below DOM widgets
like images and textareas.

Now rendered via SelectionRectangle.vue with high z-index to ensure
visibility during drag selection.

## Screenshots (if applicable)
before
<img width="1268" height="1258" alt="image"
src="https://github.com/user-attachments/assets/7cb1271c-9ce6-4fac-83a9-ac783a309d97"
/>

after
<img width="1509" height="1129" alt="image"
src="https://github.com/user-attachments/assets/55dd698f-1213-4e60-ae46-9ed292ecd70c"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7474-fix-render-selection-rectangle-in-DOM-layer-to-appear-above-DOM-widgets-2c96d73d36508142bc2ac0d0943043c5)
by [Unito](https://www.unito.io)
 2025-12-15 13:41:10 -05:00
Benjamin Lu
abf966ab83 Topbar: add Custom Nodes Manager button (#7400) 
Adds a desktop-only "Custom Nodes Manager" topbar button (Lucide puzzle)
in its own bordered island left of the actionbar. Button opens the
manager via useManagerState().openManager().

- New i18n key: menu.customNodesManager

<img width="318" height="147" alt="image"
src="https://github.com/user-attachments/assets/e36c5c7f-80d1-454c-87de-e0daa822fad1"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7400-Topbar-add-Custom-Nodes-Manager-button-2c76d73d3650810b9122da61a3c4be39)
by [Unito](https://www.unito.io)
 2025-12-15 09:35:38 -08:00
Christian Byrne
eb04dc20f3 fix: staging badge shown in cloud settings panel (#7444) 
## Summary

Fixes issue where settings panel on cloud was showing a "Staging" badge
because the badge's logic was being dictated by the buildtime config.
Adds the same pattern used everywhere else where, if cloud distribution,
use runtime config; otherwise, fallback to buildtime config. Allows
cloud to switch between staging and prod at runtime while local switches
at buildtime.

After fix:

<img width="2062" height="811" alt="image"
src="https://github.com/user-attachments/assets/e53547c5-3dcc-42ea-9e75-602fe7f855a2"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7444-fix-staging-badge-shown-in-cloud-settings-panel-2c86d73d36508154a788e8e2a6dd025a)
by [Unito](https://www.unito.io)
 2025-12-13 18:41:17 -07:00
Christian Byrne
fd9747375d fix: refreshing assets causes entire panel to re-render (enter loading state) (#7449) 
## Problem

The Media Assets panel's loading state is currently determined by the
loading state of the assets store (or something similar). When the store
is refetching and reconciling, it displays a loading spinner briefly on
the entire panel. This causes the following issues:

1. **Visual jarring**: The loading spinner creates an unpleasant visual
flash
2. **Unnecessary reflow**: All assets must re-render after the loading
state changes, causing layout reflow
3. **Performance degradation**: Re-rendering all items is
computationally expensive

## Expected Behavior

Items should be able to be inserted into the list without:

- Re-rendering any other items
- Showing a jarring loading flash
- Causing unnecessary reflow

The loading state of individual items should be decoupled from the
panel's overall loading state, allowing for incremental updates to the
list without affecting the entire panel's UI.


## After

(ignore random progress spinner, removed it after taking the video)


https://github.com/user-attachments/assets/95d7f111-e844-44e2-a0c6-6bcbc4a34797

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7449-fix-refreshing-assets-causes-entire-panel-to-re-render-enter-loading-state-2c86d73d365081be8206f9fdbbf66772)
by [Unito](https://www.unito.io)
 2025-12-13 12:55:42 -08:00
Christian Byrne
a7c694f248 fix: update pricing table link (#7402) 
## Summary

Update to https://docs.comfy.org/tutorials/partner-nodes/pricing --
actual link to the pricing table (before was sending to just the Partner
Nodes docs).

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7402-fix-update-pricing-table-link-2c76d73d365081f2b890ee6887c0314e)
by [Unito](https://www.unito.io)
 2025-12-12 15:42:46 -07:00
AustinMroz
f2a0e5102e Cleanup app.graph usage (#7399) 
Prior to the release of subgraphs, there was a single graph accessed
through `app.graph`. Now that there's multiple graphs, there's a lot of
code that needs to be reviewed and potentially updated depending on if
it cares about nearby nodes, all nodes, or something else requiring
specific attention.

This was done by simply changing the type of `app.graph` to unknown so
the typechecker will complain about every place it's currently used.
References were then updated to `app.rootGraph` if the previous usage
was correct, or actually rewritten.

By not getting rid of `app.graph`, this change already ensures that
there's no loss of functionality for custom nodes, but the prior typing
of `app.graph` can always be restored if future dissuasion of
`app.graph` usage creates issues.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7399-Cleanup-app-graph-usage-2c76d73d365081178743dfdcf07f44d0)
by [Unito](https://www.unito.io)
 2025-12-11 23:37:34 -07:00
Simula_r
c1808db7c4 Fix/run button floating calc (#7340) 
## Summary

Ensures the undocked ComfyRunButton resets to a valid position when the
app reopens after a browser resize. Since the component is dynamically
imported, we defer setInitialPosition until the suspense boundary has
been resolved rather than calling it on mount (when the import has not
been loaded / wxh are incorrect).

## Changes

- **What**:  ComfyActionbar.vue
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

Fixes:
https://www.notion.so/comfy-org/Bug-Run-button-missing-after-undocking-moving-to-bottom-right-and-resizing-window-2c06d73d3650810f89e5eb5692f08b83?source=copy_link

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7340-Fix-run-button-floating-calc-2c66d73d36508122b489c90c81c6129a)
by [Unito](https://www.unito.io)
 2025-12-11 23:31:25 -07:00
Alexander Brown
18b133d22f Style: Larger Node Text, More Sidebar Alignment (#7223) 
## Summary

See what it looks like. How it feels. What do you think?

- Also was able to unify down to a single SearchBox component.

## Changes

- Bigger widget / slot labels
- Smaller header text
- Unified Searchboxes across sidebar tabs

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7223-Style-prototype-with-larger-node-text-2c36d73d365081f8a371c86f178fa1ff)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-12-11 19:47:28 -08:00
Alexander Brown
03e9dd4789 Feat: Remove the Nodes 2.0 Trial Banner (#7390) 
## Summary

The option to try it out is still in the Menu if you're looking for it.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7390-Feat-Remove-the-Nodes-2-0-Trial-Banner-2c66d73d365081c3817ad5c89dd4029b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-12-11 17:13:26 -08:00
Yourz
c99865ce7f fix: disable the sign up and sign in button when form is invalid (#7376) 
## Summary

<!-- One sentence describing what changed and why. -->

Add a disabled state to the sign-up button in the cloud onboarding
views. The button should be disabled when the form is invalid to prevent
users from submitting incomplete or incorrectly formatted information.

## Changes

- **What**: <!-- Core functionality added/modified -->
- Add disabled state to SignUp button and SignIn button when SignUp or
SignIn form is invalid.
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

## Review Focus

<!-- Critical design decisions or edge cases that need attention -->

Changes for this notion:
https://www.notion.so/comfy-org/Implement-Disable-sign-up-button-when-form-is-invalid-in-cloud-onboarding-2c56d73d365081edbf8bf06b1f5e52e5

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)
Sign In button

Before(button not disabled when email is invalid)
![Kapture 2025-12-11 at 22 30
59](https://github.com/user-attachments/assets/4278473b-350e-4fea-a299-199697c354b7)

After
![Kapture 2025-12-11 at 22 28
45](https://github.com/user-attachments/assets/b677a444-39ce-487c-a2ad-31369585e333)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7376-fix-disable-the-sign-up-and-sign-in-button-when-form-is-invalid-2c66d73d36508139af44cd7cb1e1aeb9)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
 2025-12-11 07:47:41 -07:00
Christian Byrne
29af56c154 fix: remove useless/misleading toast in topup dialog (#7375) 
## Summary

Removes a toast that says "Purchase successful" when clicking the "Add
credits" button -- that button just opens Stripe checkout in another
tab, so the toast is misleading and could be wrong.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7375-fix-remove-useless-misleading-toast-in-topup-dialog-2c66d73d36508124bb65feaf7cf26712)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
 2025-12-11 07:34:58 -07:00
Yourz
a65e63a322 fix: throttle sign-up and sign-in button (#7358) 
## Summary

<!-- One sentence describing what changed and why. -->
Throttle signup button to prevent duplicate Firebase accounts

## Changes

- **What**: <!-- Core functionality added/modified -->
  - Add throttle to SignUp Button in SignUpForm component
  - Add throttle to SignIn Button in SignInForm component
  - Add loading state to SignUp Button in SignUpForm component

## Review Focus
related to this Notion page:
https://www.notion.so/comfy-org/Implement-Throttle-signup-button-to-prevent-duplicate-Firebase-accounts-2c46d73d36508193a8d1fb5146674956

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7358-fix-throttle-sign-up-and-sign-in-button-2c66d73d365081278f4dde0f34d60153)
by [Unito](https://www.unito.io)
 2025-12-11 05:48:22 -07:00
Christian Byrne
ea59fb5fc3 fix: hardcoded color tokens (not theme-aware) (#7366) 
## Summary

Fixes instances of hardcoded color tokens (not semantic) which are not
theme-aware and therefore are incorrect on e.g. light mode.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7366-fix-hardcoded-color-tokens-not-theme-aware-2c66d73d365081e294aaff366fc78a8f)
by [Unito](https://www.unito.io)
 2025-12-11 04:05:42 -07:00
Christian Byrne
b6efc52bf8 feat: show subscription tier below name on cloud (#7356) 
## Summary

<img width="427" height="557" alt="image"
src="https://github.com/user-attachments/assets/1183e741-762d-4e52-b24a-77c976e5ad5f"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7356-feat-show-subscription-tier-below-name-on-cloud-2c66d73d365081829576c276bb5762ac)
by [Unito](https://www.unito.io)
 2025-12-11 01:40:24 -07:00
Christian Byrne
87244a6954 fix: credits loading skeleton in user popover (#7347) 
Show skeleton loader while credits are being fetched instead of briefly
displaying '0 credits'.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7347-Fix-credits-loading-skeleton-in-user-popover-2c66d73d36508103ae65d82e9bceb97d)
by [Unito](https://www.unito.io)
 2025-12-10 23:04:01 -07:00
Christian Byrne
0eb2b9171a remove fraction digits on topup credit number (#7345) 
## Summary

Don't show fraction digits on credits in the topup dialog.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7345-remove-fraction-digits-on-topup-credit-number-2c66d73d365081028ef8cf73113dd20c)
by [Unito](https://www.unito.io)
 2025-12-10 22:51:24 -07:00
Christian Byrne
73e09a7fff fix: subscribe button overflow on cloud (#7343) 
## Summary


| Before | After |
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
| <img width="958" height="724" alt="image"
src="https://github.com/user-attachments/assets/4c19c94e-646d-4247-8824-471e5a161930"
/> | <img width="493" height="559" alt="Screenshot from 2025-12-10
21-13-36"
src="https://github.com/user-attachments/assets/6e915a50-e44c-4d07-a850-27ad36aed546"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7343-fix-subscribe-button-overflow-on-cloud-2c66d73d36508101be6bca61a9172c94)
by [Unito](https://www.unito.io)
 2025-12-10 22:44:05 -07:00
Alexander Brown
72b5444d5a Devex: Linter updates (#7309) 
## Summary

Updates for the linter/formatter deps, turning on some more rules.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7309-WIP-Linter-updates-2c56d73d36508101b3ece6bcaf7e5212)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>
 2025-12-10 11:08:47 -08:00
Christian Byrne
356ebe538f style: redesign TopUpCredits dialog (#7305) 
Redesigned the TopUpCredits dialog to match Figma design specifications
with proper layout, typography, colors and selection states. Updated
dialog to use workflow-aware messaging, removed header, applied design
system tokens, and integrated subscription renewal dates. Modified
credit packages to use clean USD amounts with realistic video estimates
and fixed button disabled states to show blue with 30% opacity per Figma
design.

| Before | After |
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
| <img width="675" height="863" alt="Screenshot from 2025-12-09
18-08-21"
src="https://github.com/user-attachments/assets/331c7a48-74ae-4a58-b70f-aa476c3fc87c"
/> | <img width="675" height="863" alt="Screenshot from 2025-12-09
18-06-23"
src="https://github.com/user-attachments/assets/dcb7b358-6045-4c89-82ed-3283a20eea89"
/>
 |
 2025-12-09 21:30:56 -07:00
Christian Byrne
2c06c58621 feat: update subscription panel with tier-based design and improved UX (#7307) 
Transforms the subscription credits panel from legacy design to
tier-based layout with Creator tier details, updated typography using
design system tokens, improved responsive credit breakdown layout, and
better subscription management flow. Updates credit formatting to remove
unnecessary decimals and Credits suffix, replaces external Stripe
billing portal with inline dialog, and reorganizes plan benefits section
with proper v-for structure matching Figma specifications.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7307-feat-update-subscription-panel-with-tier-based-design-and-improved-UX-2c56d73d365081ef8b63e262a6822c72)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
 2025-12-09 21:30:06 -07:00
Christian Byrne
c13343b8fb style: redesign user popover with improved layout and integration with design system (#7303) 
Implements new Figma design for the user popover with cleaner row-based
layout, proper design system tokens, and improved spacing. Replaces
PrimeVue icons with Lucide icons, fixes credits display to show whole
numbers without unnecessary decimals, updates menu item order to match
design specifications, and ensures consistent hover states and
typography throughout. All styling now uses Tailwind classes with proper
semantic design tokens instead of inline styles.

| Before | After |
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
| <img width="815" height="973" alt="image"
src="https://github.com/user-attachments/assets/b2c15fa0-f545-4dcf-b224-cee846885337"
/> | <img width="815" height="973" alt="image"
src="https://github.com/user-attachments/assets/1f0bf488-5e15-4bb9-84b7-019cdd5105ae"
/> |

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
 2025-12-09 20:47:57 -07:00
Benjamin Lu
2903560416 Move cancel button into actionbar (#7297) 
## Summary
Move the interrupt control into the actionbar so cancellation sits with
the run controls.

## Changes
- add a cancel button to the actionbar with the existing interrupt
tooltip and disabled state
- remove the cancel button and related execution wiring from the top
menu section to avoid duplication

## Review Focus
- spacing/hover states of the new cancel control in both docked and
floating modes

## Screenshots (if applicable)
- n/a

Tests: pnpm typecheck; pnpm lint:fix

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7297-Move-cancel-button-into-actionbar-2c46d73d36508198b00cf011390289f6)
by [Unito](https://www.unito.io)
 2025-12-09 14:32:03 -08:00
Christian Byrne
aef40834f3 add shared comfy credit conversion helpers (#7061) 
Introduces cents<->usd<->credit converters plus basic formatters and
adds test. Lays groundwork to start converting UI components into
displaying comfy credits.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7061-add-shared-comfy-credit-conversion-helpers-2bb6d73d3650810bb34fdf9bb3fc115b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
 2025-12-09 05:11:27 -07:00
Christian Byrne
d3e9e15f07 change credits icons and tooltips (conditional on feature flag) (#7276) 
This PR changes the credits icons and tooltips based on state of the
`subscription_tiers_enabled` feature flag.

When the flag is enabled (or undefined -- for local), the dollar icon is
replaced with the lucide-component icon in UserCredit and node price
badges (Partner Nodes), and a new tooltip row appears in
CurrentUserPopover displaying "Credits have been unified" with a
detailed hover tooltip explaining the credit unification across Partner
Nodes and Cloud workflows.

<img width="539" height="535" alt="image"
src="https://github.com/user-attachments/assets/7e952f9b-0abb-4979-85b7-0eecdeaf808c"
/>

Related:

- https://github.com/Comfy-Org/ComfyUI_frontend/pull/6115 (borrows badge
implementation from this PR)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7276-change-credits-icons-and-tooltips-conditional-on-feature-flag-2c46d73d365081809a6afd5861018a15)
by [Unito](https://www.unito.io)
 2025-12-09 02:41:32 -07:00
Benjamin Lu
79a6421329 Fix cloud queue cancel to target specific jobs (#7176) 
## Summary
- switch QueueProgressOverlay cancel action to target explicit prompt
ids on cloud via /api/queue delete
- keep non-cloud behavior using /interrupt for local installs
- ensure prompt id list generation is straightforward

## Testing
- pnpm typecheck
- pnpm lint:fix

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7176-Fix-cloud-queue-cancel-to-target-specific-jobs-2c06d73d365081b38ab2f81d71f62186)
by [Unito](https://www.unito.io)
 2025-12-09 00:59:43 -07:00
Alexander Brown
5b91434ac4 Cleanup: Sidebar Tabs component and style alignment (#7215) 
## Summary

Unify the current sidebar tabs, structurally and aesthetically.

## Changes

- Removes the Assets only Layout
- Standardizes the title styling and spacing across the tabs.

## Review Focus

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7215-WIP-Sidebar-Tabs-component-and-style-alignment-2c26d73d3650817193bfd752e0d0bbde)
by [Unito](https://www.unito.io)
 2025-12-09 00:33:08 -07:00
Christian Byrne
51a336fd36 style: update ui and design of system notification components (what's new, new release notification, help center) (#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 <drjkl@comfy.org>
 2025-12-09 00:07:02 -07:00
Alexander Brown
5139e0564e Style: Font Consistency (#7220) 
## Summary

Reduce lower level font definitions in most places. Default to Inter.

See #6912 

## Review Focus

Comic Sans is still an option...

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7220-Style-Font-Consistency-2c26d73d365081348f2dd8909dd9bb8f)
by [Unito](https://www.unito.io)

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
 2025-12-08 19:48:11 -07:00
Terry Jia
f385ee8ca2 feat: add showScrollbar prop to VirtualGrid (#7227) 
## Summary

Enable vertical scrollbar in Media Assets sidebar for better navigation
when content overflows.

The original implementation hid the scrollbar by default. 
Since the intent behind hiding it wasn't documented, this change
preserves the default behavior (showScrollbar: false) while allowing
components to opt-in to visible scrollbars when needed.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/6914

## Screenshots (if applicable)
<img width="681" height="890" alt="image"
src="https://github.com/user-attachments/assets/af48a440-6d04-4226-9482-eb17f8d11a40"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7227-feat-add-showScrollbar-prop-to-VirtualGrid-2c36d73d365081c8955ee632c6c644f7)
by [Unito](https://www.unito.io)
 2025-12-08 21:31:16 -05:00
Johnpaul Chiwetelu
2636136f87 feat(sidebar): autofocus search input in Workflows, Model, and Node tabs (#7179) 
## Summary
This PR improves the user experience by automatically focusing the
search input field when opening the Workflows, Model Library, or Node
Library sidebar tabs.

## Changes
- **SearchBox.vue**: Exposed a `focus()` method to allow parent
components to programmatically set focus on the input.
- **WorkflowsSidebarTab.vue**: Added a watcher to focus the search box
when the tab is activated.
- **ModelLibrarySidebarTab.vue**: Added autofocus on component mount.
- **NodeLibrarySidebarTab.vue**: Added autofocus on component mount.

## Motivation
Users often switch to these tabs specifically to search for an item.
Automatically focusing the search box reduces friction and saves a
click.



https://github.com/user-attachments/assets/8438e71c-a5e4-4b6c-8665-04d535d3ad8e

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7179-feat-sidebar-autofocus-search-input-in-Workflows-Model-and-Node-tabs-2c06d73d36508199b8c0e83d19f1cd84)
by [Unito](https://www.unito.io)
 2025-12-09 01:45:40 +01:00
Benjamin Lu
259e9563c8 Hotfix: restore cancel button in top menu (#7234) 
## Summary
- restore the interrupt/cancel button in the top menu action bar

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7234-Hotfix-restore-cancel-button-in-top-menu-2c36d73d365081b18dede1e49183a429)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-12-08 15:31:04 -08:00
Benjamin Lu
97c7b33713 Fix job details popover sticking after cancel/delete (#6930) 
## Summary
- close the job details popover when its job disappears or timers fire
after list changes, and clear hover timers on unmount
- emit an explicit details-leave on cancel/delete clicks so the popover
closes even if hover-out never fires

Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/6907

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6930-Fix-job-details-popover-sticking-after-cancel-delete-2b66d73d365081dc990ae87d01455bad)
by [Unito](https://www.unito.io)
 2025-12-08 15:00:12 -08:00
Terry Jia
6081404abb feat: Don't hide scrollbar in BaseModalLayout (#7226) 
## Summary
- Add showScrollbar prop to BaseModalLayout component to control
scrollbar visibility
- Enable scrollbar in Templates dialog for better navigation when
content overflows

The original implementation used scrollbar-hide class by default. Since
the intent behind hiding the scrollbar wasn't documented in the original
PR (#5290), this change preserves the default behavior (showScrollbar:
false) while allowing individual dialogs to opt-in to visible
scrollbars.

The Templates dialog specifically benefits from a visible scrollbar as
it contains a large grid of template cards that requires scrolling.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/6915

## Screenshots (if applicable)
<img width="2490" height="1097" alt="image"
src="https://github.com/user-attachments/assets/711b060c-9752-4cee-84c0-d90210969f5a"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7226-feat-add-showScrollbar-prop-to-BaseModalLayout-2c36d73d365081b1b55bdcd50ca89030)
by [Unito](https://www.unito.io)
 2025-12-08 13:53:35 -05:00
Terry Jia
8c5584c997 fix: preserve custom nodes i18n data when locales are lazily loaded (#7214) 
## Summary
Custom nodes can provide localized translations via their locales
folder.
After the switch to lazy-loading locales (only English pre-loaded),
custom node i18n data was being lost because:
1. loadCustomNodesI18n() merges data before locale is loaded
2. loadLocale() uses setLocaleMessage() which overwrites everything

Solution: Store custom nodes i18n data and re-merge it after each
lazy-loaded locale completes loading.

- Add mergeCustomNodesI18n() function to store and merge custom data
- Modify loadLocale() to re-merge stored data after loading
- Add unit tests for the i18n merging behavior

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7025

## Screenshots (if applicable)
<img width="706" height="1335" alt="image"
src="https://github.com/user-attachments/assets/41e4ba2c-b4c0-4d0d-a104-1ede8939ff92"
/>
<img width="672" height="1319" alt="image"
src="https://github.com/user-attachments/assets/6c3e55e5-20d2-4093-a86a-7496db3dfe94"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7214-fix-preserve-custom-nodes-i18n-data-when-locales-are-lazily-loaded-2c26d73d3650812fab31edd71cf51a19)
by [Unito](https://www.unito.io)
 2025-12-07 20:31:13 -05:00
Terry Jia
23ab924405 fix: add fixed min-width to sidebar panels to prevent content clipping (#7212) 
## Summary

The default 10% min-size is too small for panels like Media Assets,
causing content to be clipped.
Use a fixed minimum width to ensure the panel content displays properly.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7210

## Screenshots


https://github.com/user-attachments/assets/65a15f0f-45c1-4361-adc9-eee4ccfad0ee

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7212-fix-add-fixed-min-width-to-sidebar-panels-to-prevent-content-clipping-2c16d73d365081d8a5a4de30c8eb5e07)
by [Unito](https://www.unito.io)
 2025-12-06 12:42:14 -08:00
Alexander Brown
f74c176423 Cleanup: Properties Panel (#7137) 
## Summary

- Code cleanup
- Copy, padding, color, alignment of components
- Subgraph Edit mode changes
- Partial fix for the Node Info location (need to do context menu still)
- Editing node title

### Still to-do

- Bi-directionality in values

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7137-WIP-Cleanup-Properties-Panel-2be6d73d3650813e9430f6bcb09dfb4d)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-12-05 21:33:52 -08:00
Rizumu Ayaka
3443c8fb65 fix: unintended text selection when resizing the splitter (#7187) 
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7187-fix-unintended-text-selection-when-resizing-the-splitter-2c06d73d365081b38644daa1f07fa1fb)
by [Unito](https://www.unito.io)

---------

Co-authored-by: DrJKL <DrJKL0424@gmail.com>
 2025-12-05 18:04:43 +00:00
Simula_r
ab777bc65c fix: vue nodes preview node to match lg and add node when clicked (#7146) 
## Summary

Make the preview node match recent LGraphNode.vue look. Also add support
to click from search.

## Changes

- **What**: NodeSearchBox.vue, LGraphNodePreview.vue, nodeDefStore.ts

## Screenshots (if applicable)


https://github.com/user-attachments/assets/ed46d641-66bf-4e23-a207-9102609a7a4a


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7146-fix-vue-nodes-preview-node-to-match-lg-and-add-node-when-clicked-2bf6d73d3650814383b2c786e2ab4d02)
by [Unito](https://www.unito.io)
 2025-12-04 15:31:38 -08:00
Terry Jia
643533c572 fix: should allow autoCols=true when server doesn't provide size (#7132) 
## Summary

set autoCols = true by default for Logs Terminal

## Changes
Previously, the logs terminal had autoCols: false to preserve
server-side progress bar rendering, However, this caused large black
empty areas when the server terminal was narrower than the UI panel,
Many server environments don't provide terminal size at all, making this
tradeoff not worthwhile.

The original implementation set autoCols: false because the server
renders progress bars based on its own terminal width. If the frontend
used a different column count, progress bars would display incorrectly
(e.g., wrapped or truncated).

However, this created a poor user experience:
1. The terminal only filled a portion of the panel width (often 80
columns)
  2. The remaining space appeared as a large black empty area
3. Many backend environments don't provide size data at all, making the
fixed-width approach pointless

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7117

## Screenshots (if applicable)
before

https://github.com/user-attachments/assets/e38af410-9cf1-4175-8acc-39d11a5b73ce

after

https://github.com/user-attachments/assets/3d180318-609f-44c5-aac5-230f9e4ef596

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7132-fix-should-allow-autoCols-true-when-server-doesn-t-provide-size-2be6d73d365081e7bf3bf5988bdba39a)
by [Unito](https://www.unito.io)
 2025-12-03 22:18:27 -05:00
Terry Jia
e9d5ce7f3f selection rectangle for vueNodes (#7088) 
## Summary

fix: render selection rectangle in DOM layer for Vue nodes mode.

When Vue nodes are enabled, the canvas selection rectangle was being
rendered behind Vue node elements due to DOM stacking order (canvas
layer is below the TransformPane layer).

## Changes
- Adds a new SelectionRectangle.vue component that renders the selection
box as a DOM element
- Places it above the Vue nodes layer so it's always visible during drag
selection
- Skips canvas-based selection rectangle rendering when Vue nodes mode
is active
- Bonus: adds a semi-transparent blue fill style for better visibility


## Screenshots
before

https://github.com/user-attachments/assets/a8ee2ca3-00fd-4fdc-925a-dc9f846f4280

after

https://github.com/user-attachments/assets/66b7f2f5-f0a0-486f-9556-3872d07d65be

One more thing, the following improvement will be live selection,
something like:


https://github.com/user-attachments/assets/05a2b7ea-89b1-4568-bd2a-792f4fc11d8e

but I don't want to increase this PR, so I will send live selection
after this selection rectangle

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7088-selection-rectangle-for-vueNodes-2bd6d73d3650817aa2e9cf4526f179d8)
by [Unito](https://www.unito.io)
 2025-12-03 08:26:57 -05:00
Rizumu Ayaka
68274134c8 feat: right side panel (#6952) 
<img width="1183" height="809" alt="CleanShot 2025-11-26 at 16 01 15"
src="https://github.com/user-attachments/assets/c14dc5c3-a672-4dcd-917d-14f16310188e"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6952-feat-right-side-panel-2b76d73d36508112b121c283a479f42a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-12-02 22:55:24 -07:00
Alexander Brown
662974b222 Speed: Remove some optimizations that weren't optimizing (#6209) 
## Summary

Simplify the TransformPane.

## Changes

- **What**: Remove the settling and culling composables. Gets rid of a
frequent event emission and some event handling addition/removals.

## Review Focus

In testing with a huge workflow in Vue mode, it was a lot faster without
these than with.
Can you check to see if you experience the same benefits?

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6209-Speed-Remove-some-optimizations-that-weren-t-optimizing-2946d73d3650815197a4df3c58a61575)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-12-02 21:28:52 -08:00
Alexander Brown
497bafcaeb Fix: Widget sizing with multiple expanding items (#7118) 
## Summary

Textarea/Markdown/3D pieces grow, other widget rows size to their
contents.

## Screenshots (if applicable)
<img width="564" height="420" alt="image"
src="https://github.com/user-attachments/assets/35aeb9bf-a44d-4e3f-b2cd-a9f3604a7778"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7118-Fix-Widget-sizing-with-multiple-expanding-items-2be6d73d3650816c8153ff3f1e49176d)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
 2025-12-02 18:49:45 -08:00
Alexander Brown
04158deb02 Feat: Rename and Delete for imported Models ☁️ (#6969) 
## Summary

Add Rename and Delete options for Personal Models.

Also updates and standardizes some styles for Cards and adds a simple
Confirmation dialog.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6969-WIP-Feat-Rename-and-Delete-for-custom-Models-2b86d73d36508140a687e929b0544ae6)
by [Unito](https://www.unito.io)

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
 2025-12-01 17:16:05 -08:00
Alexander Brown
5b03d3fcbc Minor/Lint: Fix two warnings (#7045) 
## Summary

Unnecessary import of a compiler macro and importing the default instead
of the named export.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7045-Minor-Lint-Fix-two-warnings-2bb6d73d365081758369d14bafcd7aa0)
by [Unito](https://www.unito.io)
 2025-11-29 19:15:06 -07:00
Christian Byrne
f39faf6b8e mark vue nodes menu toggle with beta tag (#7047) 
## Summary

Adds a "Beta" tag next to the Nodes 2.0 menu item toggle to better
indicate to users, especially new users, that the feature is in beta.

<img width="752" height="918" alt="Selection_2477"
src="https://github.com/user-attachments/assets/cf341b2b-1af6-4259-8449-bf157989b7b3"
/>

<img width="433" height="880" alt="Selection_2476"
src="https://github.com/user-attachments/assets/a0f658bf-1904-4d79-9ca7-c81c458adc54"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7047-mark-vue-nodes-menu-toggle-with-beta-tag-2bb6d73d3650815e8a9aceaa9250c02e)
by [Unito](https://www.unito.io)
 2025-11-29 18:33:57 -07:00
Christian Byrne
f61bfe666e style: move border and shadow style to outer container to fix topbar badges shadow/border (#7044) 
## Summary

Moves the shadow and border from workflow tabs to outer container so
that there is no longer an inconsistency with the badges and topbar
bottom border and shadows.

## Changes

| Before | After |
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
| <img width="1522" height="598" alt="Selection_2473"
src="https://github.com/user-attachments/assets/92aa602c-a018-4b3d-8606-9c00552ffc20"
/> | <img width="1522" height="598" alt="Selection_2472"
src="https://github.com/user-attachments/assets/13c75da3-a938-442a-9bf6-9c30d822a610"
/> |
| <img width="1522" height="598" alt="Selection_2474"
src="https://github.com/user-attachments/assets/e84efd2a-6ae1-44a6-9901-0f902e942b64"
/> | <img width="1522" height="598" alt="Selection_2475"
src="https://github.com/user-attachments/assets/66d4852e-eed7-49f9-8f0f-9e8bbcdcb0b8"
/> |

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7044-style-move-border-and-shadow-style-to-outer-container-to-fix-topbar-badges-shadow-border-2ba6d73d365081b991a3f981db87f434)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-11-29 17:52:03 -07:00