Commit Graph

13 Commits

Author SHA1 Message Date
Jin Yi
0288b02113 [refactor] Manager dialog simplification (#8041)
## Summary
Simplifies the Manager dialog by consolidating components and using
BaseModalLayout with v-model support for right panel state.

## Changes
- **Consolidation**: Merged ManagerDialogContent, ManagerHeader,
ManagerNavSidebar, RegistrySearchBar, and SearchFilterDropdown into
single ManagerDialog component
- **Right panel**: Added v-model:rightPanelOpen to BaseModalLayout for
external panel state control; clicking a node card now auto-opens the
info panel
- **Cleanup**: Removed unused useResponsiveCollapse composable, TabItem
and SearchOption types
- **UI tweaks**: Moved action buttons (Install All/Update All) from
header-right-area to contentFilter area


[manager-capture.webm](https://github.com/user-attachments/assets/2dd6092a-965d-4885-8ba6-6a2cc51f024a)

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

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8041-refactor-Manager-dialog-simplification-2e86d73d3650815ba699e49a2748b682)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
2026-01-15 23:32:02 -08:00
Alexander Brown
51a7654a39 perf(AssetBrowserModal): virtualize asset grid to reduce network requests (#7919)
## Problem

The `AssetBrowserModal` triggers hundreds of network requests when
opened because `AssetGrid.vue` renders all asset cards immediately using
a simple `v-for` loop. Each `AssetCard` loads its thumbnail image,
causing a flood of simultaneous requests.

## Solution

Replace the simple `v-for` with the existing `VirtualGrid` component
(already used in `AssetsSidebarTab.vue` and `ManagerDialogContent.vue`)
to only render visible items plus a small buffer.

## Changes

- **`AssetGrid.vue`**: Use `VirtualGrid` with computed `assetsWithKey`
that adds the required `key` property from `asset.id`
- **`BaseModalLayout.vue`**: Add `flex-1` to content container for
proper height calculation (required for `VirtualGrid` to work)

## Testing

- All 130 asset-related tests pass
- TypeScript and lint checks pass

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7919-perf-AssetBrowserModal-virtualize-asset-grid-to-reduce-network-requests-2e36d73d365081a1be18d0eb33b7ef8a)
by [Unito](https://www.unito.io)

Co-authored-by: Amp <amp@ampcode.com>
2026-01-08 19:05:55 -08:00
Alexander Brown
644a8bc60c fix: Button sizing in modals and asset browser (#7920)
## Summary

Fix button sizing inconsistencies in modal dialogs and the asset
browser.

## Changes

- **What**: Fix Import button using responsive size (`lg`/`icon` based
on breakpoint) and ensure Modal Close button has explicit `w-10` width
for consistent sizing.

## Review Focus

Button sizing consistency across the modal UI.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7920-fix-Button-sizing-in-modals-and-asset-browser-2e36d73d365081fc997af8be1e928049)
by [Unito](https://www.unito.io)
2026-01-09 03:02:59 +00:00
Jin Yi
a2e0c3d596 feature: model browser folder grouping (#7892) 2026-01-08 16:58:06 -08:00
Alexander Brown
fba580dc7d Component: Button Migration 2: IconButton (#7598)
## Summary

Still a work in progress. Buttons with just icons are already in the
stories for button.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7598-WIP-Component-Button-Migration-2-IconButton-2cc6d73d365081c09143c63464ac60b7)
by [Unito](https://www.unito.io)
2025-12-17 18:11:43 -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
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
Alexander Brown
b03cf7e11d Style: Token renaming and style organization (#6337)
## Summary

Align color names and organize style.css some more

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6337-Style-Token-renaming-and-style-organization-29a6d73d365081b69f25ce1298c67fdc)
by [Unito](https://www.unito.io)
2025-10-28 12:13:28 -07:00
Alexander Brown
b943c0fa75 Lint: Add tailwind linter (#5984)
## Summary

Adds the [tailwind lint
plugin](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#eslint-plugin-tailwindcss)
and fixes the currently fixable rules ([v4 is still in
beta](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#about-tailwind-css-4-support)).

## Changes

- **What**: Enforces things like consistent class order, and eventually
can prohibit extra classes that could be utilities instead
- **Dependencies**: The plugin and its types

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5984-Lint-Add-tailwind-linter-2866d73d365081d89db0d998232533bb)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-10-08 19:39:14 -07:00
Alexander Brown
99b3a59679 Style: Standardize icon use Part 1 (#5947)
## Summary

Remove the mix of class based and component style icons in favor of just
[classes](https://iconify.design/docs/usage/css/tailwind/tailwind4/#basic-usage).

## Changes

- **What**: Migrate existing lucide icons

## Review Focus

What differs between the icons before and now?

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5947-Style-Standardize-icon-use-Part-1-2846d73d365081bfa66ceb6bdaa9ff02)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-10-07 17:53:38 -07:00
Arjan Singh
abf2b3b980 Full Asset Selection Experience (Assets API) (#5900)
## Summary

Full Integration of Asset Browsing and Selection when Assets API is
enabled.

## Changes

1. Replace Model Left Side Tab with experience
2. Configurable titles for the Asset Browser Modal
3. Refactors to simplify callback code
4. Refactor to make modal filters reactive (they change their values
based on assets displayed)
5. Add `browse()` mode with ability to create node directly from the
Asset Browser Modal (in `browse()` mode)

## Screenshots

Demo of many different types of Nodes getting configured by the Modal



https://github.com/user-attachments/assets/34f9c964-cdf2-4c5d-86a9-a8e7126a7de9

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5900-Feat-asset-selection-cloud-integration-2816d73d365081ccb4aeecdc14b0e5d3)
by [Unito](https://www.unito.io)
2025-10-03 20:34:59 -07:00
Arjan Singh
13ce23399c Asset Browser Design Review + Filters (#5737)
## Summary

Fixed design feedback and wired up the filter controls.

## Review Focus

Design Feedback:
-
[4872888](48728881af)
-
[9a0b63e](9a0b63edce)

Filters Hookup:
-
[07f22f8](07f22f8074)

Misc (can focus less on):
- claude guidance:
[23e6fa9](23e6fa9723)
- test helpers:
[7801ed9](7801ed9e28)

## Screenshots (if applicable)
<img width="1534" height="1175" alt="Screenshot 2025-09-23 at 1 03
12 PM"
src="https://github.com/user-attachments/assets/d82088e4-7d72-4c6f-904e-5180774d64a5"
/>

<img width="1794" height="793" alt="Screenshot 2025-09-23 at 1 03 22 PM"
src="https://github.com/user-attachments/assets/56eac2ba-5ecc-4a20-843f-ce683dea668c"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5737-Asset-Browser-Design-Review-Filters-2776d73d3650813e890bd16fa6a0433f)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: GitHub Action <action@github.com>
2025-09-25 11:17:26 -07:00
Jin Yi
e70ddea684 fix: Add dropdown size control to Select components and improve UI (#5290)
* feature: size adjust

* feature: design adjust

* fix: popover width, height added

* fix: li style override

* refactor: improve component readability and
  maintainability per PR feedback

  - Replace CardGridList component with
  createGridStyle utility function
  - Add runtime validation for grid column values
  - Remove !important usage in MultiSelect, use cn()
  function instead
  - Extract popover sizing logic into
  usePopoverSizing composable
  - Improve class string readability by splitting
  into logical groups
  - Use Tailwind size utilities (size-8, size-10)
  instead of separate width/height
  - Remove magic numbers in SearchBox, align with
  button sizes
  - Rename BaseWidgetLayout to BaseModalLayout for
  clarity
  - Enhance SearchBox click area to cover entire
  component
  - Refactor long class strings using cn() utility
  across components

* fix: BaseWidgetLayout => BaseModalLayout

* fix: CardGrid deleted

* fix: unused exported types

* Update test expectations [skip ci]

* chore: code review

* Update test expectations [skip ci]

* chore: restore screenshot

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-09-11 03:01:06 -07:00