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)

src/platform/assets/composables/useAssetBrowser.ts

@@ -3,8 +3,6 @@ import { computed, ref } from 'vue'
 import { d, t } from '@/i18n'
 import type { FilterState } from '@/platform/assets/components/AssetFilterBar.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { assetFilenameSchema } from '@/platform/assets/schemas/assetSchema'
-import { assetService } from '@/platform/assets/services/assetService'
 import {
   getAssetBaseModel,
   getAssetDescription
@@ -161,9 +159,13 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
     return category?.label || t('assetBrowser.assets')
   })
 
+  // Category-filtered assets for filter options (before search/format/base model filters)
+  const categoryFilteredAssets = computed(() => {
+    return assets.filter(filterByCategory(selectedCategory.value))
+  })
+
   const filteredAssets = computed(() => {
-    const filtered = assets
-      .filter(filterByCategory(selectedCategory.value))
+    const filtered = categoryFilteredAssets.value
       .filter(filterByQuery(searchQuery.value))
       .filter(filterByFileFormats(filters.value.fileFormats))
       .filter(filterByBaseModels(filters.value.baseModels))
@@ -189,39 +191,6 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
     return filtered.map(transformAssetForDisplay)
   })
 
-  /**
-   * Asset selection that fetches full details and executes callback with filename
-   * @param assetId - The asset ID to select and fetch details for
-   * @param onSelect - Optional callback to execute with the asset filename
-   */
-  async function selectAssetWithCallback(
-    assetId: string,
-    onSelect?: (filename: string) => void
-  ): Promise<void> {
-    if (!onSelect) {
-      return
-    }
-
-    try {
-      const detailAsset = await assetService.getAssetDetails(assetId)
-      const filename = detailAsset.user_metadata?.filename
-      const validatedFilename = assetFilenameSchema.safeParse(filename)
-      if (!validatedFilename.success) {
-        console.error(
-          'Invalid asset filename:',
-          validatedFilename.error.errors,
-          'for asset:',
-          assetId
-        )
-        return
-      }
-
-      onSelect(validatedFilename.data)
-    } catch (error) {
-      console.error(`Failed to fetch asset details for ${assetId}:`, error)
-    }
-  }
-
   function updateFilters(newFilters: FilterState) {
     filters.value = { ...newFilters }
   }
@@ -231,8 +200,8 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
     selectedCategory,
     availableCategories,
     contentTitle,
+    categoryFilteredAssets,
     filteredAssets,
-    selectAssetWithCallback,
     updateFilters
   }
 }