[feat] add AssetBrowserModal

And all related sub components

src/platform/assets/components/AssetBrowserModal.vue

@@ -0,0 +1,109 @@
+<template>
+  <BaseModalLayout
+    data-component-id="AssetBrowserModal"
+    class="h-full w-full max-h-full max-w-full min-w-0"
+    :content-title="contentTitle"
+    @close="handleClose"
+  >
+    <template v-if="shouldShowLeftPanel" #leftPanel>
+      <LeftSidePanel
+        v-model="selectedCategory"
+        data-component-id="AssetBrowserModal-LeftSidePanel"
+        :nav-items="availableCategories"
+      >
+        <template #header-icon>
+          <i-lucide:folder class="size-4" />
+        </template>
+        <template #header-title>{{ $t('assetBrowser.browseAssets') }}</template>
+      </LeftSidePanel>
+    </template>
+
+    <template #header>
+      <SearchBox
+        v-model="searchQuery"
+        size="lg"
+        placeholder="Search assets..."
+        class="max-w-[384px]"
+      />
+    </template>
+
+    <template #content>
+      <AssetGrid
+        :assets="filteredAssets"
+        @asset-select="handleAssetSelectAndEmit"
+      />
+    </template>
+  </BaseModalLayout>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import SearchBox from '@/components/input/SearchBox.vue'
+import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
+import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
+import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+
+import { useAssetBrowser } from '../composables/useAssetBrowser'
+import { mockAssets } from '../fixtures/ui-mock-assets'
+import AssetGrid from './AssetGrid.vue'
+
+// Props
+const props = defineProps<{
+  nodeType?: string
+  inputName?: string
+  onSelect?: (assetPath: string) => void
+  onClose?: () => void
+  showLeftPanel?: boolean
+  assets?: AssetItem[]
+}>()
+
+// Emits
+const emit = defineEmits<{
+  'asset-select': [asset: AssetDisplayItem]
+  close: []
+}>()
+
+// Use provided assets or fallback to mock data
+const assetsToUse = props.assets !== undefined ? props.assets : mockAssets
+
+// Use AssetBrowser composable for all business logic
+const {
+  searchQuery,
+  selectedCategory,
+  availableCategories,
+  contentTitle,
+  filteredAssets,
+  selectAsset
+} = useAssetBrowser(assetsToUse)
+
+// Compute whether to show left panel
+const shouldShowLeftPanel = computed(() => {
+  // If explicitly set to false, don't show
+  if (props.showLeftPanel === false) return false
+
+  // If explicitly set to true, always show
+  if (props.showLeftPanel === true) return true
+
+  // Auto-hide if only one unique asset category (excluding "All Models")
+  return availableCategories.value.length >= 3
+})
+
+// Handle close button - call both the prop callback and emit the event
+const handleClose = () => {
+  props.onClose?.()
+  emit('close')
+}
+
+// Handle asset selection and emit to parent
+const handleAssetSelectAndEmit = (asset: AssetDisplayItem) => {
+  selectAsset(asset) // This logs the selection for dev mode
+  emit('asset-select', asset) // Emit the full asset object
+
+  // Call prop callback if provided
+  if (props.onSelect) {
+    props.onSelect(asset.name) // Use asset name as the asset path
+  }
+}
+</script>