fix: content tab fixes (#5543)

* fix: search again * fix: navigation bug * fix: switch to stable key for toggle disable * feat: inline backup slow warning icon * fix: qa * feat: fix installation state
2026-03-12 22:52:55 +00:00
parent 52d46b8aaa
commit ba06c89a0e
15 changed files with 387 additions and 196 deletions
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
@@ -3,6 +3,7 @@ import {
 	DownloadIcon,
 	MoreVerticalIcon,
 	OrganizationIcon,
+	SpinnerIcon,
 	TrashIcon,
 	TriangleAlertIcon,
 } from '@modrinth/assets'
@@ -33,6 +34,7 @@ interface Props {
 	versionLink?: string | RouteLocationRaw
 	owner?: ContentOwner
 	enabled?: boolean
+	installing?: boolean
 	hasUpdate?: boolean
 	isClientOnly?: boolean
 	overflowOptions?: OverflowMenuOption[]
@@ -48,6 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
 	versionLink: undefined,
 	owner: undefined,
 	enabled: undefined,
+	installing: false,
 	hasUpdate: false,
 	isClientOnly: false,
 	overflowOptions: undefined,
@@ -95,13 +98,21 @@ const fileNameRef = ref<HTMLElement | null>(null)
 			/>

 			<div class="flex min-w-0 items-center gap-3">
-				<Avatar
-					:src="project.icon_url"
-					:alt="project.title"
-					size="3rem"
-					no-shadow
-					class="shrink-0 rounded-2xl border border-surface-5"
-				/>
+				<div v-tooltip="installing ? formatMessage(commonMessages.installingLabel) : undefined" class="relative shrink-0">
+					<Avatar
+						:src="project.icon_url"
+						:alt="project.title"
+						size="3rem"
+						no-shadow
+						class="rounded-2xl border border-surface-5"
+					/>
+					<div
+						v-if="installing"
+						class="absolute inset-0 flex items-center justify-center rounded-2xl bg-black/20"
+					>
+						<SpinnerIcon class="size-5 animate-spin text-white" />
+					</div>
+				</div>
 				<div class="flex min-w-0 flex-col gap-0.5">
 					<div class="flex min-w-0 items-center gap-1">
 						<AutoLink
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
-import { computed, getCurrentInstance, ref, toRef } from 'vue'
+import { computed, getCurrentInstance, onMounted, onUnmounted, ref, toRef } from 'vue'

 import Checkbox from '#ui/components/base/Checkbox.vue'
 import { useVIntl } from '#ui/composables/i18n'
@@ -112,14 +112,43 @@ function toggleSelectAll() {
 	}
 }

-function toggleItemSelection(itemId: string, selected: boolean) {
-	if (selected) {
+const lastSelectedIndex = ref<number | null>(null)
+const shiftHeld = ref(false)
+
+function onKeyDown(e: KeyboardEvent) {
+	if (e.key === 'Shift') shiftHeld.value = true
+}
+function onKeyUp(e: KeyboardEvent) {
+	if (e.key === 'Shift') shiftHeld.value = false
+}
+
+onMounted(() => {
+	window.addEventListener('keydown', onKeyDown)
+	window.addEventListener('keyup', onKeyUp)
+})
+onUnmounted(() => {
+	window.removeEventListener('keydown', onKeyDown)
+	window.removeEventListener('keyup', onKeyUp)
+})
+
+function toggleItemSelection(itemId: string, selected: boolean, index?: number) {
+	if (selected && shiftHeld.value && lastSelectedIndex.value !== null && index !== undefined) {
+		const start = Math.min(lastSelectedIndex.value, index)
+		const end = Math.max(lastSelectedIndex.value, index)
+		const rangeIds = props.items.slice(start, end + 1).map((item) => item.id)
+		const merged = new Set([...selectedIds.value, ...rangeIds])
+		selectedIds.value = [...merged]
+	} else if (selected) {
 		if (!selectedIds.value.includes(itemId)) {
 			selectedIds.value = [...selectedIds.value, itemId]
 		}
 	} else {
 		selectedIds.value = selectedIds.value.filter((id) => id !== itemId)
 	}
+
+	if (index !== undefined) {
+		lastSelectedIndex.value = index
+	}
 }

 function isItemSelected(itemId: string): boolean {
@@ -241,6 +270,7 @@ function handleSort(column: ContentCardTableSortColumn) {
 					:version-link="item.versionLink"
 					:owner="item.owner"
 					:enabled="item.enabled"
+					:installing="item.installing"
 					:has-update="item.hasUpdate"
 					:is-client-only="item.isClientOnly"
 					:overflow-options="item.overflowOptions"
@@ -254,7 +284,7 @@ function handleSort(column: ContentCardTableSortColumn) {
 						'border-0 border-t border-solid border-surface-4',
 						visibleRange.start + idx === items.length - 1 && !flat ? 'rounded-b-[20px]' : '',
 					]"
-					@update:selected="(val) => toggleItemSelection(item.id, val ?? false)"
+					@update:selected="(val) => toggleItemSelection(item.id, val ?? false, visibleRange.start + idx)"
 					@update:enabled="(val) => emit('update:enabled', item.id, val)"
 					@delete="emit('delete', item.id)"
 					@update="emit('update', item.id)"
@@ -285,6 +315,7 @@ function handleSort(column: ContentCardTableSortColumn) {
 				:version-link="item.versionLink"
 				:owner="item.owner"
 				:enabled="item.enabled"
+				:installing="item.installing"
 				:has-update="item.hasUpdate"
 				:overflow-options="item.overflowOptions"
 				:disabled="item.disabled"
@@ -297,7 +328,7 @@ function handleSort(column: ContentCardTableSortColumn) {
 					'border-0 border-t border-solid border-surface-4',
 					index === items.length - 1 && !flat ? 'rounded-b-[20px]' : '',
 				]"
-				@update:selected="(val) => toggleItemSelection(item.id, val ?? false)"
+				@update:selected="(val) => toggleItemSelection(item.id, val ?? false, index)"
 				@update:enabled="(val) => emit('update:enabled', item.id, val)"
 				@delete="emit('delete', item.id)"
 				@update="emit('update', item.id)"
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue
@@ -3,11 +3,8 @@
 		<span class="text-primary">
 			{{ formatMessage(messages.warningBody, { type: backup.isServer ? 'server' : 'instance' }) }}
 		</span>
-		<span v-if="backup.isServer" class="text-brand-orange font-semibold">
-			{{ formatMessage(messages.backupTakesAWhile) }}
-		</span>

-		<div v-if="backup.available">
+		<div v-if="backup.available" class="flex items-center gap-2">
 			<!-- Button / Loading state -->
 			<ButtonStyled v-if="!backup.backupComplete.value && !backup.backupFailed.value">
 				<button
@@ -39,12 +36,18 @@
 			<div v-else-if="backup.backupFailed.value" class="text-sm text-red">
 				{{ formatMessage(messages.backupFailed) }}
 			</div>
+
+			<TriangleAlertIcon
+				v-if="backup.isServer"
+				v-tooltip="formatMessage(messages.backupTakesAWhile)"
+				class="size-5 shrink-0 text-brand-orange hover:brightness-110"
+			/>
 		</div>
 	</div>
 </template>

 <script setup lang="ts">
-import { CheckCircleIcon, PlusIcon, SpinnerIcon } from '@modrinth/assets'
+import { CheckCircleIcon, PlusIcon, SpinnerIcon, TriangleAlertIcon } from '@modrinth/assets'
 import { watch } from 'vue'

 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'