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)

Author: arjansingh

src/components/sidebar/SideToolbar.vue

@@ -38,6 +38,7 @@ import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCommandStore } from '@/stores/commandStore'
 import { useKeybindingStore } from '@/stores/keybindingStore'
 import { useUserStore } from '@/stores/userStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -51,6 +52,7 @@ import SidebarTemplatesButton from './SidebarTemplatesButton.vue'
 const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
 const userStore = useUserStore()
+const commandStore = useCommandStore()
 
 const teleportTarget = computed(() =>
   settingStore.get('Comfy.Sidebar.Location') === 'left'
@@ -64,9 +66,12 @@ const isSmall = computed(
 
 const tabs = computed(() => workspaceStore.getSidebarTabs())
 const selectedTab = computed(() => workspaceStore.sidebarTab.activeSidebarTab)
-const onTabClick = (item: SidebarTabExtension) => {
-  workspaceStore.sidebarTab.toggleSidebarTab(item.id)
-}
+
+const onTabClick = async (item: SidebarTabExtension) =>
+  await commandStore.commands
+    .find((cmd) => cmd.id === `Workspace.ToggleSidebarTab.${item.id}`)
+    ?.function?.()
+
 const keybindingStore = useKeybindingStore()
 const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
   const keybinding = keybindingStore.getKeybindingByCommandId(

src/components/widget/layout/BaseModalLayout.vue

@@ -48,7 +48,10 @@
           <main class="flex flex-col flex-1 min-h-0">
             <!-- Fallback title bar when no leftPanel is provided -->
             <slot name="contentFilter"></slot>
-            <h2 v-if="!$slots.leftPanel" class="text-xxl px-6 pt-2 pb-6 m-0">
+            <h2
+              v-if="!$slots.leftPanel"
+              class="text-xxl px-6 pt-2 pb-6 m-0 capitalize"
+            >
               {{ contentTitle }}
             </h2>
             <div :class="contentContainerClasses">

src/composables/useCoreCommands.ts

@@ -15,6 +15,8 @@ import {
   SubgraphNode
 } from '@/lib/litegraph/src/litegraph'
 import type { Point } from '@/lib/litegraph/src/litegraph'
+import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
+import { createModelNodeFromAsset } from '@/platform/assets/utils/createModelNodeFromAsset'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
@@ -1062,6 +1064,30 @@ export function useCoreCommands(): ComfyCommand[] {
         }
         await api.freeMemory({ freeExecutionCache: true })
       }
+    },
+    {
+      id: 'Comfy.BrowseModelAssets',
+      icon: 'pi pi-folder-open',
+      label: 'Browse Model Assets',
+      versionAdded: '1.28.3',
+      function: async () => {
+        const assetBrowserDialog = useAssetBrowserDialog()
+        await assetBrowserDialog.browse({
+          assetType: 'models',
+          title: t('sideToolbar.modelLibrary'),
+          onAssetSelected: (asset) => {
+            const result = createModelNodeFromAsset(asset)
+            if (!result.success) {
+              toastStore.add({
+                severity: 'error',
+                summary: t('g.error'),
+                detail: t('assetBrowser.failedToCreateNode')
+              })
+              console.error('Node creation failed:', result.error)
+            }
+          }
+        })
+      }
     }
   ]
 

src/locales/en/main.json

@@ -1942,9 +1942,11 @@
     "tryAdjustingFilters": "Try adjusting your search or filters",
     "loadingModels": "Loading {type}...",
     "connectionError": "Please check your connection and try again",
+    "failedToCreateNode": "Failed to create node. Please try again or check console for details.",
     "noModelsInFolder": "No {type} available in this folder",
     "searchAssetsPlaceholder": "Search assets...",
     "allModels": "All Models",
+    "allCategory": "All {category}",
     "unknown": "Unknown",
     "fileFormats": "File formats",
     "baseModels": "Base models",

src/platform/assets/components/AssetBrowserModal.vue

@@ -2,7 +2,7 @@
   <BaseModalLayout
     data-component-id="AssetBrowserModal"
     class="size-full max-h-full max-w-full min-w-0"
-    :content-title="contentTitle"
+    :content-title="displayTitle"
     @close="handleClose"
   >
     <template v-if="shouldShowLeftPanel" #leftPanel>
@@ -14,7 +14,9 @@
         <template #header-icon>
           <div class="icon-[lucide--folder] size-4" />
         </template>
-        <template #header-title>{{ $t('assetBrowser.browseAssets') }}</template>
+        <template #header-title>
+          <span class="capitalize">{{ displayTitle }}</span>
+        </template>
       </LeftSidePanel>
     </template>
 
@@ -28,7 +30,10 @@
     </template>
 
     <template #contentFilter>
-      <AssetFilterBar :assets="assets" @filter-change="updateFilters" />
+      <AssetFilterBar
+        :assets="categoryFilteredAssets"
+        @filter-change="updateFilters"
+      />
     </template>
 
     <template #content>
@@ -56,10 +61,11 @@ import { OnCloseKey } from '@/types/widgetTypes'
 const props = defineProps<{
   nodeType?: string
   inputName?: string
-  onSelect?: (assetPath: string) => void
+  onSelect?: (asset: AssetItem) => void
   onClose?: () => void
   showLeftPanel?: boolean
   assets?: AssetItem[]
+  title?: string
 }>()
 
 const emit = defineEmits<{
@@ -74,11 +80,15 @@ const {
   selectedCategory,
   availableCategories,
   contentTitle,
+  categoryFilteredAssets,
   filteredAssets,
-  selectAssetWithCallback,
   updateFilters
 } = useAssetBrowser(props.assets)
 
+const displayTitle = computed(() => {
+  return props.title ?? contentTitle.value
+})
+
 const shouldShowLeftPanel = computed(() => {
   return props.showLeftPanel ?? true
 })
@@ -88,8 +98,10 @@ function handleClose() {
   emit('close')
 }
 
-async function handleAssetSelectAndEmit(asset: AssetDisplayItem) {
+function handleAssetSelectAndEmit(asset: AssetDisplayItem) {
   emit('asset-select', asset)
-  await selectAssetWithCallback(asset.id, props.onSelect)
+  // onSelect callback is provided by dialog composable layer
+  // It handles the appropriate transformation (filename extraction or full asset)
+  props.onSelect?.(asset)
 }
 </script>