feat: add ownership and base model filtering, unify asset/dropdown types (#8497)

Add ownership and base model filtering to AssetBrowserModal and FormDropdown widgets. ## Changes - **Ownership filter**: Filter by All/My Models/Public Models (uses `is_immutable` field) - **Base model filter**: Multi-select filter with Clear Filters button - **Type unification**: Replace `AssetDropdownItem` with `FormDropdownItem` - **Sorting unification**: Extract shared utilities to `assetSortUtils.ts` - **UI refactor**: Use `Button` component, Vue 3.5 prop shorthand, i18n improvements --------- Co-authored-by: Amp <amp@ampcode.com>
2026-04-28 02:02:08 +00:00 · 2026-02-01 20:01:18 -08:00
parent 4e20b7522b
commit eaa3ff1579
30 changed files with 1200 additions and 368 deletions
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.asset-mode.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.asset-mode.test.ts
@@ -2,11 +2,18 @@ import { createTestingPinia } from '@pinia/testing'
 import { flushPromises, mount } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'

 import type { SimplifiedWidget } from '@/types/simplifiedWidget'

 import WidgetSelect from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue'

+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} }
+})
+
 // Mock modules
 vi.mock('@/platform/distribution/types', () => ({
  isCloud: true
@@ -55,7 +62,7 @@ describe('WidgetSelect asset mode', () => {
        nodeType: 'CheckpointLoaderSimple'
      },
      global: {
-        plugins: [PrimeVue, createTestingPinia()]
+        plugins: [PrimeVue, createTestingPinia(), i18n]
      }
    })
  }
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.test.ts
@@ -3,8 +3,15 @@ import { mount } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
 import type { SelectProps } from 'primevue/select'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'

 import SelectPlus from '@/components/primevueOverride/SelectPlus.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} }
+})
 import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import WidgetSelect from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue'
@@ -74,7 +81,7 @@ describe('WidgetSelect Value Binding', () => {
        readonly
      },
      global: {
-        plugins: [PrimeVue, createTestingPinia()],
+        plugins: [PrimeVue, createTestingPinia(), i18n],
        components: { SelectPlus }
      }
    })
@@ -226,7 +233,7 @@ describe('WidgetSelect Value Binding', () => {
          nodeType: 'CheckpointLoaderSimple'
        },
        global: {
-          plugins: [PrimeVue, createTestingPinia()],
+          plugins: [PrimeVue, createTestingPinia(), i18n],
          components: { SelectPlus }
        }
      })
@@ -245,7 +252,7 @@ describe('WidgetSelect Value Binding', () => {
          nodeType: 'KSampler'
        },
        global: {
-          plugins: [PrimeVue, createTestingPinia()],
+          plugins: [PrimeVue, createTestingPinia(), i18n],
          components: { SelectPlus }
        }
      })
@@ -269,7 +276,7 @@ describe('WidgetSelect Value Binding', () => {
          nodeType: 'CheckpointLoaderSimple'
        },
        global: {
-          plugins: [PrimeVue, createTestingPinia()],
+          plugins: [PrimeVue, createTestingPinia(), i18n],
          components: { SelectPlus }
        }
      })
@@ -288,7 +295,7 @@ describe('WidgetSelect Value Binding', () => {
          nodeType: 'CheckpointLoaderSimple'
        },
        global: {
-          plugins: [PrimeVue, createTestingPinia()],
+          plugins: [PrimeVue, createTestingPinia(), i18n],
          components: { SelectPlus }
        }
      })
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts
@@ -4,16 +4,25 @@ import type { VueWrapper } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
 import type { ComponentPublicInstance } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'

+import type { FormDropdownItem } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
 import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import type { DropdownItem } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'

 import WidgetSelectDropdown from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue'

+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} }
+})
+
 interface WidgetSelectDropdownInstance extends ComponentPublicInstance {
-  inputItems: DropdownItem[]
-  outputItems: DropdownItem[]
+  inputItems: FormDropdownItem[]
+  outputItems: FormDropdownItem[]
+  dropdownItems: FormDropdownItem[]
+  filterSelected: string
  updateSelectedItems: (selectedSet: Set<string>) => void
 }

@@ -50,7 +59,7 @@ describe('WidgetSelectDropdown custom label mapping', () => {
        uploadFolder: 'input'
      },
      global: {
-        plugins: [PrimeVue, createTestingPinia()]
+        plugins: [PrimeVue, createTestingPinia(), i18n]
      }
    }) as unknown as VueWrapper<WidgetSelectDropdownInstance>
  }
@@ -230,9 +239,7 @@ describe('WidgetSelectDropdown custom label mapping', () => {
      ).toBe(false)

      // The missing value should be accessible via dropdownItems when filter is 'all' (default)
-      const dropdownItems = (
-        wrapper.vm as unknown as { dropdownItems: DropdownItem[] }
-      ).dropdownItems
+      const dropdownItems = wrapper.vm.dropdownItems
      expect(
        dropdownItems.some((item) => item.name === 'template_image.png')
      ).toBe(true)
@@ -246,15 +253,10 @@ describe('WidgetSelectDropdown custom label mapping', () => {
      })
      const wrapper = mountComponent(widget, 'template_image.png')

-      const vmWithFilter = wrapper.vm as unknown as {
-        filterSelected: string
-        dropdownItems: DropdownItem[]
-      }
-
-      vmWithFilter.filterSelected = 'inputs'
+      wrapper.vm.filterSelected = 'inputs'
      await wrapper.vm.$nextTick()

-      const dropdownItems = vmWithFilter.dropdownItems
+      const dropdownItems = wrapper.vm.dropdownItems
      expect(dropdownItems).toHaveLength(2)
      expect(
        dropdownItems.every((item) => !String(item.id).startsWith('missing-'))
@@ -267,16 +269,10 @@ describe('WidgetSelectDropdown custom label mapping', () => {
      })
      const wrapper = mountComponent(widget, 'template_image.png')

-      const vmWithFilter = wrapper.vm as unknown as {
-        filterSelected: string
-        dropdownItems: DropdownItem[]
-        outputItems: DropdownItem[]
-      }
-
-      vmWithFilter.filterSelected = 'outputs'
+      wrapper.vm.filterSelected = 'outputs'
      await wrapper.vm.$nextTick()

-      const dropdownItems = vmWithFilter.dropdownItems
+      const dropdownItems = wrapper.vm.dropdownItems
      expect(dropdownItems).toHaveLength(wrapper.vm.outputItems.length)
      expect(
        dropdownItems.every((item) => !String(item.id).startsWith('missing-'))
@@ -289,9 +285,7 @@ describe('WidgetSelectDropdown custom label mapping', () => {
      })
      const wrapper = mountComponent(widget, 'img_001.png')

-      const dropdownItems = (
-        wrapper.vm as unknown as { dropdownItems: DropdownItem[] }
-      ).dropdownItems
+      const dropdownItems = wrapper.vm.dropdownItems
      expect(dropdownItems).toHaveLength(2)
      expect(
        dropdownItems.every((item) => !String(item.id).startsWith('missing-'))
@@ -304,9 +298,7 @@ describe('WidgetSelectDropdown custom label mapping', () => {
      })
      const wrapper = mountComponent(widget, undefined)

-      const dropdownItems = (
-        wrapper.vm as unknown as { dropdownItems: DropdownItem[] }
-      ).dropdownItems
+      const dropdownItems = wrapper.vm.dropdownItems
      expect(dropdownItems).toHaveLength(2)
      expect(
        dropdownItems.every((item) => !String(item.id).startsWith('missing-'))
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
@@ -1,17 +1,29 @@
 <script setup lang="ts">
 import { capitalize } from 'es-toolkit'
 import { computed, provide, ref, toRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'

 import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
-import { t } from '@/i18n'
+import { useAssetFilterOptions } from '@/platform/assets/composables/useAssetFilterOptions'
+import {
+  filterItemByBaseModels,
+  filterItemByOwnership
+} from '@/platform/assets/utils/assetFilterUtils'
+import {
+  getAssetBaseModels,
+  getAssetDisplayName,
+  getAssetFilename
+} from '@/platform/assets/utils/assetMetadataUtils'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import FormDropdown from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue'
+import type {
+  FilterOption,
+  OwnershipOption
+} from '@/platform/assets/types/filterTypes'
 import { AssetKindKey } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
 import type {
-  DropdownItem,
-  FilterOption,
-  LayoutMode,
-  SelectedKey
+  FormDropdownItem,
+  LayoutMode
 } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
 import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
 import { useAssetWidgetData } from '@/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData'
@@ -49,6 +61,7 @@ const modelValue = defineModel<string | undefined>({
  }
 })

+const { t } = useI18n()
 const toastStore = useToastStore()
 const queueStore = useQueueStore()

@@ -72,16 +85,30 @@ const filterSelected = ref('all')
 const filterOptions = computed<FilterOption[]>(() => {
  if (props.isAssetMode) {
    const categoryName = assetData?.category.value ?? 'All'
-    return [{ id: 'all', name: capitalize(categoryName) }]
+    return [{ name: capitalize(categoryName), value: 'all' }]
  }
  return [
-    { id: 'all', name: 'All' },
-    { id: 'inputs', name: 'Inputs' },
-    { id: 'outputs', name: 'Outputs' }
+    { name: 'All', value: 'all' },
+    { name: 'Inputs', value: 'inputs' },
+    { name: 'Outputs', value: 'outputs' }
  ]
 })

-const selectedSet = ref<Set<SelectedKey>>(new Set())
+const ownershipSelected = ref<OwnershipOption>('all')
+const showOwnershipFilter = computed(() => props.isAssetMode)
+
+const { ownershipOptions, availableBaseModels } = useAssetFilterOptions(
+  () => assetData?.assets.value ?? []
+)
+
+const baseModelSelected = ref<Set<string>>(new Set())
+const showBaseModelFilter = computed(() => props.isAssetMode)
+const baseModelOptions = computed<FilterOption[]>(() => {
+  if (!props.isAssetMode || !assetData) return []
+  return availableBaseModels.value
+})
+
+const selectedSet = ref<Set<string>>(new Set())

 /**
 * Transforms a value using getOptionLabel if available.
@@ -100,7 +127,7 @@ function getDisplayLabel(value: string): string {
  }
 }

-const inputItems = computed<DropdownItem[]>(() => {
+const inputItems = computed<FormDropdownItem[]>(() => {
  const values = props.widget.options?.values || []

  if (!Array.isArray(values)) {
@@ -109,13 +136,12 @@ const inputItems = computed<DropdownItem[]>(() => {

  return values.map((value: string, index: number) => ({
    id: `input-${index}`,
-    mediaSrc: getMediaUrl(value, 'input'),
+    preview_url: getMediaUrl(value, 'input'),
    name: value,
-    label: getDisplayLabel(value),
-    metadata: ''
+    label: getDisplayLabel(value)
  }))
 })
-const outputItems = computed<DropdownItem[]>(() => {
+const outputItems = computed<FormDropdownItem[]>(() => {
  if (!['image', 'video'].includes(props.assetKind ?? '')) return []

  const outputs = new Set<string>()
@@ -140,10 +166,9 @@ const outputItems = computed<DropdownItem[]>(() => {

  return Array.from(outputs).map((output) => ({
    id: `output-${output}`,
-    mediaSrc: getMediaUrl(output.replace(' [output]', ''), 'output'),
+    preview_url: getMediaUrl(output.replace(' [output]', ''), 'output'),
    name: output,
-    label: getDisplayLabel(output),
-    metadata: ''
+    label: getDisplayLabel(output)
  }))
 })

@@ -153,23 +178,22 @@ const outputItems = computed<DropdownItem[]>(() => {
 * where the saved value may not exist in the current server environment.
 * Works for both local mode (inputItems/outputItems) and cloud mode (assetData).
 */
-const missingValueItem = computed<DropdownItem | undefined>(() => {
+const missingValueItem = computed<FormDropdownItem | undefined>(() => {
  const currentValue = modelValue.value
  if (!currentValue) return undefined

  // Check in cloud mode assets
  if (props.isAssetMode && assetData) {
-    const existsInAssets = assetData.dropdownItems.value.some(
-      (item) => item.name === currentValue
+    const existsInAssets = assetData.assets.value.some(
+      (asset) => getAssetFilename(asset) === currentValue
    )
    if (existsInAssets) return undefined

    return {
      id: `missing-${currentValue}`,
-      mediaSrc: '',
+      preview_url: '',
      name: currentValue,
-      label: getDisplayLabel(currentValue),
-      metadata: ''
+      label: getDisplayLabel(currentValue)
    }
  }

@@ -190,20 +214,45 @@ const missingValueItem = computed<DropdownItem | undefined>(() => {

  return {
    id: `missing-${currentValue}`,
-    mediaSrc: getMediaUrl(strippedValue, isOutput ? 'output' : 'input'),
+    preview_url: getMediaUrl(strippedValue, isOutput ? 'output' : 'input'),
    name: currentValue,
-    label: getDisplayLabel(currentValue),
-    metadata: ''
+    label: getDisplayLabel(currentValue)
  }
 })

-const allItems = computed<DropdownItem[]>(() => {
+/**
+ * Transforms AssetItem[] to FormDropdownItem[] for cloud mode.
+ * Uses getAssetFilename for display name, asset.name for label.
+ */
+const assetItems = computed<FormDropdownItem[]>(() => {
+  if (!props.isAssetMode || !assetData) return []
+  return assetData.assets.value.map((asset) => ({
+    id: asset.id,
+    name: getAssetFilename(asset),
+    label: getAssetDisplayName(asset),
+    preview_url: asset.preview_url,
+    is_immutable: asset.is_immutable,
+    base_models: getAssetBaseModels(asset)
+  }))
+})
+
+const ownershipFilteredAssetItems = computed<FormDropdownItem[]>(() =>
+  filterItemByOwnership(assetItems.value, ownershipSelected.value)
+)
+
+const baseModelFilteredAssetItems = computed<FormDropdownItem[]>(() =>
+  filterItemByBaseModels(
+    ownershipFilteredAssetItems.value,
+    baseModelSelected.value
+  )
+)
+
+const allItems = computed<FormDropdownItem[]>(() => {
  if (props.isAssetMode && assetData) {
-    const items = assetData.dropdownItems.value
    if (missingValueItem.value) {
-      return [missingValueItem.value, ...items]
+      return [missingValueItem.value, ...baseModelFilteredAssetItems.value]
    }
-    return items
+    return baseModelFilteredAssetItems.value
  }
  return [
    ...(missingValueItem.value ? [missingValueItem.value] : []),
@@ -212,7 +261,7 @@ const allItems = computed<DropdownItem[]>(() => {
  ]
 })

-const dropdownItems = computed<DropdownItem[]>(() => {
+const dropdownItems = computed<FormDropdownItem[]>(() => {
  if (props.isAssetMode) {
    return allItems.value
  }
@@ -290,8 +339,8 @@ watch(
  { immediate: true }
 )

-function updateSelectedItems(selectedItems: Set<SelectedKey>) {
-  let id: SelectedKey | undefined = undefined
+function updateSelectedItems(selectedItems: Set<string>) {
+  let id: string | undefined = undefined
  if (selectedItems.size > 0) {
    id = selectedItems.values().next().value!
  }
@@ -307,7 +356,6 @@ function updateSelectedItems(selectedItems: Set<SelectedKey>) {
  modelValue.value = name
 }

-// Upload file function (copied from useNodeImageUpload.ts)
 const uploadFile = async (
  file: File,
  isPasted: boolean = false,
@@ -339,7 +387,6 @@ const uploadFile = async (
  return data.subfolder ? `${data.subfolder}/${data.name}` : data.name
 }

-// Handle multiple file uploads
 const uploadFiles = async (files: File[]): Promise<string[]> => {
  const folder = props.uploadFolder ?? 'input'
  const uploadPromises = files.map((file) =>
@@ -363,9 +410,9 @@ async function handleFilesUpdate(files: File[]) {

    // 2. Update widget options to include new files
    // This simulates what addToComboValues does but for SimplifiedWidget
-    if (props.widget.options?.values) {
+    const values = props.widget.options?.values
+    if (Array.isArray(values)) {
      uploadedPaths.forEach((path) => {
-        const values = props.widget.options!.values as string[]
        if (!values.includes(path)) {
          values.push(path)
        }
@@ -400,12 +447,18 @@ function getMediaUrl(
      v-model:selected="selectedSet"
      v-model:filter-selected="filterSelected"
      v-model:layout-mode="layoutMode"
+      v-model:ownership-selected="ownershipSelected"
+      v-model:base-model-selected="baseModelSelected"
      :items="dropdownItems"
      :placeholder="mediaPlaceholder"
      :multiple="false"
-      :uploadable="uploadable"
+      :uploadable
      :accept="acceptTypes"
-      :filter-options="filterOptions"
+      :filter-options
+      :show-ownership-filter
+      :ownership-options
+      :show-base-model-filter
+      :base-model-options
      v-bind="combinedProps"
      class="w-full"
      @update:selected="updateSelectedItems"
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue
@@ -53,8 +53,10 @@ watch(
 )

 function handleFocus(event: FocusEvent) {
-  const target = event.target as HTMLInputElement
-  target.select()
+  const target = event.target
+  if (target instanceof HTMLInputElement) {
+    target.select()
+  }
 }
 </script>

--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
@@ -5,20 +5,19 @@ import { computed, ref, useTemplateRef } from 'vue'
 import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'

+import type {
+  FilterOption,
+  OwnershipFilterOption,
+  OwnershipOption
+} from '@/platform/assets/types/filterTypes'
+
 import FormDropdownInput from './FormDropdownInput.vue'
 import FormDropdownMenu from './FormDropdownMenu.vue'
 import { defaultSearcher, getDefaultSortOptions } from './shared'
-import type {
-  DropdownItem,
-  FilterOption,
-  LayoutMode,
-  OptionId,
-  SelectedKey,
-  SortOption
-} from './types'
+import type { FormDropdownItem, LayoutMode, SortOption } from './types'

 interface Props {
-  items: DropdownItem[]
+  items: FormDropdownItem[]
  placeholder?: string
  /**
   * If true, allows multiple selections. If a number is provided,
@@ -31,16 +30,20 @@ interface Props {
  accept?: string
  filterOptions?: FilterOption[]
  sortOptions?: SortOption[]
+  showOwnershipFilter?: boolean
+  ownershipOptions?: OwnershipFilterOption[]
+  showBaseModelFilter?: boolean
+  baseModelOptions?: FilterOption[]
  isSelected?: (
-    selected: Set<SelectedKey>,
-    item: DropdownItem,
+    selected: Set<string>,
+    item: FormDropdownItem,
    index: number
  ) => boolean
  searcher?: (
    query: string,
-    items: DropdownItem[],
+    items: FormDropdownItem[],
    onCleanup: (cleanupFn: () => void) => void
-  ) => Promise<DropdownItem[]>
+  ) => Promise<FormDropdownItem[]>
 }

 const props = withDefaults(defineProps<Props>(), {
@@ -54,18 +57,24 @@ const props = withDefaults(defineProps<Props>(), {
  searcher: defaultSearcher
 })

-const selected = defineModel<Set<SelectedKey>>('selected', {
-  default: new Set()
+const selected = defineModel<Set<string>>('selected', {
+  default: () => new Set()
 })
-const filterSelected = defineModel<OptionId>('filterSelected', { default: '' })
-const sortSelected = defineModel<OptionId>('sortSelected', {
+const filterSelected = defineModel<string>('filterSelected', { default: '' })
+const sortSelected = defineModel<string>('sortSelected', {
  default: 'default'
 })
 const layoutMode = defineModel<LayoutMode>('layoutMode', {
  default: 'grid'
 })
-const files = defineModel<File[]>('files', { default: [] })
+const files = defineModel<File[]>('files', { default: () => [] })
 const searchQuery = defineModel<string>('searchQuery', { default: '' })
+const ownershipSelected = defineModel<OwnershipOption>('ownershipSelected', {
+  default: 'all'
+})
+const baseModelSelected = defineModel<Set<string>>('baseModelSelected', {
+  default: () => new Set()
+})

 const toastStore = useToastStore()
 const popoverRef = ref<InstanceType<typeof Popover>>()
@@ -80,7 +89,7 @@ const maxSelectable = computed(() => {

 const itemsKey = computed(() => props.items.map((item) => item.id).join('|'))

-const filteredItems = ref<DropdownItem[]>([])
+const filteredItems = ref<FormDropdownItem[]>([])

 const defaultSorter = computed<SortOption['sorter']>(() => {
  const sorter = props.sortOptions.find(
@@ -99,7 +108,7 @@ const sortedItems = computed(() => {
  return selectedSorter.value({ items: filteredItems.value }) || []
 })

-function internalIsSelected(item: DropdownItem, index: number): boolean {
+function internalIsSelected(item: FormDropdownItem, index: number): boolean {
  return props.isSelected?.(selected.value, item, index) ?? false
 }

@@ -120,15 +129,15 @@ const closeDropdown = () => {

 function handleFileChange(event: Event) {
  if (props.disabled) return
-  const input = event.target as HTMLInputElement
-  if (input.files) {
-    files.value = Array.from(input.files)
+  const target = event.target
+  if (!(target instanceof HTMLInputElement)) return
+  if (target.files) {
+    files.value = Array.from(target.files)
  }
-  // Clear the input value to allow re-selecting the same file
-  input.value = ''
+  target.value = ''
 }

-function handleSelection(item: DropdownItem, index: number) {
+function handleSelection(item: FormDropdownItem, index: number) {
  if (props.disabled) return
  const sel = selected.value
  if (internalIsSelected(item, index)) {
@@ -172,15 +181,15 @@ async function customSearcher(
 <template>
  <div ref="triggerRef">
    <FormDropdownInput
-      :files="files"
-      :is-open="isOpen"
-      :placeholder="placeholder"
-      :items="items"
-      :max-selectable="maxSelectable"
-      :selected="selected"
-      :uploadable="uploadable"
-      :disabled="disabled"
-      :accept="accept"
+      :files
+      :is-open
+      :placeholder
+      :items
+      :max-selectable
+      :selected
+      :uploadable
+      :disabled
+      :accept
      @select-click="toggleDropdown"
      @file-change="handleFileChange"
    />
@@ -204,13 +213,19 @@ async function customSearcher(
        v-model:layout-mode="layoutMode"
        v-model:sort-selected="sortSelected"
        v-model:search-query="searchQuery"
-        :filter-options="filterOptions"
-        :sort-options="sortOptions"
-        :disabled="disabled"
+        v-model:ownership-selected="ownershipSelected"
+        v-model:base-model-selected="baseModelSelected"
+        :filter-options
+        :sort-options
+        :show-ownership-filter
+        :ownership-options
+        :show-base-model-filter
+        :base-model-options
+        :disabled
        :searcher="customSearcher"
        :items="sortedItems"
        :is-selected="internalIsSelected"
-        :max-selectable="maxSelectable"
+        :max-selectable
        :update-key="itemsKey"
        @close="closeDropdown"
        @item-click="handleSelection"
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
@@ -4,13 +4,13 @@ import { computed } from 'vue'
 import { cn } from '@/utils/tailwindUtil'

 import { WidgetInputBaseClass } from '../../layout'
-import type { DropdownItem, SelectedKey } from './types'
+import type { FormDropdownItem } from './types'

 interface Props {
  isOpen?: boolean
  placeholder?: string
-  items: DropdownItem[]
-  selected: Set<SelectedKey>
+  items: FormDropdownItem[]
+  selected: Set<string>
  maxSelectable: number
  uploadable: boolean
  disabled: boolean
@@ -50,7 +50,6 @@ const theButtonStyle = computed(() =>
      })
    "
  >
-    <!-- Dropdown -->
    <button
      :class="
        cn(
@@ -82,7 +81,6 @@ const theButtonStyle = computed(() =>
        "
      />
    </button>
-    <!-- Open File -->
    <label
      v-if="uploadable"
      :class="
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
@@ -3,20 +3,20 @@ import type { MaybeRefOrGetter } from 'vue'

 import { cn } from '@/utils/tailwindUtil'

+import type {
+  FilterOption,
+  OwnershipFilterOption,
+  OwnershipOption
+} from '@/platform/assets/types/filterTypes'
+
 import FormDropdownMenuActions from './FormDropdownMenuActions.vue'
 import FormDropdownMenuFilter from './FormDropdownMenuFilter.vue'
 import FormDropdownMenuItem from './FormDropdownMenuItem.vue'
-import type {
-  DropdownItem,
-  FilterOption,
-  LayoutMode,
-  OptionId,
-  SortOption
-} from './types'
+import type { FormDropdownItem, LayoutMode, SortOption } from './types'

 interface Props {
-  items: DropdownItem[]
-  isSelected: (item: DropdownItem, index: number) => boolean
+  items: FormDropdownItem[]
+  isSelected: (item: FormDropdownItem, index: number) => boolean
  filterOptions: FilterOption[]
  sortOptions: SortOption[]
  searcher?: (
@@ -24,42 +24,48 @@ interface Props {
    onCleanup: (cleanupFn: () => void) => void
  ) => Promise<void>
  updateKey?: MaybeRefOrGetter<unknown>
+  showOwnershipFilter?: boolean
+  ownershipOptions?: OwnershipFilterOption[]
+  showBaseModelFilter?: boolean
+  baseModelOptions?: FilterOption[]
 }

 defineProps<Props>()
 const emit = defineEmits<{
-  (e: 'item-click', item: DropdownItem, index: number): void
+  (e: 'item-click', item: FormDropdownItem, index: number): void
 }>()

-// Define models for two-way binding
-const filterSelected = defineModel<OptionId>('filterSelected')
+const filterSelected = defineModel<string>('filterSelected')
 const layoutMode = defineModel<LayoutMode>('layoutMode')
-const sortSelected = defineModel<OptionId>('sortSelected')
+const sortSelected = defineModel<string>('sortSelected')
 const searchQuery = defineModel<string>('searchQuery')
-
-// Handle item selection
+const ownershipSelected = defineModel<OwnershipOption>('ownershipSelected')
+const baseModelSelected = defineModel<Set<string>>('baseModelSelected')
 </script>

 <template>
  <div
    class="flex max-h-[640px] w-103 flex-col rounded-lg bg-component-node-background pt-4 outline outline-offset-[-1px] outline-node-component-border"
  >
-    <!-- Filter -->
    <FormDropdownMenuFilter
      v-if="filterOptions.length > 0"
      v-model:filter-selected="filterSelected"
-      :filter-options="filterOptions"
+      :filter-options
    />
-    <!-- Actions -->
    <FormDropdownMenuActions
      v-model:layout-mode="layoutMode"
      v-model:sort-selected="sortSelected"
      v-model:search-query="searchQuery"
-      :sort-options="sortOptions"
+      v-model:ownership-selected="ownershipSelected"
+      v-model:base-model-selected="baseModelSelected"
+      :sort-options
      :searcher
-      :update-key="updateKey"
+      :update-key
+      :show-ownership-filter
+      :ownership-options
+      :show-base-model-filter
+      :base-model-options
    />
-    <!-- List -->
    <div class="relative flex h-full mt-2 overflow-y-scroll">
      <div
        :class="
@@ -84,16 +90,14 @@ const searchQuery = defineModel<string>('searchQuery')
            class="icon-[lucide--circle-off] size-30 text-zinc-500/20"
          />
        </div>
-        <!-- Item -->
        <FormDropdownMenuItem
          v-for="(item, index) in items"
          :key="item.id"
          :index="index"
          :selected="isSelected(item, index)"
-          :media-src="item.mediaSrc"
+          :preview-url="item.preview_url ?? ''"
          :name="item.name"
          :label="item.label"
-          :metadata="item.metadata"
          :layout="layoutMode"
          @click="emit('item-click', item, index)"
        />
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
@@ -3,11 +3,20 @@ import type { MaybeRefOrGetter } from 'vue'

 import Popover from 'primevue/popover'
 import { ref, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'

+import Button from '@/components/ui/button/Button.vue'
+import type {
+  FilterOption,
+  OwnershipFilterOption,
+  OwnershipOption
+} from '@/platform/assets/types/filterTypes'
 import { cn } from '@/utils/tailwindUtil'

 import FormSearchInput from '../FormSearchInput.vue'
-import type { LayoutMode, OptionId, SortOption } from './types'
+import type { LayoutMode, SortOption } from './types'
+
+const { t } = useI18n()

 defineProps<{
  searcher?: (
@@ -16,18 +25,26 @@ defineProps<{
  ) => Promise<void>
  sortOptions: SortOption[]
  updateKey?: MaybeRefOrGetter<unknown>
+  showOwnershipFilter?: boolean
+  ownershipOptions?: OwnershipFilterOption[]
+  showBaseModelFilter?: boolean
+  baseModelOptions?: FilterOption[]
 }>()

 const layoutMode = defineModel<LayoutMode>('layoutMode')
 const searchQuery = defineModel<string>('searchQuery')
-const sortSelected = defineModel<OptionId>('sortSelected')
+const sortSelected = defineModel<string>('sortSelected')
+const ownershipSelected = defineModel<OwnershipOption>('ownershipSelected', {
+  default: 'all'
+})
+const baseModelSelected = defineModel<Set<string>>('baseModelSelected', {
+  default: new Set()
+})

 const actionButtonStyle = cn(
  'h-8 bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-node-component-border transition-all duration-150'
 )

-const resetInputStyle = 'bg-transparent border-0 outline-0 ring-0 text-left'
-
 const layoutSwitchItemStyle =
  'size-6 flex justify-center items-center rounded-sm cursor-pointer transition-all duration-150 hover:scale-108 hover:text-base-foreground active:scale-95'

@@ -38,7 +55,7 @@ const isSortPopoverOpen = ref(false)
 function toggleSortPopover(event: Event) {
  if (!sortPopoverRef.value || !sortTriggerRef.value) return
  isSortPopoverOpen.value = !isSortPopoverOpen.value
-  sortPopoverRef.value.toggle(event, sortTriggerRef.value)
+  sortPopoverRef.value.toggle(event, sortTriggerRef.value.$el)
 }
 function closeSortPopover() {
  isSortPopoverOpen.value = false
@@ -49,6 +66,42 @@ function handleSortSelected(item: SortOption) {
  sortSelected.value = item.id
  closeSortPopover()
 }
+
+const ownershipPopoverRef = useTemplateRef('ownershipPopoverRef')
+const ownershipTriggerRef = useTemplateRef('ownershipTriggerRef')
+const isOwnershipPopoverOpen = ref(false)
+
+function toggleOwnershipPopover(event: Event) {
+  if (!ownershipPopoverRef.value || !ownershipTriggerRef.value) return
+  isOwnershipPopoverOpen.value = !isOwnershipPopoverOpen.value
+  ownershipPopoverRef.value.toggle(event, ownershipTriggerRef.value.$el)
+}
+function closeOwnershipPopover() {
+  isOwnershipPopoverOpen.value = false
+  ownershipPopoverRef.value?.hide()
+}
+
+function handleOwnershipSelected(item: OwnershipFilterOption) {
+  ownershipSelected.value = item.value
+  closeOwnershipPopover()
+}
+
+const baseModelPopoverRef = useTemplateRef('baseModelPopoverRef')
+const baseModelTriggerRef = useTemplateRef('baseModelTriggerRef')
+const isBaseModelPopoverOpen = ref(false)
+
+function toggleBaseModelPopover(event: Event) {
+  if (!baseModelPopoverRef.value || !baseModelTriggerRef.value) return
+  isBaseModelPopoverOpen.value = !isBaseModelPopoverOpen.value
+  baseModelPopoverRef.value.toggle(event, baseModelTriggerRef.value.$el)
+}
+
+function toggleBaseModelSelection(item: FilterOption) {
+  const current = new Set(baseModelSelected.value)
+  baseModelSelected.value = current.has(item.value)
+    ? new Set([...current].filter((v) => v !== item.value))
+    : new Set([...current, item.value])
+}
 </script>

 <template>
@@ -56,7 +109,7 @@ function handleSortSelected(item: SortOption) {
    <FormSearchInput
      v-model="searchQuery"
      :searcher
-      :update-key="updateKey"
+      :update-key
      :class="
        cn(
          actionButtonStyle,
@@ -66,15 +119,14 @@ function handleSortSelected(item: SortOption) {
      "
    />

-    <button
+    <Button
      ref="sortTriggerRef"
+      variant="textonly"
+      size="icon"
      :class="
        cn(
-          resetInputStyle,
          actionButtonStyle,
-          'relative w-8 flex justify-center items-center cursor-pointer',
-          'hover:outline-component-node-widget-background-highlighted',
-          'active:!scale-95'
+          'relative w-8 hover:outline-component-node-widget-background-highlighted active:scale-95'
        )
      "
      @click="toggleSortPopover"
@@ -84,8 +136,7 @@ function handleSortSelected(item: SortOption) {
        class="absolute top-[-2px] left-[-2px] size-2 rounded-full bg-component-node-widget-background-highlighted"
      />
      <i class="icon-[lucide--arrow-up-down] size-4" />
-    </button>
-    <!-- Sort Popover -->
+    </Button>
    <Popover
      ref="sortPopoverRef"
      :dismissable="true"
@@ -110,16 +161,12 @@ function handleSortSelected(item: SortOption) {
          )
        "
      >
-        <button
+        <Button
          v-for="item of sortOptions"
          :key="item.name"
-          :class="
-            cn(
-              resetInputStyle,
-              'flex justify-between items-center h-6 cursor-pointer',
-              'hover:!text-blue-500'
-            )
-          "
+          variant="textonly"
+          size="unset"
+          :class="cn('flex justify-between items-center h-6 text-left')"
          @click="handleSortSelected(item)"
        >
          <span>{{ item.name }}</span>
@@ -127,11 +174,143 @@ function handleSortSelected(item: SortOption) {
            v-if="sortSelected === item.id"
            class="icon-[lucide--check] size-4"
          />
-        </button>
+        </Button>
+      </div>
+    </Popover>
+
+    <Button
+      v-if="showOwnershipFilter && ownershipOptions?.length"
+      ref="ownershipTriggerRef"
+      :aria-label="t('assetBrowser.ownership')"
+      :title="t('assetBrowser.ownership')"
+      variant="textonly"
+      size="icon"
+      :class="
+        cn(
+          actionButtonStyle,
+          'relative w-8 hover:outline-component-node-widget-background-highlighted active:scale-95'
+        )
+      "
+      @click="toggleOwnershipPopover"
+    >
+      <div
+        v-if="ownershipSelected !== 'all'"
+        class="absolute top-[-2px] left-[-2px] size-2 rounded-full bg-component-node-widget-background-highlighted"
+      />
+      <i class="icon-[lucide--user] size-4" />
+    </Button>
+    <Popover
+      ref="ownershipPopoverRef"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="{
+        root: {
+          class: 'absolute z-50'
+        },
+        content: {
+          class: ['bg-transparent border-none p-0 pt-2 rounded-lg shadow-lg']
+        }
+      }"
+      @hide="isOwnershipPopoverOpen = false"
+    >
+      <div
+        :class="
+          cn(
+            'flex flex-col gap-2 p-2 min-w-32',
+            'bg-component-node-background',
+            'rounded-lg outline outline-offset-[-1px] outline-component-node-border'
+          )
+        "
+      >
+        <Button
+          v-for="item of ownershipOptions"
+          :key="item.value"
+          variant="textonly"
+          size="unset"
+          :class="cn('flex justify-between items-center h-6 text-left')"
+          @click="handleOwnershipSelected(item)"
+        >
+          <span>{{ item.name }}</span>
+          <i
+            v-if="ownershipSelected === item.value"
+            class="icon-[lucide--check] size-4"
+          />
+        </Button>
+      </div>
+    </Popover>
+
+    <Button
+      v-if="showBaseModelFilter && baseModelOptions?.length"
+      ref="baseModelTriggerRef"
+      :aria-label="t('assetBrowser.baseModel')"
+      :title="t('assetBrowser.baseModel')"
+      variant="textonly"
+      size="icon"
+      :class="
+        cn(
+          actionButtonStyle,
+          'relative w-8 hover:outline-component-node-widget-background-highlighted active:scale-95'
+        )
+      "
+      @click="toggleBaseModelPopover"
+    >
+      <div
+        v-if="baseModelSelected.size > 0"
+        class="absolute top-[-2px] left-[-2px] size-2 rounded-full bg-component-node-widget-background-highlighted"
+      />
+      <i class="icon-[comfy--ai-model] size-4" />
+    </Button>
+    <Popover
+      ref="baseModelPopoverRef"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="{
+        root: {
+          class: 'absolute z-50'
+        },
+        content: {
+          class: ['bg-transparent border-none p-0 pt-2 rounded-lg shadow-lg']
+        }
+      }"
+      @hide="isBaseModelPopoverOpen = false"
+    >
+      <div
+        :class="
+          cn(
+            'flex flex-col gap-2 p-2 min-w-32',
+            'bg-component-node-background',
+            'rounded-lg outline outline-offset-[-1px] outline-component-node-border'
+          )
+        "
+      >
+        <Button
+          v-for="item of baseModelOptions"
+          :key="item.value"
+          variant="textonly"
+          size="unset"
+          :class="cn('flex justify-between items-center h-6 text-left')"
+          @click="toggleBaseModelSelection(item)"
+        >
+          <span>{{ item.name }}</span>
+          <i
+            v-if="baseModelSelected.has(item.value)"
+            class="icon-[lucide--check] size-4"
+          />
+        </Button>
+        <span class="h-0 w-full border-b border-border-default" />
+        <Button
+          variant="textonly"
+          size="unset"
+          :class="cn('flex justify-between items-center h-6 text-left')"
+          @click="baseModelSelected = new Set()"
+        >
+          {{ t('g.clearFilters') }}
+        </Button>
      </div>
    </Popover>

-    <!-- Layout Switch -->
    <div
      :class="
        cn(
@@ -140,34 +319,32 @@ function handleSortSelected(item: SortOption) {
        )
      "
    >
-      <button
+      <Button
+        variant="textonly"
+        size="unset"
        :class="
          cn(
-            resetInputStyle,
            layoutSwitchItemStyle,
-            layoutMode === 'list'
-              ? 'bg-neutral-500/50 text-base-foreground'
-              : ''
+            layoutMode === 'list' && 'bg-neutral-500/50 text-base-foreground'
          )
        "
        @click="layoutMode = 'list'"
      >
        <i class="icon-[lucide--list] size-4" />
-      </button>
-      <button
+      </Button>
+      <Button
+        variant="textonly"
+        size="unset"
        :class="
          cn(
-            resetInputStyle,
            layoutSwitchItemStyle,
-            layoutMode === 'grid'
-              ? 'bg-neutral-500/50 text-base-foreground'
-              : ''
+            layoutMode === 'grid' && 'bg-neutral-500/50 text-base-foreground'
          )
        "
        @click="layoutMode = 'grid'"
      >
        <i class="icon-[lucide--layout-grid] size-4" />
-      </button>
+      </Button>
    </div>
  </div>
 </template>
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
@@ -3,19 +3,17 @@ import { computed } from 'vue'

 import Button from '@/components/ui/button/Button.vue'
 import { useModelUpload } from '@/platform/assets/composables/useModelUpload'
+import type { FilterOption } from '@/platform/assets/types/filterTypes'
 import { cn } from '@/utils/tailwindUtil'

-import type { FilterOption, OptionId } from './types'
-
 const { filterOptions } = defineProps<{
  filterOptions: FilterOption[]
 }>()

-const filterSelected = defineModel<OptionId>('filterSelected')
+const filterSelected = defineModel<string>('filterSelected')

 const { isUploadButtonEnabled, showUploadDialog } = useModelUpload()

-// TODO: Add real check to differentiate between the Model dialogs and Load Image
 const singleFilterOption = computed(() => filterOptions.length === 1)
 </script>

@@ -23,7 +21,7 @@ const singleFilterOption = computed(() => filterOptions.length === 1)
  <div class="text-secondary mb-4 flex gap-1 px-4 justify-start">
    <button
      v-for="option in filterOptions"
-      :key="option.id"
+      :key="option.value"
      type="button"
      :disabled="singleFilterOption"
      :class="
@@ -31,12 +29,12 @@ const singleFilterOption = computed(() => filterOptions.length === 1)
          'px-4 py-2 rounded-md inline-flex justify-center items-center select-none appearance-none border-0 text-base-foreground',
          !singleFilterOption &&
            'transition-all duration-150 hover:text-base-foreground hover:bg-interface-menu-component-surface-hovered cursor-pointer active:scale-95',
-          !singleFilterOption && filterSelected === option.id
+          !singleFilterOption && filterSelected === option.value
            ? '!bg-interface-menu-component-surface-selected text-base-foreground'
            : 'bg-transparent'
        )
      "
-      @click="filterSelected = option.id"
+      @click="filterSelected = option.value"
    >
      {{ option.name }}
    </button>
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
@@ -10,10 +10,9 @@ import type { LayoutMode } from './types'
 interface Props {
  index: number
  selected: boolean
-  mediaSrc: string
+  previewUrl: string
  name: string
  label?: string
-  metadata?: string
  layout?: LayoutMode
 }

@@ -102,16 +101,16 @@ function handleVideoLoad(event: Event) {
        />
      </div>
      <video
-        v-if="mediaSrc && isVideo"
-        :src="mediaSrc"
+        v-if="previewUrl && isVideo"
+        :src="previewUrl"
        class="size-full object-cover"
        preload="metadata"
        muted
        @loadeddata="handleVideoLoad"
      />
      <LazyImage
-        v-else-if="mediaSrc"
-        :src="mediaSrc"
+        v-else-if="previewUrl"
+        :src="previewUrl"
        :alt="name"
        image-class="size-full object-cover"
        @load="handleImageLoad"
@@ -146,9 +145,9 @@ function handleVideoLoad(event: Event) {
        {{ label ?? name }}
      </span>
      <!-- Meta Data -->
-      <span class="text-secondary block text-xs">{{
-        metadata || actualDimensions
-      }}</span>
+      <span v-if="actualDimensions" class="text-secondary block text-xs">
+        {{ actualDimensions }}
+      </span>
    </div>
  </div>
 </template>
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/shared.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/shared.test.ts
@@ -1,20 +1,19 @@
 import { describe, expect, it } from 'vitest'

 import { defaultSearcher, getDefaultSortOptions } from './shared'
-import type { DropdownItem } from './types'
+import type { FormDropdownItem } from './types'

-function createItem(name: string, label?: string): DropdownItem {
+function createItem(name: string, label?: string): FormDropdownItem {
  return {
    id: name,
-    mediaSrc: '',
+    preview_url: '',
    name,
-    label,
-    metadata: ''
+    label
  }
 }

 describe('defaultSearcher', () => {
-  const items: DropdownItem[] = [
+  const items: FormDropdownItem[] = [
    createItem('apple.png'),
    createItem('banana.jpg'),
    createItem('cherry.gif')
@@ -74,7 +73,7 @@ describe('getDefaultSortOptions', () => {
  })

  describe('A-Z sorter', () => {
-    const azSorter = sortOptions.find((o) => o.id === 'a-z')!.sorter
+    const azSorter = sortOptions.find((o) => o.id === 'name-asc')!.sorter

    it('sorts items alphabetically by name', () => {
      const items = [
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/shared.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/shared.ts
@@ -1,6 +1,13 @@
-import type { DropdownItem, SortOption } from './types'
+import { t } from '@/i18n'
+import type { AssetSortOption } from '@/platform/assets/types/filterTypes'
+import { sortAssets } from '@/platform/assets/utils/assetSortUtils'

-export async function defaultSearcher(query: string, items: DropdownItem[]) {
+import type { FormDropdownItem, SortOption } from './types'
+
+export async function defaultSearcher(
+  query: string,
+  items: FormDropdownItem[]
+) {
  if (query.trim() === '') return items
  const words = query.trim().toLowerCase().split(' ')
  return items.filter((item) => {
@@ -9,25 +16,23 @@ export async function defaultSearcher(query: string, items: DropdownItem[]) {
  })
 }

-export function getDefaultSortOptions(): SortOption[] {
+/**
+ * Create a SortOption that delegates to the shared sortAssets utility
+ */
+function createSortOption(
+  id: AssetSortOption,
+  name: string
+): SortOption<AssetSortOption> {
+  return {
+    id,
+    name,
+    sorter: ({ items }) => sortAssets(items, id)
+  }
+}
+
+export function getDefaultSortOptions(): SortOption<AssetSortOption>[] {
  return [
-    {
-      name: 'Default',
-      id: 'default',
-      sorter: ({ items }) => items.slice()
-    },
-    {
-      name: 'A-Z',
-      id: 'a-z',
-      sorter: ({ items }) =>
-        items.slice().sort((a, b) => {
-          const aLabel = a.label ?? a.name
-          const bLabel = b.label ?? b.name
-          return aLabel.localeCompare(bLabel, undefined, {
-            numeric: true,
-            sensitivity: 'base'
-          })
-        })
-    }
+    createSortOption('default', t('assetBrowser.sortDefault')),
+    createSortOption('name-asc', t('assetBrowser.sortAZ'))
  ]
 }
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/types.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/types.ts
@@ -2,25 +2,28 @@ import type { ComputedRef, InjectionKey } from 'vue'

 import type { AssetKind } from '@/types/widgetTypes'

-export type OptionId = string | number | symbol
-export type SelectedKey = OptionId
-
-export interface DropdownItem {
-  id: SelectedKey
-  mediaSrc: string // URL for image, video, or other media
+/**
+ * Minimal interface for items in FormDropdown.
+ * Both AssetItem (from cloud API) and local file items satisfy this contract.
+ */
+export interface FormDropdownItem {
+  id: string
+  /** Display name shown in the dropdown */
  name: string
+  /** Original/alternate label (e.g., original filename) */
  label?: string
-  metadata: string
-}
-export interface SortOption {
-  id: OptionId
-  name: string
-  sorter: (ctx: { items: readonly DropdownItem[] }) => DropdownItem[]
+  /** Preview image/video URL */
+  preview_url?: string
+  /** Whether the item is immutable (public model) - used for ownership filtering */
+  is_immutable?: boolean
+  /** Base models this item is compatible with - used for base model filtering */
+  base_models?: string[]
 }

-export interface FilterOption {
-  id: OptionId
+export interface SortOption<TId extends string = string> {
+  id: TId
  name: string
+  sorter: (ctx: { items: readonly FormDropdownItem[] }) => FormDropdownItem[]
 }

 export type LayoutMode = 'list' | 'grid' | 'list-small'
--- a/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.desktop.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.desktop.test.ts
@@ -29,12 +29,10 @@ vi.mock('@/stores/modelToNodeStore', () => ({
 describe('useAssetWidgetData (desktop/isCloud=false)', () => {
  it('returns empty/default values without calling stores', () => {
    const nodeType = ref('CheckpointLoaderSimple')
-    const { category, assets, dropdownItems, isLoading, error } =
-      useAssetWidgetData(nodeType)
+    const { category, assets, isLoading, error } = useAssetWidgetData(nodeType)

    expect(category.value).toBeUndefined()
    expect(assets.value).toEqual([])
-    expect(dropdownItems.value).toEqual([])
    expect(isLoading.value).toBe(false)
    expect(error.value).toBeNull()
    expect(mockUpdateModelsForNodeType).not.toHaveBeenCalled()
--- a/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.test.ts
@@ -64,7 +64,7 @@ describe('useAssetWidgetData (cloud mode, isCloud=true)', () => {
    }
  })

-  it('fetches assets and transforms to dropdown items', async () => {
+  it('fetches assets for a given node type', async () => {
    const mockAssets: AssetItem[] = [
      createMockAsset(
        'asset-1',
@@ -87,8 +87,7 @@ describe('useAssetWidgetData (cloud mode, isCloud=true)', () => {
    )

    const nodeType = ref('CheckpointLoaderSimple')
-    const { category, assets, dropdownItems, isLoading } =
-      useAssetWidgetData(nodeType)
+    const { category, assets, isLoading } = useAssetWidgetData(nodeType)

    await nextTick()
    await vi.waitFor(() => !isLoading.value)
@@ -98,13 +97,10 @@ describe('useAssetWidgetData (cloud mode, isCloud=true)', () => {
    )
    expect(category.value).toBe('checkpoints')
    expect(assets.value).toEqual(mockAssets)
-
-    expect(dropdownItems.value).toHaveLength(2)
-    const item = dropdownItems.value[0]
-    expect(item.id).toBe('asset-1')
-    expect(item.name).toBe('models/beautiful_model.safetensors')
-    expect(item.label).toBe('Beautiful Model')
-    expect(item.mediaSrc).toBe('/api/preview/asset-1')
+    expect(assets.value).toHaveLength(2)
+    expect(assets.value[0].id).toBe('asset-1')
+    expect(assets.value[0].name).toBe('Beautiful Model')
+    expect(assets.value[0].preview_url).toBe('/api/preview/asset-1')
  })

  it('handles API errors gracefully', async () => {
@@ -238,7 +234,7 @@ describe('useAssetWidgetData (cloud mode, isCloud=true)', () => {
    })

    it('handles undefined node type gracefully', async () => {
-      const { category, assets, dropdownItems, isLoading, error } =
+      const { category, assets, isLoading, error } =
        useAssetWidgetData(undefined)

      await nextTick()
@@ -246,7 +242,6 @@ describe('useAssetWidgetData (cloud mode, isCloud=true)', () => {
      expect(mockUpdateModelsForNodeType).not.toHaveBeenCalled()
      expect(category.value).toBeUndefined()
      expect(assets.value).toEqual([])
-      expect(dropdownItems.value).toEqual([])
      expect(isLoading.value).toBe(false)
      expect(error.value).toBeNull()
    })
--- a/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData.ts
@@ -1,9 +1,8 @@
 import { computed, toValue, watch } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'

-import { isCloud } from '@/platform/distribution/types'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import type { DropdownItem } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
+import { isCloud } from '@/platform/distribution/types'
 import { useAssetsStore } from '@/stores/assetsStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'

@@ -47,17 +46,6 @@ export function useAssetWidgetData(
      return resolvedType ? (assetsStore.getError(resolvedType) ?? null) : null
    })

-    const dropdownItems = computed<DropdownItem[]>(() => {
-      return (assets.value ?? []).map((asset) => ({
-        id: asset.id,
-        name:
-          (asset.user_metadata?.filename as string | undefined) ?? asset.name,
-        label: asset.name,
-        mediaSrc: asset.preview_url ?? '',
-        metadata: ''
-      }))
-    })
-
    watch(
      () => toValue(nodeType),
      async (currentNodeType) => {
@@ -78,7 +66,6 @@ export function useAssetWidgetData(
    return {
      category,
      assets,
-      dropdownItems,
      isLoading,
      error
    }
@@ -86,8 +73,7 @@ export function useAssetWidgetData(

  return {
    category: computed(() => undefined),
-    assets: computed(() => []),
-    dropdownItems: computed(() => []),
+    assets: computed<AssetItem[]>(() => []),
    isLoading: computed(() => false),
    error: computed(() => null)
  }