From 51bdd0a2e4a32a277b6065103663ce352fbe0760 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 18 Aug 2026 21:43:10 -0600
Subject: [PATCH] feat: add drag handle to resize num items in jump in

---
 .../components/ui/world/RecentWorldsList.vue  | 353 +++++++++++++-----
 apps/app-frontend/src/pages/Index.vue         |   2 +-
 2 files changed, 268 insertions(+), 87 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue b/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
index bf6c0d84d8..a75de082e2 100644
--- a/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
+++ b/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
 import { LoaderCircleIcon } from '@modrinth/assets'
-import type { GameVersion } from '@modrinth/ui'
-import { defineMessages, GAME_MODES, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import {
+	Accordion,
+	defineMessages,
+	GAME_MODES,
+	type GameVersion,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
 import { platform } from '@tauri-apps/plugin-os'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import InstanceItem from '@/components/ui/world/InstanceItem.vue'
 import WorldItem from '@/components/ui/world/WorldItem.vue'
@@ -36,6 +42,7 @@ const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const messages = defineMessages({
 	jumpIn: { id: 'app.home.jump-back-in.title', defaultMessage: 'Jump in' },
+	resize: { id: 'app.home.jump-back-in.resize', defaultMessage: 'Drag to resize' },
 })
 
 const props = defineProps<{
@@ -54,6 +61,100 @@ const gameVersions = ref<GameVersion[]>(await get_game_versions().catch(() => []
 const MAX_JUMP_BACK_IN = 5
 const MAX_NEW_INSTANCES = 3
 const MAX_LINUX_POPULATES = 3
+const ITEM_DRAG_DISTANCE = 92
+const STORAGE_KEY = 'modrinth-jump-back-in-count'
+
+const storedVisibleCount = Number.parseInt(localStorage.getItem(STORAGE_KEY) ?? '', 10)
+const visibleItemLimit = ref(
+	Number.isFinite(storedVisibleCount)
+		? Math.max(1, Math.min(storedVisibleCount, MAX_JUMP_BACK_IN))
+		: MAX_JUMP_BACK_IN,
+)
+const maxVisibleItems = computed(() => Math.min(jumpBackInItems.value.length, MAX_JUMP_BACK_IN))
+const visibleItemCount = computed(() => Math.min(visibleItemLimit.value, maxVisibleItems.value))
+const visibleJumpBackInItems = computed(() =>
+	jumpBackInItems.value.slice(0, visibleItemCount.value),
+)
+const canResize = computed(() => maxVisibleItems.value > 1)
+const resizing = ref(false)
+const showOverdrag = ref(false)
+
+function setVisibleItemLimit(count: number) {
+	const clamped = Math.max(1, Math.min(count, maxVisibleItems.value))
+	if (clamped >= maxVisibleItems.value) {
+		visibleItemLimit.value = MAX_JUMP_BACK_IN
+		localStorage.removeItem(STORAGE_KEY)
+	} else {
+		visibleItemLimit.value = clamped
+		localStorage.setItem(STORAGE_KEY, String(clamped))
+	}
+}
+
+function adjustVisibleItemLimit(delta: number) {
+	const target = visibleItemCount.value + delta
+	if (target < 1 || target > maxVisibleItems.value) {
+		flashOverdrag()
+	}
+	setVisibleItemLimit(target)
+}
+
+let dragStartY = 0
+let dragStartCount = 0
+let wasOverdragging = false
+let overdragTimeout: ReturnType<typeof setTimeout> | undefined
+
+function clearOverdragFlash() {
+	showOverdrag.value = false
+	if (overdragTimeout) {
+		clearTimeout(overdragTimeout)
+		overdragTimeout = undefined
+	}
+}
+
+function flashOverdrag() {
+	showOverdrag.value = true
+	if (overdragTimeout) clearTimeout(overdragTimeout)
+	overdragTimeout = setTimeout(() => {
+		showOverdrag.value = false
+		overdragTimeout = undefined
+	}, 500)
+}
+
+function onResizePointerDown(event: PointerEvent) {
+	if (!canResize.value) return
+	event.preventDefault()
+	resizing.value = true
+	wasOverdragging = false
+	clearOverdragFlash()
+	dragStartY = event.clientY
+	dragStartCount = visibleItemCount.value
+	document.body.classList.add('recent-worlds-resizing')
+	const handle = event.currentTarget as HTMLElement
+	handle.setPointerCapture(event.pointerId)
+}
+
+function onResizePointerMove(event: PointerEvent) {
+	if (!resizing.value) return
+	const target = dragStartCount + Math.round((event.clientY - dragStartY) / ITEM_DRAG_DISTANCE)
+	const isOverdragging = target < 1 || target > maxVisibleItems.value
+	if (isOverdragging && !wasOverdragging) {
+		flashOverdrag()
+	}
+	wasOverdragging = isOverdragging
+	setVisibleItemLimit(target)
+}
+
+function endResize(event?: PointerEvent) {
+	if (!resizing.value) return
+	resizing.value = false
+	wasOverdragging = false
+	clearOverdragFlash()
+	document.body.classList.remove('recent-worlds-resizing')
+	const target = event?.currentTarget as HTMLElement | undefined
+	if (event && target?.hasPointerCapture(event.pointerId)) {
+		target.releasePointerCapture(event.pointerId)
+	}
+}
 
 // Track populate calls on Linux to prevent server ping spam
 const isLinux = platform() === 'linux'
@@ -276,100 +377,180 @@ onMounted(() => {
 	checkProcesses()
 	linuxPopulateCount.value = 0
 })
+
+onUnmounted(() => {
+	document.body.classList.remove('recent-worlds-resizing')
+	clearOverdragFlash()
+})
 </script>
 
 <template>
-	<div v-if="loading" class="flex flex-col gap-2">
-		<span
-			class="flex mt-1 mb-3 leading-none items-center gap-1 text-2xl font-semibold text-contrast"
-		>
-			{{ formatMessage(messages.jumpIn) }}
-		</span>
-		<div class="text-center py-4">
+	<Accordion
+		v-if="loading || jumpBackInItems.length > 0"
+		open-by-default
+		button-class="group mt-1 mb-3 flex w-full cursor-pointer items-center border-0 bg-transparent p-0 text-left"
+	>
+		<template #title>
+			<span class="flex items-center gap-1 text-2xl font-semibold leading-none text-contrast">
+				{{ formatMessage(messages.jumpIn) }}
+			</span>
+		</template>
+		<div v-if="loading" class="text-center py-4">
 			<LoaderCircleIcon class="mx-auto size-8 animate-spin text-contrast" />
 		</div>
-	</div>
-	<div v-else-if="jumpBackInItems.length > 0" class="flex flex-col gap-2">
-		<span
-			class="flex mt-1 mb-3 leading-none items-center gap-1 text-2xl font-semibold text-contrast"
-		>
-			{{ formatMessage(messages.jumpIn) }}
-		</span>
-		<div class="grid-when-huge flex flex-col w-full gap-3">
-			<template
-				v-for="item in jumpBackInItems"
-				:key="`${item.instance.id}-${item.type === 'world' ? getWorldIdentifier(item.world) : 'instance'}`"
-			>
-				<WorldItem
-					v-if="item.type === 'world'"
-					:world="item.world"
-					:playing-instance="runningInstances.includes(item.instance.id)"
-					:playing-world="
-						currentInstance === item.instance.id && currentWorld === getWorldIdentifier(item.world)
-					"
-					:refreshing="
-						item.world.type === 'server'
-							? serverData[item.world.address].refreshing && !serverData[item.world.address].status
-							: undefined
-					"
-					:supports-server-quick-play="
-						item.world.type === 'server' &&
-						hasServerQuickPlaySupport(gameVersions, item.instance.game_version || '')
-					"
-					:supports-world-quick-play="
-						item.world.type === 'singleplayer' &&
-						hasWorldQuickPlaySupport(gameVersions, item.instance.game_version || '')
-					"
-					:quarantined="item.instance.quarantined"
-					:server-status="
-						item.world.type === 'server' ? serverData[item.world.address].status : undefined
-					"
-					:rendered-motd="
-						item.world.type === 'server' ? serverData[item.world.address].renderedMotd : undefined
-					"
-					:current-protocol="protocolVersions[item.instance.id]"
-					:game-mode="
-						item.world.type === 'singleplayer' ? GAME_MODES[item.world.game_mode] : undefined
-					"
-					:instance-id="item.instance.id"
-					:instance-name="item.instance.name"
-					:instance-icon="item.instance.icon_path"
-					@refresh="
-						() =>
+		<div v-else class="grid-when-huge relative flex w-full flex-col gap-3">
+			<TransitionGroup name="jump-back-in-item">
+				<div
+					v-for="item in visibleJumpBackInItems"
+					:key="`${item.instance.id}-${item.type === 'world' ? getWorldIdentifier(item.world) : 'instance'}`"
+					class="jump-back-in-item min-w-0"
+				>
+					<WorldItem
+						v-if="item.type === 'world'"
+						:world="item.world"
+						:playing-instance="runningInstances.includes(item.instance.id)"
+						:playing-world="
+							currentInstance === item.instance.id &&
+							currentWorld === getWorldIdentifier(item.world)
+						"
+						:refreshing="
 							item.world.type === 'server'
-								? refreshServer(item.world.address, item.instance.id)
-								: {}
-					"
-					@update="() => populateJumpBackIn()"
-					@play="
-						() => {
-							currentInstance = item.instance.id
-							currentWorld = getWorldIdentifier(item.world)
-							joinWorld(item.world, item.instance)
-						}
-					"
-					@play-instance="
-						() => {
-							currentInstance = item.instance.id
-							playInstance(item.instance)
-						}
-					"
-					@stop="() => stopInstance(item.instance.id)"
-				/>
-				<InstanceItem
-					v-else
-					:instance="item.instance"
-					:last_played="item.sort_time"
-					:newly-added="item.newly_added"
-					@play="() => markInstancePlayed(item)"
-				/>
-			</template>
+								? serverData[item.world.address].refreshing &&
+									!serverData[item.world.address].status
+								: undefined
+						"
+						:supports-server-quick-play="
+							item.world.type === 'server' &&
+							hasServerQuickPlaySupport(gameVersions, item.instance.game_version || '')
+						"
+						:supports-world-quick-play="
+							item.world.type === 'singleplayer' &&
+							hasWorldQuickPlaySupport(gameVersions, item.instance.game_version || '')
+						"
+						:quarantined="item.instance.quarantined"
+						:server-status="
+							item.world.type === 'server' ? serverData[item.world.address].status : undefined
+						"
+						:rendered-motd="
+							item.world.type === 'server' ? serverData[item.world.address].renderedMotd : undefined
+						"
+						:current-protocol="protocolVersions[item.instance.id]"
+						:game-mode="
+							item.world.type === 'singleplayer' ? GAME_MODES[item.world.game_mode] : undefined
+						"
+						:instance-id="item.instance.id"
+						:instance-name="item.instance.name"
+						:instance-icon="item.instance.icon_path"
+						@refresh="
+							() =>
+								item.world.type === 'server'
+									? refreshServer(item.world.address, item.instance.id)
+									: {}
+						"
+						@update="() => populateJumpBackIn()"
+						@play="
+							() => {
+								currentInstance = item.instance.id
+								currentWorld = getWorldIdentifier(item.world)
+								joinWorld(item.world, item.instance)
+							}
+						"
+						@play-instance="
+							() => {
+								currentInstance = item.instance.id
+								playInstance(item.instance)
+							}
+						"
+						@stop="() => stopInstance(item.instance.id)"
+					/>
+					<InstanceItem
+						v-else
+						:instance="item.instance"
+						:last_played="item.sort_time"
+						:newly-added="item.newly_added"
+						@play="() => markInstancePlayed(item)"
+					/>
+				</div>
+			</TransitionGroup>
+			<div
+				v-if="canResize"
+				v-tooltip="resizing ? null : formatMessage(messages.resize)"
+				role="separator"
+				tabindex="0"
+				aria-orientation="horizontal"
+				:aria-label="formatMessage(messages.resize)"
+				:aria-valuemin="1"
+				:aria-valuemax="maxVisibleItems"
+				:aria-valuenow="visibleItemCount"
+				class="group/resize relative inset-x-0 bottom-0 flex h-6 -mt-3 w-1/3 mx-auto cursor-ns-resize touch-none select-none items-center justify-center opacity-0 transition-opacity duration-200 hover:opacity-100 focus-visible:opacity-100"
+				:class="{ 'opacity-100': resizing }"
+				@pointerdown="onResizePointerDown"
+				@pointermove="onResizePointerMove"
+				@pointerup="endResize"
+				@pointercancel="endResize"
+				@keydown.up.prevent="adjustVisibleItemLimit(-1)"
+				@keydown.down.prevent="adjustVisibleItemLimit(1)"
+				@keydown.home.prevent="setVisibleItemLimit(1)"
+				@keydown.end.prevent="setVisibleItemLimit(maxVisibleItems)"
+			>
+				<div class="flex flex-col gap-0.5">
+					<span
+						class="h-px w-6 transition-colors"
+						:class="showOverdrag ? 'bg-red' : 'bg-surface-3 group-hover/resize:bg-secondary'"
+					/>
+					<span
+						class="h-px w-6 transition-colors"
+						:class="showOverdrag ? 'bg-red' : 'bg-surface-3 group-hover/resize:bg-secondary'"
+					/>
+				</div>
+			</div>
 		</div>
-	</div>
+	</Accordion>
 </template>
 <style scoped lang="scss">
 .grid-when-huge {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(670px, 1fr));
 }
+
+.jump-back-in-item {
+	height: 5rem;
+	overflow: hidden;
+}
+
+.jump-back-in-item-enter-active,
+.jump-back-in-item-leave-active {
+	transition:
+		opacity 0.25s ease,
+		transform 0.25s ease,
+		height 0.25s ease;
+}
+
+.jump-back-in-item-enter-from,
+.jump-back-in-item-leave-to {
+	opacity: 0;
+	transform: scale(0.98);
+	height: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.jump-back-in-item-enter-active,
+	.jump-back-in-item-leave-active {
+		transition: none;
+	}
+
+	.jump-back-in-item-enter-from,
+	.jump-back-in-item-leave-to {
+		opacity: 1;
+		transform: none;
+		height: 5rem;
+	}
+}
+</style>
+
+<style lang="scss">
+body.recent-worlds-resizing,
+body.recent-worlds-resizing * {
+	cursor: ns-resize !important;
+}
 </style>
diff --git a/apps/app-frontend/src/pages/Index.vue b/apps/app-frontend/src/pages/Index.vue
index 9e7c51fd1c..93fc59a663 100644
--- a/apps/app-frontend/src/pages/Index.vue
+++ b/apps/app-frontend/src/pages/Index.vue
@@ -102,7 +102,7 @@ function handlePageOption({ option }: { option: string }) {
 	<div
 		v-else-if="isReady"
 		data-library-page-background
-		class="flex flex-col gap-6 p-6"
+		class="flex flex-col gap-3 p-6"
 		@contextmenu="openPageContextMenu"
 	>
 		<RecentWorldsList