Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-01 05:49:54 +00:00
Code Issues Packages Projects Releases Wiki Activity
6,362 Commits 578 Branches 531 Tags
d3bd85db7f9e0ec202dfb00a80b2a3d8a67f84f0
Commit Graph

64 Commits

Author SHA1 Message Date
pythongosssss
2466949192 Remove hamburger menu from tabs (#8067) 
## Summary

We added the menu button to both the tabs & where the subgraph menu
button was previously in order to get feedback on where this button
should be. We've received feedback that the one on the tabs is not a
common UX element, and that having both seems like a bug, and that the
one on the graph is prefered. Due to this, we're removing the one on the
tabs.

## Changes

- Remove tab menu button

## Screenshots (if applicable)

Before:
<img width="733" height="224" alt="image"
src="https://github.com/user-attachments/assets/3f916d96-4bfe-482d-a8eb-8b18a7327334"
/>

After:
<img width="731" height="248" alt="image"
src="https://github.com/user-attachments/assets/5eeb31e5-e49f-409a-8eac-04773182a145"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8067-Remove-hamburger-menu-from-tabs-2e96d73d3650815aa80af4d5aa8767cd)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2026-01-14 21:01:45 -08:00
pythongosssss
dfb78b2e87 Subgraph/workflow breadcrumbs menu updates (#7852) 
## Summary
For users who don't use subgraphs, the workflow name in the top left can
be unnecessarily obstructive so this updated collapses it to a simple
icon until a subgraph is entered.

## Changes

- Add menu button to WorkflowTab for quick workflow actions
- Add menu and back button to SubgraphBreadcrumb
- Extract shared menu items to useBreadcrumbMenu composable
- Add Comfy.RenameWorkflow command for renaming persisted workflows
- Menu always shows root workflow menu, even when in subgraph

## Screenshots (if applicable)

<img width="399" height="396" alt="image"
src="https://github.com/user-attachments/assets/701ab60e-790f-4d1e-a817-dc42b2d98712"
/>
<img width="569" height="381" alt="image"
src="https://github.com/user-attachments/assets/fcea3ab0-8388-4c72-a649-1428c1defd6a"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7852-Subgraph-workflow-breadcrumbs-menu-updates-2df6d73d3650815b8490ca0a9a92d540)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: GitHub Action <action@github.com>
 2026-01-12 16:08:28 -07:00
Christian Byrne
af094ebefc Fix run badge anchoring (#7912) 
## Summary
Restore the shared button's positioning context so the run-queue badge
anchors to the correct spot.

## Changes
- **What**: add `position: relative` back to `button.variants.ts` so
badge overlays stay attached to their buttons

## Review Focus
- Make sure no buttons rely on being `position: static` (should be
unaffected) and that the run badge now sits beside the Run button
instead of the window edge.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7912-Fix-run-badge-anchoring-2e26d73d365081aa8fefe5381f37cfa4)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2026-01-08 17:07:01 -07:00
Alexander Brown
7b68b19f11 Component: The Rest of the PrimeVue buttons (#7649) 
## Summary

Automated initial change, cleaned up manually.

Please check the screenshot changes.

Includes a11y updates to icon buttons.

Doesn't hit the buttons in Desktop.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7649-WIP-Component-The-Rest-of-the-PrimeVue-buttons-2ce6d73d365081d68e06f200f1321267)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
 2025-12-29 15:03:34 -08:00
Alexander Brown
6d57b4def5 Fix: Minimap rendering (#7639) 
## Summary

Restores the refs, but in a way that vue-tsc understands.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7639-Fix-Minimap-rendering-2ce6d73d3650817eb323ce7e2022ab74)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>
 2025-12-19 11:52:13 -08:00
Alexander Brown
6244cf1008 Tests: Golden Updates (#7624) 
## Summary

...

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7624-Tests-Golden-Updates-2cd6d73d3650812eb92ece7c78d29c1b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-12-18 15:01:01 -08:00
AustinMroz
b22ba97a13 Support "control after generate" in vue (#6985) 
Continuation of #6034 with
- Updated synchronization for seed
- Properly truncates the displayed widget value for the button
- Synchronizes control after generate state with litegraph and allows
for serialization

Several issues from original PR have not (yet) been addressed, but are
likely better moved to future PR
- fix step value being 10 (legacy system)
- ensure it works with COMBO (Fixed in #7095)
- ensure it works with FLOAT (Fixed in #7095)
- either implement or remove the config button functionality - think it
should open settings?

<img width="280" height="694" alt="image"
src="https://github.com/user-attachments/assets/f36f1cb0-237d-4bfc-bff1-e4976775cf98"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6985-Support-control-after-generate-in-vue-2b86d73d365081d8b01ce489d887ff00)
by [Unito](https://www.unito.io)

---------

Co-authored-by: bymyself <cbyrne@comfy.org>
Co-authored-by: github-actions <github-actions@github.com>
 2025-12-13 05:23:56 -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
AustinMroz
6156e22bac Implement widget borders in vue (#7322) 
Adds support for displaying the "promoted" and "advanced" border
indicators when in vue mode.

Requires some (hopefully minor and generally beneficial) styling changes
to make sure that the widgets are contained within their border.

Note that the 'advanced' functionality sees minimal use and is likely to
be revamped in the future.

<img width="372" height="417" alt="image"
src="https://github.com/user-attachments/assets/8ea1e66b-2a4e-4a16-996f-289a26e39708"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7322-Implement-widget-borders-in-vue-2c56d73d36508187b881f97e373d433b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-12-10 17:23:59 -08: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
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
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
Simula_r
ec1a7f1da4 fix: vue nodes image preview widget, better multi image gallery support (#7178) 
## Summary

Fix image preview to better handle multiple images, switching between
them, and showing the skeleton correctly.

## Changes

- **What**: ImagePreview.vue

## Screenshots (if applicable)

Old (broken)


https://github.com/user-attachments/assets/e4997569-bdf5-4015-a83c-bbaabeac96d6

New (fixed)


https://github.com/user-attachments/assets/19dda841-c909-4fcb-b4d4-99aa1372843b

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7178-fix-vue-nodes-image-preview-widget-better-multi-image-gallery-support-2c06d73d365081a2afa9e398200e8379)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-12-05 13:52:18 -08:00
Johnpaul Chiwetelu
3c8def778e chore: Regenerate screenshots (#7180) 
## Summary
Empty PR to trigger screenshot regeneration in CI.

## Test plan
- [ ] CI generates updated screenshots

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7180-chore-Regenerate-screenshots-2c06d73d3650814187cfd5d11852a0cf)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-12-05 06:26:49 +01: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
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
6d22562d40 Polish: Make the clickable area for the slots more forgiving (#7084) 
## Summary

Makes the area a bit to the left and right of the dot also clickable.

Addresses complaints about it being tricky to connect nodes in Nodes
2.0.

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-12-02 01:23:25 +00:00
Alexander Brown
072f1f6ced Fix: Slots without type colors (#7081) 
## Summary

Default to a gray

## Screenshots (if applicable)
<img width="416" height="205" alt="image"
src="https://github.com/user-attachments/assets/0eeee37d-f9c1-4893-ae1d-ee20cabf0f46"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7081-Fix-Slots-without-type-colors-2bc6d73d365081499e54e8a10b4b4b02)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-12-01 15:05:59 -08: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
Simula_r
4b87b1fdc5 fix: remove LOD from vue nodes (#6950) 
## Summary

Refactor to remove LOD from vue nodes. Also, hide Litegraph LOD settings
in vue nodes to prevent confusion / stale setting. Keep litegraph LOD
the exact same.

## Changes

- **What**: settings, all LOD related code in vue nodes

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6950-fix-remove-LOD-from-vue-nodes-2b76d73d365081568723f8cbc7be7e17)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-11-26 12:26:05 -07:00
Alexander Brown
d58a464c9c Style: Widget spacing and Markdown padding (#6902) 
## Summary

Less padding, looks nice.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6902-Style-Widget-spacing-and-Markdown-padding-2b66d73d365081cca409dbabc7b883bb)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-11-24 18:31:21 -08:00
Alexander Brown
df373af987 Feat: Restore settings button to the sidebar. (#6892) 
## Summary

Opens settings with a single click!
<img width="247" height="252" alt="image"
src="https://github.com/user-attachments/assets/c571d5e0-4973-4570-a542-fff343364ec0"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6892-Feat-Restore-settings-button-to-the-sidebar-2b56d73d36508102a48aec318d468303)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-11-24 12:23:29 -08:00
Alexander Brown
c06a7279e2 Style: Grid for widgets (#6891) 
## Summary

Keeps the controls and widgets a consistent width, but lets the size be
more flexible

## Screenshots

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

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6891-Style-Grid-for-widgets-2b56d73d365081a29c30d337f3be1af6)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-11-24 11:46:24 -08:00
Benjamin Lu
26578981d4 Remove queue sidebar tab (#6724) 
## Summary
- drop the queue sidebar entry, its component, and the supporting
composable so only the overlay-based queue UI remains
- clean up the related tests and keybindings so nothing references the
removed tab
- prune the unused queue task card components to keep the repo tidy
- remove unused queue sidebar translations and command strings across
all locales

## Testing
- pnpm typecheck
- pnpm lint:fix

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6724-Remove-queue-sidebar-tab-2ae6d73d3650811db0d4c5ad4c5ffc8d)
by [Unito](https://www.unito.io)

---------

Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Jin Yi <jin12cc@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>
 2025-11-19 19:50:24 -07:00
Benjamin Lu
674d884e79 Remove queue cancel controls (#6723) 
## Summary
- remove the interrupt/clear controls from the run button cluster
- drop the queue pending count dependencies that only fed those controls

This is at the request of product design, because this functionality is
being relocated to the queue progress overlay in bl-execution

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6723-Remove-queue-cancel-controls-2ae6d73d365081ddaa63ea9e3447ad7f)
by [Unito](https://www.unito.io)

---------

Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Jin Yi <jin12cc@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>
 2025-11-19 16:54:27 -07:00
Benjamin Lu
e42715086e Implement workflow progress panel (#6092) 
Adds a workflow progress panel component underneath the
`actionbar-container`.

I suggest starting a review at the extraneous changes that were needed.
Including but not limited to:

- `get createTime()` in queueStore
- `promptIdToWorkflowId`, `initializingPromptIds`, and
`nodeProgressStatesByPrompt` in executionStore
- `create_time` handling in v2ToV1Adapter
- `pointer-events-auto` on ComfyActionbar.vue

The rest of the changes should be contained under
`QueueProgressOverlay.vue`, and has less of a blast radius in case
something goes wrong.

---------

Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Jin Yi <jin12cc@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>
 2025-11-18 22:43:49 -08:00
Alexander Brown
00fa9b691b Fix: Simplify the widget state logic (#6741) 
## Summary

Fixes the case where a value is updated in the graph but the result
doesn't reflect on the widget representation on the relevant node.

## Changes

- **What**: Uses vanilla Vue utilities instead of a special utility
- **What**: Fewer places where state could be desynced.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6741-Fix-WIP-Simplify-the-widget-state-logic-2af6d73d36508160b729db50608a2ea9)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-11-18 14:32:22 -08:00
Simula_r
0cff8eb357 fix: arbitrary styles, min size <= content, ensure layout calc, trunc… (#6731) 
## Summary

### Problem:
After [vue node compacting
PR](https://github.com/Comfy-Org/ComfyUI_frontend/pull/6687) the white
space within the node has been greatly reduced, lowering the min
intrinsic size, thus allowing us to reduce the amount we need to scale
up via ensureCorrectLayoutScale(), therefore increasing readability of
nodes. Great!

However, a side effect of reducing the scale factor means nodes with
larger min content will not be scaled up enough causing nodes to be too
large in many cases.

For example, if the min intrinsic width is very long due to input
length:
<img width="807" height="519" alt="image"
src="https://github.com/user-attachments/assets/a6ea3852-bed5-49b2-b10e-c2e65c6450b2"
/>

### Solution:
Allow for nodes to be resized less than their intrinsic min width. And
truncate widget inputs like many other node UIs do.

IMPORTANT: when a node is added via search or other, it will still get a
min size based on its intrinsic content it just wont be the min width!
So best of both worlds.

<img width="670" height="551" alt="image"
src="https://github.com/user-attachments/assets/f4f5ec8c-037e-472f-a5a1-d8a59a87c0b0"
/>


this means we choose a default min width and clamp resize to it. This
also means we have to remove the arbitrary min width values that were
sprinkled around the vue node widgets. They are not needed because
instead of min width, they can take up full width and inherit the sizing
from the node min width! This makes nodes like little browser windows
and widgets are just responsive elements with in. Much more natural imo.

### Bonus
- Set ensureCorrectLayouScale() to scale factor of 1.2 which means vue
nodes are now only being set 20% bigger than LG. That covers for the
height difference we cant change!
- Fix ensureCorrectLayouScale() to offset y position for groups / better
alignment
- Get rid of arbitrary inflexible min width like min-[417px] which
shouldnt have been used the first place
- Make Select and Input overlay portals width set to their content


## Changes

**What**: 
- Node resizing behavior
- Node widget min width
- Widget input and slot truncation
- Misc arbitrary styling that should have been fluid

## Screenshots (if applicable)


https://github.com/user-attachments/assets/3ea4b8fe-565a-47f7-b3ab-6cef56cecde5


https://github.com/user-attachments/assets/2fe1e1a0-a9dc-4000-b865-ce2d8c7f3606


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6731-fix-arbitrary-styles-min-size-content-ensure-layout-calc-trunc-2af6d73d365081eab507c2f1638a4194)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-11-18 13:52:23 -07:00
Alexander Brown
471ccca1dd Style: Design System use across more components (#6705) 
## Summary

Only remaining use is in `buttonTypes.ts` which @viva-jinyi is going to
be working on to consolidate our different buttons soon.

## Changes

- **What**: Replace light/dark colors with theme aware design system
tokens.

## Review Focus

Double check the chosen colors for the components

## Screenshots

| Before | After |
| ------ | ----- |
| <img width="607" height="432" alt="image"
src="https://github.com/user-attachments/assets/6c0ee6d6-819f-40b1-b775-f8b25dd18104"
/> | <img width="646" height="488" alt="image"
src="https://github.com/user-attachments/assets/9c8532de-8ac6-4b48-9021-3fd0b3e0bc63"
/> |

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6705-Style-WIP-Design-System-use-across-more-components-2ab6d73d365081619115fc5f87a46341)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-11-17 12:27:10 -08:00
Jin Yi
3effe714f3 [feat] Enable Assets sidebar in production (#6717) 
## Summary
- Removed development-only restriction for Assets sidebar tab
- Assets sidebar is now available in all environments (production and
development)

## Changes
- Removed `import.meta.env.DEV` condition check in
`registerCoreSidebarTabs()`
- Removed outdated comment about development-only display

## Test plan
- [ ] Verify Assets sidebar appears in production build
- [ ] Verify Assets sidebar functionality works correctly in production

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6717-feat-Enable-Assets-sidebar-in-production-2ae6d73d36508157a7e1d4eb9cbf0a42)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: github-actions <github-actions@github.com>
 2025-11-16 23:03:36 -07:00
Alexander Brown
ddbd26c062 Style: Fix slot colors to pull values from the theme (#6688) 
## Summary

Pull colors for the slots from the Theme.

## Screenshots

| Before | After |
| ------ | ----- |
| <img width="798" height="383" alt="image"
src="https://github.com/user-attachments/assets/6c9cad2c-87db-41e2-92b9-d5d14f60d55c"
/> | <img width="964" height="407" alt="image"
src="https://github.com/user-attachments/assets/932d6e61-2eb3-462b-9b64-f0d4ce1804db"
/> |

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6688-Style-Fix-slot-colors-to-pull-values-from-the-theme-2ab6d73d3650818d9a73ecc9ab26d0e8)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-11-13 17:26:01 -08:00
Alexander Brown
adfd2e514e [Style] Compact Modern Nodes (#6687) 
## Summary

Simple and clean is the way that we're making the nodes tonight.

## Changes

- **What**: Smaller minimum widths for nodes and labels
- **What**: Smaller font for the labels
- **What**: Removed outlines for widgets
- **What**: Fixes a text/background issue with buttons on widgets
- **What**: Smaller header
- **What**: Less padding within the node itself

## Review Focus

Check out the new styles and how they align with the Designs.

## Screenshots

| Before | After |
| --- | --- |
| <img width="542" height="486" alt="image"
src="https://github.com/user-attachments/assets/41fe9801-7a43-49ac-87fc-36d3b2ee82fb"
/> | <img width="411" height="388" alt="image"
src="https://github.com/user-attachments/assets/a7c21120-bf67-4039-86b3-c348bcc4341b"
/> |

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

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6687-Style-Compact-Modern-Nodes-2aa6d73d365081c48db3c5491c556dc9)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-11-13 16:32:38 -08:00
Christian Byrne
549ef79e02 update minimap and canvas bg to use menu color tokens (#6589) 
Update minimap and graph canvas menu (bottom right) to use menu tokens.
Change canvas BG color on default dark theme.

<img width="3840" height="2029" alt="image"
src="https://github.com/user-attachments/assets/6d168981-df27-40c0-829c-59150b8a6a12"
/>


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6589-wip-Style-graph-canvas-color-2a26d73d365081cb88c4c4bdb2b6d3a5)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
 2025-11-05 12:16:19 -08:00
Johnpaul Chiwetelu
265f1257e7 Updated node tokens (#6569) 
This pull request updates the design system color tokens and refactors
node and widget component styles throughout the codebase to use new,
more consistent CSS variables. The changes ensure that node and widget
components are styled using unified design tokens, improving
maintainability and theme support for both light and dark modes.

**Design System Token Updates**

* Added new component and node-related CSS variables for background,
border, foreground, and widget states in both light and dark themes in
`style.css`.
[[1]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R246-R256)
[[2]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R354-R364)
* Introduced `--color-graphite-400` and adjusted several existing color
assignments for better palette consistency.
[[1]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R76)
[[2]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0L304-R316)
* Updated semantic CSS variables to reference the new component/node
tokens for easier usage in components.
* Changed `--secondary-background-hover` to match
`--secondary-background` for improved hover consistency.

**Component Refactoring: Node and Widget Styles**

* Refactored Vue component classes and inline styles to use the new CSS
variables for node backgrounds, borders, and widget states, replacing
legacy variables like `bg-node-component-surface` and
`border-node-component-border` with `bg-component-node-background` and
`border-component-node-border`.
[[1]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2L11-R14)
[[2]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2L39-R39)
[[3]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2L384-R384)
[[4]](diffhunk://#diff-19537a67677431ecdc9aec43877d28814e37edf0e45b0b0b484ea08832cad299L5-R13)
* Updated widget dropdowns, select, and input components to use
`text-component-node-foreground-secondary` for icons and foregrounds,
and new background variables for buttons and inputs.
[[1]](diffhunk://#diff-489229f88dfdfd5d883a3ef7fad6effa0790a18a831d5a9d84642dfb246962a2L29-R29)
[[2]](diffhunk://#diff-489229f88dfdfd5d883a3ef7fad6effa0790a18a831d5a9d84642dfb246962a2L100-R100)
[[3]](diffhunk://#diff-661a09de2721335e118a693b25d09922ada0ccbd0a51284691ed784fbe18874eL13-R13)
[[4]](diffhunk://#diff-2856391d03b0d38db1ed922b5034a05bc32e978c51f8175057d84cf82399d986L13-R13)
[[5]](diffhunk://#diff-4ee47848821aff71b6da0a1bb7fb8976e7879d706f71ff2ab3c5b046f5ef528cL10-R10)
[[6]](diffhunk://#diff-8b7ed2ce6194a262fb1e950294699cb8722630920362143a765802b602ae5fc8L106-R113)
[[7]](diffhunk://#diff-8b7ed2ce6194a262fb1e950294699cb8722630920362143a765802b602ae5fc8L119-R123)
[[8]](diffhunk://#diff-597a77456bf4b0c2d390fc46a930f37156b2f26ca030259b6703e5d39ff6b20eL37-R53)
[[9]](diffhunk://#diff-29348fa2e5b8cec1301a99bdec241379aeefc1747cceeb0c39b7df452ca635ffL7-R7)

**Service Layer Updates**

* Updated the color palette service mapping to use the new CSS variable
names for node and widget colors, ensuring consistency across the
application.
* 



https://github.com/user-attachments/assets/d9535f9a-b459-49bf-b2fe-ed872916fa4e



These changes collectively modernize the styling approach for node and
widget components, making it easier to maintain and extend theme
support.

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-11-05 01:13:17 -07:00
AustinMroz
f38255bff4 Fix sizing of image previews in vue mode (#6557) 
#6352 apparently introduced a regression in scaling for image previews

This PR fixes image scaling and, as a more opinionated change, makes the
image dimensions stay adjacent to the image
<img width="1283" height="668" alt="image"
src="https://github.com/user-attachments/assets/56fabe30-665f-45bb-9ed5-1c1bb79d7e54"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6557-Fix-sizing-of-image-previews-in-vue-mode-2a06d73d365081e4b2a1ebff7b42e9a8)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-11-03 14:27:58 -07:00
pythongosssss
fd236b3587 UI color updates & tweaks (#6381) 
## Summary

Small updates to the UI to make it more visually distinct from the graph
nodes and improving the login button

## Changes

- **What**: 
  - Improve theme support with dynamic colors
  - Standardize surface colors/borders
  - Add shadows to all floating UI elements
  - Change side toolbar to be docked by default
  - Decrease side toolbar width
  - Change login button to icon only
  - Update C button to be more distinctive

## Review Focus

- Theme tokens, I am not sure what the overall plan for how these tokens
will be supported for custom user palettes. I've implemented a method
where default variables are chosen that look nice over all existing
themes, but they can be overridden.

## Screenshots

Dark theme updated color
<img width="958" height="615" alt="image"
src="https://github.com/user-attachments/assets/a2c540cf-6c05-4ad3-996b-8b7b80df8d2d"
/>

Themed & updated menu button (active vs hover vs default)
<img width="58" height="338" alt="github"
src="https://github.com/user-attachments/assets/90244ee2-d5ee-4b26-9d99-f4b8439aa372"
/><img width="58" height="338" alt="nord"
src="https://github.com/user-attachments/assets/053e8e7b-d639-4b72-92d2-ec7e2167aab8"
/><img width="58" height="338" alt="arc"
src="https://github.com/user-attachments/assets/3caeb07b-d41b-4d88-83b4-ef8d45d4e5a6"
/><img width="58" height="338" alt="solarized"
src="https://github.com/user-attachments/assets/6ebf6afb-ec3a-436b-90eb-bda40be1c79f"
/><img width="58" height="338" alt="light"
src="https://github.com/user-attachments/assets/fbb7f96a-b722-40c5-86fa-a0732e166972"
/><img width="58" height="338" alt="dark"
src="https://github.com/user-attachments/assets/5459208b-9256-4c55-9373-169e9cd9f09a"
/>

With labels
<img width="58" height="394" alt="labels"
src="https://github.com/user-attachments/assets/f97ee354-35cd-42b8-896f-57ac39644c1d"
/>

Logged out (only visible on desktop)
<img width="323" height="48" alt="logged out"
src="https://github.com/user-attachments/assets/75b71420-0c1b-446f-8cdd-43c68674d346"
/>

Logged in
<img width="355" height="48" alt="logged in"
src="https://github.com/user-attachments/assets/324fd133-a793-49dd-844a-f93dd5d1effb"
/>


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6381-UI-color-updates-tweaks-29b6d73d3650816384d2ef5617a776a0)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
 2025-11-02 12:43:21 -08:00
AustinMroz
6e4471ad62 Fix node sizing in vue mode (#6289) 
Before

![broken-resize](https://github.com/user-attachments/assets/1d3651f7-8589-439c-99d1-fa67c5970945)
After

![vue-resize](https://github.com/user-attachments/assets/ef97ea8f-b601-4a5c-9c6a-34d3f4b776d2)

Also add ~~content~~
[contain](https://developer.mozilla.org/en-US/docs/Web/CSS/contain)
styling for improved render performance.

Future:
- Update size scaling for WidgetLayoutField widgets.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6289-Fix-node-sizing-in-vue-mode-2986d73d365081ac8fa0da35a635b226)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-28 12:18:57 -07:00
Alexander Brown
55c9cf7b57 Style: explicit font size for the badges (#6260) 
## Summary

More consistent height regardless the text content.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6260-Style-explicit-font-size-for-the-badges-2966d73d365081bd90a0d01f7e104b9a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-24 14:54:59 -07:00
Alexander Brown
233004c837 Feat: Add Badges for Vue Nodes (#6243) 
## Summary

Adds the badges to the header for Vue nodes.


## Review Focus

Design, mostly. Any structures here I'm not handling but should be?

## Screenshots
<img width="1514" height="642" alt="image"
src="https://github.com/user-attachments/assets/387fd2f6-bb4b-4fee-b273-6166a52a3552"
/>

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

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6243-Feat-Add-Badges-for-Vue-Nodes-2956d73d36508184a250d67b127ed4b1)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-24 11:24:27 -07:00
Christian Byrne
93518f7f54 [chore] Regenerate browser test snapshots (#6253) 
## Summary
Trigger snapshot regeneration via CI.

## Test plan
- CI will regenerate snapshots when the `New Browser Test Expectations`
label is added

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6253-chore-Regenerate-browser-test-snapshots-2966d73d365081009b0cdf1a924af7e6)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-23 22:34:08 -07:00
Christian Byrne
68f98e2624 style: change gaps between floating elements from 2 (8px) to 1 (4px) (#6226) 
## Summary

Design request

**Before**

<img width="2643" height="2074" alt="Screenshot from 2025-10-23
11-16-26"
src="https://github.com/user-attachments/assets/1c93879e-bfc4-4054-b0dd-ee0cd296a7ca"
/>

**After**

<img width="2643" height="2074" alt="Screenshot from 2025-10-23
11-16-13"
src="https://github.com/user-attachments/assets/b9327dcc-9b97-424a-8b05-4f5d62beeefa"
/>

## Related

- https://github.com/Comfy-Org/ComfyUI_frontend/pull/6120

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6226-style-change-gaps-between-floating-elements-from-2-8px-to-1-4px-2956d73d3650815b8640c5f3891fe494)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-23 14:01:21 -07:00
Simula_r
e5a0466e40 feat: make login button show only on dekstop (#6213) 
## Summary

Make login and current user button visible on desktop only. 

## Screenshots (if applicable)

<img width="519" height="162" alt="image"
src="https://github.com/user-attachments/assets/80d86145-2bb9-4396-a02d-dc577192cb17"
/>
<img width="482" height="130" alt="image"
src="https://github.com/user-attachments/assets/cd843611-ce23-4cd4-a864-78cac1c7101f"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6213-feat-make-login-button-show-only-on-dekstop-2956d73d365081eb93f1d5da92dc38ee)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-23 02:16:15 +00:00
AustinMroz
6368647cde Fix empty padding on nodes with previews (#6208) 
Followup to #6194. Fixes nodes with image previews having empty padding.
<img width="915" height="565" alt="image"
src="https://github.com/user-attachments/assets/852a5e95-10d5-4fde-a5f1-f2f72ae5ffb6"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6208-Fix-empty-padding-on-nodes-with-previews-2946d73d365081eca299e0cfae420be3)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-22 15:15:03 -07:00
AustinMroz
a5c29a9826 Introduce grow-parent class for widgets (#6194) 
Only some widgets actually want to grow. Flex makes this difficult. This
PR sets up a `widget-expands` class that widgets can use to indicate
that they want to dynamically grow and applies it to the textarea widget
<img width="709" height="860" alt="image"
src="https://github.com/user-attachments/assets/721d99e5-5939-4531-91b5-1cda69d4e8ed"
/>


There's a potential alternative avenue with using `flex-shrink` instead
of `flex-grow`, and using `min-content` for `calculateIntrinsicSize`,
but I've been poking around with that for a while with no success.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6194-Introduce-grow-parent-class-for-widgets-2946d73d3650812f9d03c305ab04e212)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-22 19:17:36 +00:00
Alexander Brown
9cd7d06a6d Fix: Make textarea fill the area available instead of being resizable. (#6190) 
## Summary

Invert the sizing of textareas. They now grow based on the container
instead of being independently resizable.

## Review Focus

Tested the behavior in Note, Markdown Note, CLIP Text Encode, and
Subgrpahs with promoted mutliline text widgets.

Anything else that might break with this?

## Screenshots (if applicable)


https://github.com/user-attachments/assets/4e2da142-d0b7-4629-9814-b637566ac1d6


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

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6190-Fix-Make-textarea-fill-the-area-available-instead-of-being-resizable-2946d73d3650818a9f77c619deb93d0b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-21 19:31:05 -07:00
Christian Byrne
c263f6da25 [style] prevent Vue node selection outline being obscured by image output (#6061) 
## Summary

Adds `px-2` on image to prevent this issue (below) - I think there's a
better solution but I'm not really sure what it is. We use outline for
selection state and it's somewhat complex how our ring/border/outline
with many different node states and interactions works right now. It
will take some CSS skill to allow the images to be totally flush.

<img width="720" height="715" alt="image"
src="https://github.com/user-attachments/assets/0283e036-7a31-45ef-b5cc-af3ac73171c9"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6061-style-prevent-Vue-node-selection-outline-being-obscured-by-image-output-28c6d73d365081d59b34d8f91252de92)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-19 11:52:14 -07:00
Christian Byrne
37d2f25d2f [style] ensure all floating menus have same gap from screen edges (#6120) 
## Summary

Ensures all the floating shell app elements (graph canvas menu, minmap,
floating sidebar) all have .5rem gap between edge and viewport. Was not
proper distance for graph canvas menu and minimap due to splitter
overlay (parent) itself having 8px gap from viewport.

**After**:

<img width="605" height="535" alt="Screenshot from 2025-10-18 01-34-51"
src="https://github.com/user-attachments/assets/215efd5c-541f-441a-8b0d-1eb1f6fce672"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6120-style-ensure-all-floating-menus-have-same-gap-from-screen-edges-2906d73d365081598ae4d16f2380baf8)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-18 05:07:06 -07:00
Christian Byrne
598d170d10 [style] update dropdown button text class in Vue node upload widgets (#6062) 
## Summary

Change colors to match Figma variables.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6062-style-update-dropdown-button-text-class-in-Vue-node-upload-widgets-28c6d73d365081ae8857ddcef06784ef)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-18 02:09:38 -07:00
pythongosssss
984ebef416 Floating Menus - UI rework (#5980) 
## Summary

Enhancing and further modernizing the UI, giving users more usable area
whilst keeping farmiliar positioning and feel of elements.

## Changes

- **What**: Significant restructure of the UI elements, changing
elements from large blocks to floating elements, updating:
- Side toolbar menu (floating style, supports small/normal mode,
combines to scroll on height overflow)
- Bottom tabs panel (floating style, tabs redesigned)
- Action bar (support for docking/undocking menu)
    - Added login/user menu button to top right
- Restyled breadcrumbs (still collapse when overflows)
- Add litegraph support for fps info position (so it isn't covered by
the sidebar)

- **Breaking**: 
- Removed various elements and added new ones, I have tested custom
sidebars, custom actions, etc but if scripts are inserting elements into
"other" elements they may have been (re)moved.
- Remove support for bottom menu
- Remove support for 2nd-row tabs

## Screenshots 
<img width="1116" height="907" alt="ui"
src="https://github.com/user-attachments/assets/b040a215-67d3-4c88-8c4d-f402a16a34f6"
/>


https://github.com/user-attachments/assets/571dbda5-01ec-47e8-b235-ee1b88c93dd0

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5980-Floating-Menus-UI-rework-2866d73d3650810aac60cc1afe979b60)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
 2025-10-16 18:12:09 -07:00
Christian Byrne
10af2300fa rework minimap, toolbox, and menu designs with unified theming (#6038) 
## Summary

This PR redesigns the graph canvas interface components including
minimap, toolbox, and menu systems with updated spacing, colors, and
interaction patterns - using the design tokens directly from Figma,
which can be used elsewhere going forward.

There are some other changes to the designs, outlined
[here](https://www.notion.so/comfy-org/Update-Minimap-Menu-v2-2886d73d365080e88e12f8df027019c0):

- [x]  Update/standardize the padding between viewport and toolbox
- [x] Update toolbox component’s style to match the other floating menus
style (border radius, height, padding and follow theme colors)
- [x]  Expose the minimap button
- [x]  Remove the focus button and delete it’s keybinding
- [x]  Group the hand and the default cursor buttons


https://github.com/user-attachments/assets/92542e60-c32d-4a21-a6f6-e72837a70b17

## Review Focus

New CSS variables for cross-component theming consistency and
CanvasModeSelector component extraction for improved code organization.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6038-rework-minimap-toolbox-and-menu-designs-with-unified-theming-28b6d73d36508191a0c6cf8036d965c4)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
 2025-10-14 14:26:07 -07:00