Keep fetching library pages after the first 50 so the whole folder is reachable.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/studio2/LibraryModal.vue

@@ -286,7 +286,7 @@ function applyLibraryPage(data: any, replace: boolean) {
   fetchedAt.value = Date.now()
 }
 
-async function fetchLibraryPage(cursor: string | null, replace: boolean) {
+async function fetchLibraryPage(cursor: string | null) {
   const folder = activeFolderId.value && activeFolderId.value !== 'all' ? activeFolderId.value : ''
   const type = filter.value === 'all' ? 'all' : filter.value === 'images' ? 'images' : filter.value === 'videos' ? 'videos' : 'music'
   const qs = new URLSearchParams({ limit: '50' })
@@ -296,28 +296,33 @@ async function fetchLibraryPage(cursor: string | null, replace: boolean) {
   return await $fetch<any>(`/api/library?${qs.toString()}`)
 }
 
+let fetchGen = 0
+
 async function fetchLibrary(force = false) {
-  if (loading.value) return
   const stale = !fetchedAt.value || Date.now() - fetchedAt.value > 15_000
   const empty = !stills.value.length && !clips.value.length && !tracks.value.length
   if (!force && !empty && !stale) return
+  const gen = ++fetchGen
   loading.value = true
   loadError.value = ''
   liveThumbs.value = new Set()
   try {
-    const first = await fetchLibraryPage(null, true)
+    const first = await fetchLibraryPage(null)
+    if (gen !== fetchGen) return
     applyLibraryPage(first, true)
     loading.value = false
     nextTick(() => observeThumbs())
-    // Pull remaining pages in the background — first paint already has ≤50 items
+    // Keep fetching until the folder is exhausted — 50 is a page size, not a cap
     let cursor = first?.nextCursor || null
-    while (cursor) {
-      const more = await fetchLibraryPage(cursor, false)
+    while (cursor && gen === fetchGen) {
+      const more = await fetchLibraryPage(cursor)
+      if (gen !== fetchGen) return
       applyLibraryPage(more, false)
       cursor = more?.nextCursor || null
       nextTick(() => observeThumbs())
     }
   } catch (e: any) {
+    if (gen !== fetchGen) return
     loadError.value = e?.data?.statusMessage || e?.message || 'Could not load library'
     loading.value = false
   }
@@ -354,7 +359,7 @@ async function fetchMore() {
   if (!nextCursor.value || loading.value) return
   loading.value = true
   try {
-    const more = await fetchLibraryPage(nextCursor.value, false)
+    const more = await fetchLibraryPage(nextCursor.value)
     applyLibraryPage(more, false)
     nextTick(() => observeThumbs())
   } catch { /* keep what we have */ }
@@ -404,6 +409,11 @@ watch(() => props.open, (on) => {
 
 watch(entries, () => nextTick(() => observeThumbs()))
 
+watch([filter, activeFolderId], () => {
+  if (!props.open) return
+  void fetchLibrary(true)
+})
+
 onBeforeUnmount(() => {
   if (import.meta.client) {
     document.body.style.overflow = ''