feat: clean up browse shared layout logic + introduce queuing (#6030)

* feat: clean up edge case behaviour and add queued to install logic

* fix: remove version choice modal

* feat: queued flow

* feat: standardize headers in app on proj pages

* fix: clear btn

* feat: installing floating popup

* fix: lint

* fix: onboarding/reset logic change for modpacks

* qa: big ol qa

* fix: lint

* fix: lint

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

packages/ui/src/composables/virtual-scroll.ts

@@ -4,13 +4,21 @@ import { computed, ref, watch, watchEffect } from 'vue'
 export interface VirtualScrollOptions {
 	itemHeight: number
 	bufferSize?: number
+	initialItemCount?: number
 	enabled?: Ref<boolean>
 	onNearEnd?: () => void
 	nearEndThreshold?: number
 }
 
 export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptions) {
-	const { itemHeight, bufferSize = 5, enabled, onNearEnd, nearEndThreshold = 0.2 } = options
+	const {
+		itemHeight,
+		bufferSize = 5,
+		initialItemCount = 20,
+		enabled,
+		onNearEnd,
+		nearEndThreshold = 0.2,
+	} = options
 
 	const listContainer = ref<HTMLElement | null>(null)
 	const scrollContainer = ref<HTMLElement | Window | null>(null)
@@ -68,7 +76,9 @@ export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptio
 			return { start: 0, end: items.value.length }
 		}
 
-		if (!listContainer.value || !scrollContainer.value) return { start: 0, end: 0 }
+		if (!listContainer.value || !scrollContainer.value) {
+			return { start: 0, end: Math.min(items.value.length, initialItemCount) }
+		}
 
 		const relativeScrollTop = Math.max(0, scrollTop.value - containerOffset.value)