[feat] integrate asset browser with widget system #5629

arjansingh · 2025-09-18T02:16:48Z

Summary

Add asset browser dialog integration for combo widgets with full animation support and proper state management.

(Thank you Claude from saving me me from merge conflict hell on this one.)

Changes

Widget integration: combo widgets now use AssetBrowserModal for eligible asset types
Dialog animations: added animateHide() for smooth close transitions
Async operations: proper sequencing of widget updates and dialog animations
Service layer: added getAssetsForNodeType() and getAssetDetails() methods
Type safety: comprehensive TypeScript types and error handling
Test coverage: unit tests for all new functionality
Bonus: fixed the hardcoded labels in AssetFilterBar

Widget behavior:

Shows asset browser button for eligible widgets when asset API enabled
Handles asset selection with proper callback sequencing
Maintains widget value updates and litegraph notification

Review Focus

I will call out some stuff inline.

Screenshots

2025.09.17.AssetBrowserMVP.mov

┆Issue is synchronized with this Notion page by Unito

Add asset browser dialog integration for combo widgets with full animation support and proper state management. Key changes: - Widget integration: combo widgets now use AssetBrowserModal for eligible asset types - Dialog animations: added animateHide() for smooth close transitions - Async operations: proper sequencing of widget updates and dialog animations - Service layer: added getAssetsForNodeType() and getAssetDetails() methods - Type safety: comprehensive TypeScript types and error handling - Test coverage: unit tests for all new functionality Widget behavior: - Shows asset browser button for eligible widgets when asset API enabled - Handles asset selection with proper callback sequencing - Maintains widget value updates and litegraph notification 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

arjansingh · 2025-09-18T02:17:11Z

package.json

    "lint": "eslint src --cache",
    "lint:fix": "eslint src --cache --fix",
+    "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
+    "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",


Just helper functions for myself.

github-actions · 2025-09-18T02:17:15Z

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 09/19/2025, 08:06:53 PM UTC

📈 Summary

Total Tests: 449
Passed: 419 ✅
Failed: 0
Flaky: 1 ⚠️
Skipped: 29 ⏭️

📊 Test Reports by Browser

✅ chromium: View Report • ✅ 412 / ❌ 0 / ⚠️ 1 / ⏭️ 29
✅ chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ mobile-chrome: View Report • ✅ 4 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

src/stores/dialogStore.ts

github-actions · 2025-09-18T02:58:12Z

🔧 Auto-fixes Applied

This PR has been automatically updated to fix linting and formatting issues.

⚠️ Important: Your local branch is now behind. Run git pull before making additional changes to avoid conflicts.

Changes made:

ESLint auto-fixes
Prettier formatting

src/platform/assets/components/AssetBrowserModal.vue

src/platform/assets/composables/useAssetBrowser.ts

src/platform/assets/composables/useAssetBrowserDialog.ts

src/platform/assets/services/assetService.ts

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

DrJKL · 2025-09-18T19:16:18Z

tests-ui/platform/assets/composables/useAssetBrowser.test.ts

+    it('should handle missing user_metadata.filename as error', async () => {
+      const consoleErrorSpy = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => {})


We could keep the default behavior and set silent to passed-only if the error message in the console would be useful.

tests-ui/platform/assets/composables/useAssetBrowser.test.ts

tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

christian-byrne · 2025-09-18T20:12:40Z

src/platform/assets/components/AssetBrowserModal.vue

 // Handle asset selection and emit to parent
-const handleAssetSelectAndEmit = (asset: AssetDisplayItem) => {
-  selectAsset(asset) // This logs the selection for dev mode
+const handleAssetSelectAndEmit = async (asset: AssetDisplayItem) => {


nit: (This does not need to be done in this PR). We can consider moving the selection to the onBeforeUnmount of the modal. One benefit is that right now, we are doing a blocking schema validation and potentially network request on each selection which may cause sluggishness during UI interactions (compared with deferring that to a single time when closing dialog).

Will look at this in follow up.

src/platform/assets/services/assetService.ts

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

src/stores/dialogStore.ts

src/components/dialog/GlobalDialog.vue

github-actions · 2025-09-19T18:47:58Z

🔧 Auto-fixes Applied

This PR has been automatically updated to fix linting and formatting issues.

⚠️ Important: Your local branch is now behind. Run git pull before making additional changes to avoid conflicts.

Changes made:

ESLint auto-fixes
Prettier formatting

arjansingh · 2025-09-19T19:43:39Z

src/platform/assets/components/AssetCard.vue

          'hover:transform hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/10 hover:border-gray-400',
          'dark-theme:hover:shadow-lg dark-theme:hover:shadow-black/30 dark-theme:hover:border-charcoal-700',
-          'focus:outline-none focus:ring-2 focus:ring-blue-500 dark-theme:focus:ring-blue-400'
+          'focus:outline-none focus:transform focus:-translate-y-0.5 focus:shadow-lg focus:shadow-black/10 dark-theme:focus:shadow-black/30'


more in line with current design system.

christian-byrne · 2025-09-19T20:20:42Z

src/platform/assets/composables/useAssetBrowserDialog.ts

+    const assets: AssetItem[] = await assetService
+      .getAssetsForNodeType(props.nodeType)
+      .catch((error) => {
+        console.error(
+          'Failed to fetch assets for node type:',
+          props.nodeType,
+          error
+        )
+        return []
+      })


I think this might cause some sluggishness because the user will do the action to open the dialog -> we must wait for the request to resolve -> then dialog opens.

A possible good alternative that we use is something like:

<template> <ProgressSpinner v-if="isLoading" /> <div v-else-if="error">Failed to load assets</div> <AssetGrid v-else :assets="assets" /> </template> <script setup lang="ts"> import { useAsyncState } from '@vueuse/core' import ProgressSpinner from 'primevue/progressspinner' import type { AssetItem } from '@/platform/assets/schemas/assetSchema' import { assetService } from '@/platform/assets/services/assetService' const { nodeType } = defineProps<{ nodeType: string }>() const { state: assets, isLoading, error, } = useAsyncState<AssetItem[]>( () => assetService.getAssetsForNodeType(nodeType), [], { immediate: true } ) </script>

Can also use the error component we often use:

<template> <div> <ProgressSpinner v-if="isLoading" /> <NoResultsPlaceholder v-else-if="error" icon="pi pi-exclamation-triangle" title="Failed to load assets" message="There was a problem fetching assets for this node type." buttonLabel="Retry" @action="execute" /> <AssetGrid v-else :assets="assets" /> </div> </template>

Will get this in a future PR. Good point.

src/platform/assets/composables/useAssetBrowserDialog.ts

arjansingh commented Sep 18, 2025

View reviewed changes

src/stores/dialogStore.ts Outdated Show resolved Hide resolved

arjansingh and others added 5 commits September 17, 2025 19:45

[fix] add i18n strings for AssetFilterBar labels

ac559d5

[fix] add combo widget type checks

0926b76

[fix] clean up anys

90e1bda

[fix] use zod to validate filename

453d6a5

[auto-fix] Apply ESLint and Prettier fixes

49f2ffd

arjansingh marked this pull request as ready for review September 18, 2025 02:57

arjansingh requested review from Yorha4D, KarryCharon, shinshin86 and a team as code owners September 18, 2025 02:57

dosubot bot added the size:XL This PR changes 500-999 lines, ignoring generated files. label Sep 18, 2025

arjansingh requested review from DrJKL, Kosinkadink and christian-byrne September 18, 2025 02:58

DrJKL self-assigned this Sep 18, 2025

DrJKL previously approved these changes Sep 18, 2025

View reviewed changes

DrJKL removed their assignment Sep 18, 2025

christian-byrne added the area:assets label Sep 18, 2025

christian-byrne requested changes Sep 18, 2025

View reviewed changes

DrJKL assigned arjansingh Sep 19, 2025

arjansingh added 2 commits September 18, 2025 22:42

[fix] focus AssetCard like we are hovering

434ecfe

[fix] code review feedback

2fc9598

arjansingh dismissed DrJKL’s stale review via 2fc9598 September 19, 2025 05:42

arjansingh commented Sep 19, 2025

View reviewed changes

src/components/dialog/GlobalDialog.vue Outdated Show resolved Hide resolved

arjansingh and others added 3 commits September 19, 2025 10:34

[fix] allow assets with nested folder paths

d956b29

[refactor] do not try to preserve close animation

42450e3

[auto-fix] Apply ESLint and Prettier fixes

6a69335

arjansingh added 2 commits September 19, 2025 12:31

[fix] fix asset selection race condition

28f64b1

[refactor] unnecessary setDirty

da358a1

arjansingh commented Sep 19, 2025

View reviewed changes

[fix] remove unnecessary changes

908c8e4

christian-byrne reviewed Sep 19, 2025

View reviewed changes

christian-byrne approved these changes Sep 20, 2025

View reviewed changes

christian-byrne merged commit fd12591 into main Sep 20, 2025
21 checks passed

christian-byrne deleted the feat/asset-browser-modal-integration branch September 20, 2025 18:44

[feat] integrate asset browser with widget system #5629

[feat] integrate asset browser with widget system #5629

Uh oh!

Conversation

arjansingh commented Sep 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Review Focus

Screenshots

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎭 Playwright Test Results

📈 Summary

📊 Test Reports by Browser

Uh oh!

Uh oh!

github-actions bot commented Sep 18, 2025

🔧 Auto-fixes Applied

Changes made:

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Sep 19, 2025

🔧 Auto-fixes Applied

Changes made:

Uh oh!

arjansingh Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

arjansingh commented Sep 18, 2025 •

edited

Loading

github-actions bot commented Sep 18, 2025 •

edited

Loading

arjansingh Sep 19, 2025 •

edited

Loading