perf: virtualize FormDropdownMenu to reduce DOM nodes and image requests (#8476)

## Summary

Virtualize the FormDropdownMenu to only render visible items, fixing
slow dropdown performance on cloud.

## Changes

- Integrate `VirtualGrid` into `FormDropdownMenu` for virtualized
rendering
- Add computed properties for grid configuration per layout mode
(grid/list/list-small)
- Extend `VirtualGrid` slot to provide original item index for O(1)
lookups
- Change container from `max-h-[640px]` to fixed `h-[640px]` for proper
virtualization

## Review Focus

- VirtualGrid integration within the popover context
- Layout mode switching with `:key="layoutMode"` to force re-render
- Grid style computed properties match original Tailwind classes

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8476-perf-virtualize-FormDropdownMenu-to-reduce-DOM-nodes-and-image-requests-2f86d73d365081b3a79dd5e0b84df944)
by [Unito](https://www.unito.io)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Dropdowns now render with a virtualized grid/list (stable indexes,
responsive sizing) and show an empty-state icon when no items exist.

* **Bug Fixes**
* Reduced layout shift and rendering glitches with improved
spacer/scroll calculations and more reliable media measurement.

* **Style**
* Simplified media rendering (standard img/video), unified item visuals
and hover/background behavior.

* **Tests**
* Added unit and end-to-end tests for virtualization, indexing, layouts,
dynamic updates, and empty states.

* **Breaking Changes**
* Dropdown item/selection shapes and related component props/events were
updated (adapter changes may be required).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: GitHub Action <action@github.com>

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

@@ -161,7 +161,7 @@ function handleSelection(item: FormDropdownItem, index: number) {
       sel.clear()
       sel.add(item.id)
     } else {
-      toastStore.addAlert(`Maximum selection limit reached`)
+      toastStore.addAlert(t('widgets.uploadSelect.maxSelectionReached'))
       return
     }
   }

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

@@ -49,7 +49,7 @@ const theButtonStyle = computed(() =>
   <div
     :class="
       cn(WidgetInputBaseClass, 'flex text-base leading-none', {
-        'opacity-50 cursor-not-allowed !outline-zinc-300/10': disabled
+        'opacity-50 cursor-not-allowed outline-zinc-300/10': disabled
       })
     "
   >

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

@@ -0,0 +1,113 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+
+import FormDropdownMenu from './FormDropdownMenu.vue'
+import type { FormDropdownItem, LayoutMode } from './types'
+
+function createItem(id: string, name: string): FormDropdownItem {
+  return {
+    id,
+    preview_url: '',
+    name,
+    label: name
+  }
+}
+
+describe('FormDropdownMenu', () => {
+  const defaultProps = {
+    items: [createItem('1', 'Item 1'), createItem('2', 'Item 2')],
+    isSelected: () => false,
+    filterOptions: [],
+    sortOptions: []
+  }
+
+  it('renders empty state when no items', async () => {
+    const wrapper = mount(FormDropdownMenu, {
+      props: {
+        ...defaultProps,
+        items: []
+      },
+      global: {
+        stubs: {
+          FormDropdownMenuFilter: true,
+          FormDropdownMenuActions: true,
+          VirtualGrid: true
+        },
+        mocks: {
+          $t: (key: string) => key
+        }
+      }
+    })
+
+    await nextTick()
+
+    const emptyIcon = wrapper.find('.icon-\\[lucide--circle-off\\]')
+    expect(emptyIcon.exists()).toBe(true)
+  })
+
+  it('renders VirtualGrid when items exist', async () => {
+    const wrapper = mount(FormDropdownMenu, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          FormDropdownMenuFilter: true,
+          FormDropdownMenuActions: true,
+          VirtualGrid: true
+        }
+      }
+    })
+
+    await nextTick()
+
+    const virtualGrid = wrapper.findComponent({ name: 'VirtualGrid' })
+    expect(virtualGrid.exists()).toBe(true)
+  })
+
+  it('transforms items to include key property for VirtualGrid', async () => {
+    const items = [createItem('1', 'Item 1'), createItem('2', 'Item 2')]
+    const wrapper = mount(FormDropdownMenu, {
+      props: {
+        ...defaultProps,
+        items
+      },
+      global: {
+        stubs: {
+          FormDropdownMenuFilter: true,
+          FormDropdownMenuActions: true,
+          VirtualGrid: true
+        }
+      }
+    })
+
+    await nextTick()
+
+    const virtualGrid = wrapper.findComponent({ name: 'VirtualGrid' })
+    const virtualItems = virtualGrid.props('items')
+
+    expect(virtualItems).toHaveLength(2)
+    expect(virtualItems[0]).toHaveProperty('key', '1')
+    expect(virtualItems[1]).toHaveProperty('key', '2')
+  })
+
+  it('uses single column layout for list modes', async () => {
+    const wrapper = mount(FormDropdownMenu, {
+      props: {
+        ...defaultProps,
+        layoutMode: 'list' as LayoutMode
+      },
+      global: {
+        stubs: {
+          FormDropdownMenuFilter: true,
+          FormDropdownMenuActions: true,
+          VirtualGrid: true
+        }
+      }
+    })
+
+    await nextTick()
+
+    const virtualGrid = wrapper.findComponent({ name: 'VirtualGrid' })
+    expect(virtualGrid.props('maxColumns')).toBe(1)
+  })
+})

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { MaybeRefOrGetter } from 'vue'
+import type { CSSProperties, MaybeRefOrGetter } from 'vue'
+import { computed } from 'vue'
 
-import { cn } from '@/utils/tailwindUtil'
+import VirtualGrid from '@/components/common/VirtualGrid.vue'
 
 import type {
   FilterOption,
@@ -30,7 +31,18 @@ interface Props {
   baseModelOptions?: FilterOption[]
 }
 
-defineProps<Props>()
+const {
+  items,
+  isSelected,
+  filterOptions,
+  sortOptions,
+  searcher,
+  updateKey,
+  showOwnershipFilter,
+  ownershipOptions,
+  showBaseModelFilter,
+  baseModelOptions
+} = defineProps<Props>()
 const emit = defineEmits<{
   (e: 'item-click', item: FormDropdownItem, index: number): void
 }>()
@@ -41,11 +53,48 @@ const sortSelected = defineModel<string>('sortSelected')
 const searchQuery = defineModel<string>('searchQuery')
 const ownershipSelected = defineModel<OwnershipOption>('ownershipSelected')
 const baseModelSelected = defineModel<Set<string>>('baseModelSelected')
+
+type LayoutConfig = {
+  maxColumns: number
+  itemHeight: number
+  itemWidth: number
+  gap: string
+}
+
+const LAYOUT_CONFIGS: Record<LayoutMode, LayoutConfig> = {
+  grid: { maxColumns: 4, itemHeight: 120, itemWidth: 89, gap: '1rem 0.5rem' },
+  list: { maxColumns: 1, itemHeight: 64, itemWidth: 380, gap: '0.5rem' },
+  'list-small': {
+    maxColumns: 1,
+    itemHeight: 40,
+    itemWidth: 380,
+    gap: '0.25rem'
+  }
+}
+
+const layoutConfig = computed<LayoutConfig>(
+  () => LAYOUT_CONFIGS[layoutMode.value ?? 'grid']
+)
+
+const gridStyle = computed<CSSProperties>(() => ({
+  display: 'grid',
+  gap: layoutConfig.value.gap,
+  padding: '1rem',
+  width: '100%'
+}))
+
+type VirtualDropdownItem = FormDropdownItem & { key: string }
+const virtualItems = computed<VirtualDropdownItem[]>(() =>
+  items.map((item) => ({
+    ...item,
+    key: String(item.id)
+  }))
+)
 </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"
+    class="flex h-[640px] w-103 flex-col rounded-lg bg-component-node-background pt-4 outline outline-offset-[-1px] outline-node-component-border"
   >
     <FormDropdownMenuFilter
       v-if="filterOptions.length > 0"
@@ -66,34 +115,30 @@ const baseModelSelected = defineModel<Set<string>>('baseModelSelected')
       :show-base-model-filter
       :base-model-options
     />
-    <div class="relative flex h-full mt-2 overflow-y-scroll">
-      <div
-        :class="
-          cn(
-            'h-full max-h-full grid gap-x-2 gap-y-4 overflow-y-auto px-4 pt-4 pb-4 w-full',
-            {
-              'grid-cols-4': layoutMode === 'grid',
-              'grid-cols-1 gap-y-2': layoutMode === 'list',
-              'grid-cols-1 gap-y-1': layoutMode === 'list-small'
-            }
-          )
-        "
-      >
-        <div class="pointer-events-none absolute inset-x-3 top-0 z-10 h-5" />
-        <div
-          v-if="items.length === 0"
-          class="h-50 col-span-full flex items-center justify-center"
-        >
-          <i
-            :title="$t('g.noItems')"
-            :aria-label="$t('g.noItems')"
-            class="icon-[lucide--circle-off] size-30 text-zinc-500/20"
-          />
-        </div>
+    <div
+      v-if="items.length === 0"
+      class="flex h-50 items-center justify-center"
+    >
+      <i
+        :title="$t('g.noItems')"
+        :aria-label="$t('g.noItems')"
+        class="icon-[lucide--circle-off] size-30 text-muted-foreground/20"
+      />
+    </div>
+    <VirtualGrid
+      v-else
+      :key="layoutMode"
+      :items="virtualItems"
+      :grid-style
+      :max-columns="layoutConfig.maxColumns"
+      :default-item-height="layoutConfig.itemHeight"
+      :default-item-width="layoutConfig.itemWidth"
+      :buffer-rows="2"
+      class="mt-2 min-h-0 flex-1"
+    >
+      <template #item="{ item, index }">
         <FormDropdownMenuItem
-          v-for="(item, index) in items"
-          :key="item.id"
-          :index="index"
+          :index
           :selected="isSelected(item, index)"
           :preview-url="item.preview_url ?? ''"
           :name="item.name"
@@ -101,7 +146,7 @@ const baseModelSelected = defineModel<Set<string>>('baseModelSelected')
           :layout="layoutMode"
           @click="emit('item-click', item, index)"
         />
-      </div>
-    </div>
+      </template>
+    </VirtualGrid>
   </div>
 </template>

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue'
 
-import LazyImage from '@/components/common/LazyImage.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 import { AssetKindKey } from './types'
@@ -57,7 +56,7 @@ function handleVideoLoad(event: Event) {
     :class="
       cn(
         'flex gap-1 select-none group/item cursor-pointer bg-component-node-widget-background',
-        'transition-all duration-150',
+        'transition-[transform,box-shadow,background-color] duration-150',
         {
           'flex-col text-center': layout === 'grid',
           'flex-row text-left max-h-16 rounded-lg hover:scale-102 active:scale-98':
@@ -79,7 +78,7 @@ function handleVideoLoad(event: Event) {
         cn(
           'relative',
           'w-full aspect-square overflow-hidden outline-1 outline-offset-[-1px] outline-interface-stroke',
-          'transition-all duration-150',
+          'transition-[transform,box-shadow] duration-150',
           {
             'min-w-16 max-w-16 rounded-l-lg': layout === 'list',
             'rounded-sm group-hover/item:scale-108 group-active/item:scale-95':
@@ -108,11 +107,12 @@ function handleVideoLoad(event: Event) {
         muted
         @loadeddata="handleVideoLoad"
       />
-      <LazyImage
+      <img
         v-else-if="previewUrl"
         :src="previewUrl"
         :alt="name"
-        image-class="size-full object-cover"
+        draggable="false"
+        class="size-full object-cover"
         @load="handleImageLoad"
       />
       <div