feat(assets): wire infinite scroll to the flat-output provider in the widget select dropdown

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
 import { computed, provide, ref, toRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -150,6 +151,17 @@ function handleIsOpenUpdate(isOpen: boolean) {
     void outputMediaAssets.refresh()
   }
 }
+
+const handleApproachEnd = useDebounceFn(async () => {
+  if (
+    outputMediaAssets.hasMore.value &&
+    !outputMediaAssets.loading.value &&
+    !outputMediaAssets.isLoadingMore.value
+  ) {
+    await outputMediaAssets.loadMore()
+  }
+}, 300)
+
 const isUploading = ref(false)
 async function updateFiles(files: File[]) {
   isUploading.value = true
@@ -179,10 +191,12 @@ async function updateFiles(files: File[]) {
       :base-model-options
       :is-uploading
       v-bind="combinedProps"
+      :loading-more="outputMediaAssets.isLoadingMore.value"
       class="w-full"
       @update:selected="updateSelectedItems"
       @update:files="updateFiles"
       @update:is-open="handleIsOpenUpdate"
+      @approach-end="handleApproachEnd"
     />
   </WidgetLayoutField>
 </template>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue

@@ -37,6 +37,7 @@ interface Props {
   ownershipOptions?: OwnershipFilterOption[]
   showBaseModelFilter?: boolean
   baseModelOptions?: FilterOption[]
+  loadingMore?: boolean
   isSelected?: (
     selected: Set<string>,
     item: FormDropdownItem,
@@ -64,11 +65,16 @@ const {
   ownershipOptions,
   showBaseModelFilter,
   baseModelOptions,
+  loadingMore = false,
   isSelected = (selected, item, _index) => selected.has(item.id),
   searcher = defaultSearcher,
   items
 } = defineProps<Props>()
 
+const emit = defineEmits<{
+  (e: 'approach-end'): void
+}>()
+
 const placeholderText = computed(
   () => placeholder ?? t('widgets.uploadSelect.placeholder')
 )
@@ -316,9 +322,11 @@ function handleSearchEnter() {
         :candidate-label
         :is-selected="internalIsSelected"
         :max-selectable
+        :loading-more="loadingMore"
         @close="closeDropdown"
         @search-enter="handleSearchEnter"
         @item-click="handleSelection"
+        @approach-end="emit('approach-end')"
       />
     </Popover>
   </div>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.test.ts

@@ -1,3 +1,4 @@
+import userEvent from '@testing-library/user-event'
 import { render, screen } from '@testing-library/vue'
 import { describe, expect, it } from 'vitest'
 
@@ -7,8 +8,9 @@ import type { FormDropdownItem, LayoutMode } from './types'
 const VirtualGridStub = {
   name: 'VirtualGrid',
   props: ['items', 'maxColumns', 'itemHeight', 'scrollerHeight'],
+  emits: ['approach-end'],
   template:
-    '<div data-testid="virtual-grid" :data-items="JSON.stringify(items)" :data-max-columns="maxColumns" />'
+    '<div data-testid="virtual-grid" :data-items="JSON.stringify(items)" :data-max-columns="maxColumns" @click="$emit(\'approach-end\')" />'
 }
 
 function createItem(id: string, name: string): FormDropdownItem {
@@ -93,6 +95,31 @@ describe('FormDropdownMenu', () => {
     expect(virtualGrid.getAttribute('data-max-columns')).toBe('1')
   })
 
+  it('forwards approach-end from the virtual grid', async () => {
+    const user = userEvent.setup()
+    const { emitted } = render(FormDropdownMenu, {
+      props: defaultProps,
+      global: globalConfig
+    })
+
+    await user.click(screen.getByTestId('virtual-grid'))
+
+    expect(emitted()['approach-end']).toHaveLength(1)
+  })
+
+  it('shows the loading-more row only while loadingMore is set', async () => {
+    const { rerender } = render(FormDropdownMenu, {
+      props: { ...defaultProps, loadingMore: true },
+      global: globalConfig
+    })
+
+    expect(screen.getByTestId('form-dropdown-loading-more')).toBeTruthy()
+
+    await rerender({ ...defaultProps, loadingMore: false })
+
+    expect(screen.queryByTestId('form-dropdown-loading-more')).toBeNull()
+  })
+
   it('has data-capture-wheel="true" on the root element', () => {
     render(FormDropdownMenu, {
       props: defaultProps,

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue

@@ -27,6 +27,7 @@ interface Props {
   baseModelOptions?: FilterOption[]
   candidateIndex?: number
   candidateLabel?: string
+  loadingMore?: boolean
 }
 
 const {
@@ -39,11 +40,13 @@ const {
   showBaseModelFilter,
   baseModelOptions,
   candidateIndex = -1,
-  candidateLabel
+  candidateLabel,
+  loadingMore = false
 } = defineProps<Props>()
 const emit = defineEmits<{
   (e: 'item-click', item: FormDropdownItem, index: number): void
   (e: 'search-enter'): void
+  (e: 'approach-end'): void
 }>()
 
 const filterSelected = defineModel<string>('filterSelected')
@@ -158,6 +161,7 @@ const onWheel = (event: WheelEvent) => {
       :default-item-width="layoutConfig.itemWidth"
       :buffer-rows="2"
       class="mt-2 min-h-0 flex-1"
+      @approach-end="emit('approach-end')"
     >
       <template #item="{ item, index }">
         <FormDropdownMenuItem
@@ -172,5 +176,15 @@ const onWheel = (event: WheelEvent) => {
         />
       </template>
     </VirtualGrid>
+    <div
+      v-if="loadingMore"
+      class="flex items-center justify-center py-2"
+      data-testid="form-dropdown-loading-more"
+    >
+      <i
+        :aria-label="$t('g.loading')"
+        class="icon-[lucide--loader] size-6 animate-spin text-muted-foreground"
+      />
+    </div>
   </div>
 </template>