From 36e58cc6c93051d6c5cf3ea2e52bf8aa72288406 Mon Sep 17 00:00:00 2001 From: tdgao Date: Tue, 30 Jun 2026 22:39:37 -0700 Subject: [PATCH 1/4] feat: shorten ModLoader --- .../project/ProjectPageVersions.vue | 50 ++++++++++++++----- 1 file changed, 38 insertions(+), 12 deletions(-) diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue index 31614b55ee..a0cf8c31a7 100644 --- a/packages/ui/src/components/project/ProjectPageVersions.vue +++ b/packages/ui/src/components/project/ProjectPageVersions.vue @@ -55,7 +55,7 @@ @@ -258,7 +259,7 @@
@@ -334,13 +335,13 @@ - + {{ getPlatformLabel(platform) }} - + {{ getPlatformLabel(platform) }}
@@ -425,7 +427,6 @@ import { import { AutoLink, ButtonStyled, - FormattedTag, Pagination, SmartClickable, Table, @@ -444,6 +445,7 @@ import { useRoute, useRouter } from 'vue-router' import { useRelativeTime } from '../../composables' import { defineMessages, useVIntl } from '../../composables/i18n' +import { formatTag } from '../../utils/tag-messages' import { getEnvironmentTags } from './settings/environment/environments' const { formatMessage } = useVIntl() @@ -519,7 +521,7 @@ const versionColumns = computed[]>(() => { }, { key: 'name', - label: 'Name', + label: 'Version', cellClass: '!overflow-visible py-3 pr-4 min-w-[7rem]', }, { @@ -599,6 +601,22 @@ function getDisplayGameVersions(version: DisplayVersion): string[] { return formatVersionsForDisplay(version.game_versions, props.gameVersions) } +function getFilterTooltip(filter: string): string { + return formatMessage(messages.toggleFilterTooltip, { filter }) +} + +function getPlatformLabel(platform: string): string { + if (platform === 'modloader') { + return formatMessage(messages.modloaderShort) + } + + return formatTag(formatMessage, platform, 'loader') +} + +function getPlatformTooltip(platform: string): string { + return getFilterTooltip(formatTag(formatMessage, platform, 'loader')) +} + const normalizedVersions = computed(() => props.versions.map((version) => { const loaders = getModpackLoaders(version) @@ -709,6 +727,14 @@ const messages = defineMessages({ id: 'project.versions.version.withheld.tooltip', defaultMessage: 'Version withheld due to missing permissions', }, + toggleFilterTooltip: { + id: 'project.versions.filter.toggle-tooltip', + defaultMessage: 'Toggle filter for {filter}', + }, + modloaderShort: { + id: 'project.versions.platform.modloader.short', + defaultMessage: 'ModLoader', + }, }) From 0d87b27c74be2bb46a813894b11693061cbc2817 Mon Sep 17 00:00:00 2001 From: tdgao Date: Tue, 30 Jun 2026 23:07:31 -0700 Subject: [PATCH 2/4] fix: game version and platform tag overflow issues --- packages/ui/src/components/base/Table.vue | 2 +- .../project/ProjectPageVersions.vue | 55 ++++++++++++------- 2 files changed, 36 insertions(+), 21 deletions(-) diff --git a/packages/ui/src/components/base/Table.vue b/packages/ui/src/components/base/Table.vue index db2d1a4f47..8f9e613e49 100644 --- a/packages/ui/src/components/base/Table.vue +++ b/packages/ui/src/components/base/Table.vue @@ -33,7 +33,7 @@ - {{ formatMessage(messages.withheld) }} + + + {{ formatMessage(messages.withheld) }} +
@@ -106,34 +109,38 @@ @@ -132,39 +146,53 @@ :style="{ height: `${topSpacerHeight}px` }" > - - - - - - - {{ row[column.key] ?? '' }} - - - + + + + + {{ row[column.key] ?? '' }} + + + + + + + + + boolean) rowClass?: string | ((row: T, index: number) => string) rowClickable?: boolean | ((row: T, index: number) => boolean) }>(), @@ -250,6 +279,7 @@ const sortDirection = defineModel('sortDirection', { default: 'as const slots = useSlots() const selectionAnchorId = ref() const hasHeaderSlot = computed(() => Boolean(slots.header)) +const hasRowBelowSlot = computed(() => Boolean(slots['row-below'])) const columnSpan = computed(() => Math.max(props.columns.length + (props.showSelection ? 1 : 0), 1)) const { @@ -331,6 +361,22 @@ function getRowRenderKey(row: T, rowIndex: number): PropertyKey { return rowIndex } +function getRowPartRenderKey(row: T, rowIndex: number, part: 'group' | 'row' | 'below'): string { + return `${String(getRowRenderKey(row, rowIndex))}-${part}` +} + +function isRowBelowVisible(row: T, rowIndex: number): boolean { + if (!hasRowBelowSlot.value || props.virtualized) { + return false + } + + if (typeof props.rowBelowVisible === 'function') { + return props.rowBelowVisible(row, rowIndex) + } + + return props.rowBelowVisible ?? true +} + function getRowClass(row: T, rowIndex: number): string[] { const baseClass = rowIndex % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5' const customClass = @@ -339,6 +385,20 @@ function getRowClass(row: T, rowIndex: number): string[] { return customClass ? [baseClass, customClass] : [baseClass] } +function getRowBelowClass(row: T, rowIndex: number): string[] { + const classes = [ + rowIndex % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5', + 'table-row-below', + 'transition-[filter]', + ] + + if (isRowClickable(row, rowIndex)) { + classes.push('cursor-pointer') + } + + return classes +} + function isRowClickable(row: T, rowIndex: number): boolean { return typeof props.rowClickable === 'function' ? props.rowClickable(row, rowIndex) diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue index adf53df3c9..3d0b0057c9 100644 --- a/packages/ui/src/components/project/ProjectPageVersions.vue +++ b/packages/ui/src/components/project/ProjectPageVersions.vue @@ -49,6 +49,7 @@ row-key="id" :row-class="getVersionRowClass" :row-clickable="!!versionLink" + :row-below-visible="isFileRowVisible" table-layout="auto" @row-click="openVersionRow" > @@ -95,15 +96,18 @@ -
-
- - {{ file.filename }} - {{ formatBytes(file.size) }} -
+
+ + + @@ -632,6 +636,10 @@ function getPlatformTooltip(platform: string): string { return getFilterTooltip(formatTag(formatMessage, platform, 'loader')) } +function isFileRowVisible(version: VersionTableRow): boolean { + return props.showFiles && Array.isArray(version.files) && version.files.length > 0 +} + const normalizedVersions = computed(() => props.versions.map((version) => { const loaders = getModpackLoaders(version) @@ -707,9 +715,7 @@ function switchPage(page: number) { } function getVersionRowClass(): string { - return props.versionLink - ? 'group version-row-link cursor-pointer transition-[filter] [&:hover:not(:has([data-no-row-click]:hover))]:brightness-[115%]' - : 'group' + return props.versionLink ? 'group version-row-link cursor-pointer transition-[filter]' : 'group' } function openVersionRow(version: VersionTableRow) { @@ -754,7 +760,15 @@ const messages = defineMessages({ From adf09975e4ce3a38c5e7b0f43d4ac4f67d83da4d Mon Sep 17 00:00:00 2001 From: tdgao Date: Tue, 30 Jun 2026 23:39:20 -0700 Subject: [PATCH 4/4] fix: platform plural --- packages/ui/src/components/project/ProjectPageVersions.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue index 3d0b0057c9..012fea3115 100644 --- a/packages/ui/src/components/project/ProjectPageVersions.vue +++ b/packages/ui/src/components/project/ProjectPageVersions.vue @@ -550,7 +550,7 @@ const versionColumns = computed[]>(() => { }, { key: 'platforms', - label: 'Platforms', + label: 'Platform', cellClass: '!overflow-visible py-3 align-middle pr-2.5 min-w-0 max-w-[12rem]', }, ]