Switch to virtual typed list for content page

apps/app-frontend/package.json

@@ -35,8 +35,8 @@
     "vue-virtual-scroller": "v2.0.0-beta.8"
   },
   "devDependencies": {
-    "@formatjs/cli": "^6.2.12",
     "@eslint/compat": "^1.1.1",
+    "@formatjs/cli": "^6.2.12",
     "@nuxt/eslint-config": "^0.5.6",
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.19",

packages/ui/package.json

@@ -37,7 +37,7 @@
     "qrcode.vue": "^3.4.1",
     "vue-multiselect": "3.0.0",
     "vue-select": "4.0.0-beta.6",
-    "vue-virtual-scroller": "v2.0.0-beta.8",
+    "vue-typed-virtual-list": "^1.0.10",
     "vue3-apexcharts": "^1.4.4",
     "xss": "^1.0.14"
   },

packages/ui/src/components/content/ContentListPanel.vue

@@ -5,7 +5,7 @@ import Checkbox from '../base/Checkbox.vue'
 import ContentListItem from './ContentListItem.vue'
 import type { ContentItem } from './ContentListItem.vue'
 import { DropdownIcon } from '@modrinth/assets'
-import { RecycleScroller } from 'vue-virtual-scroller'
+import { createVirtualScroller } from 'vue-typed-virtual-list'
 
 const props = withDefaults(
   defineProps<{
@@ -17,6 +17,8 @@ const props = withDefaults(
   {},
 )
 
+const VirtualScroller = createVirtualScroller()
+
 const selectionStates: Ref<Record<string, boolean>> = ref({})
 const selected: Ref<string[]> = computed(() =>
   Object.keys(selectionStates.value).filter(
@@ -76,26 +78,21 @@ function setSelected(value: boolean) {
       </slot>
     </div>
     <div class="bg-bg-raised rounded-xl">
-      <RecycleScroller
-        v-slot="{ item, index }"
-        :items="items"
-        :item-size="64"
-        disable-transform
-        key-field="filename"
-        style="height: 100%"
-      >
-        <ContentListItem
-          v-model="selectionStates[item.filename]"
-          :item="item"
-          :last="props.items.length - 1 === index"
-          class="mb-2"
-          @update:model-value="updateSelection"
-        >
-          <template #actions="{ item }">
-            <slot name="actions" :item="item" />
-          </template>
-        </ContentListItem>
-      </RecycleScroller>
+      <VirtualScroller :items="items" :default-size="64" style="height: 100%">
+        <template #item="{ ref }">
+          <ContentListItem
+            v-model="selectionStates[ref.filename]"
+            :item="ref"
+            :last="false"
+            class="mb-2"
+            @update:model-value="updateSelection"
+          >
+            <template #actions="{ item }">
+              <slot name="actions" :item="item" />
+            </template>
+          </ContentListItem>
+        </template>
+      </VirtualScroller>
     </div>
   </div>
 </template>