Skip to content

feat: hide stale tags and deprecated versions by default #2629

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ShroXd wants to merge 10 commits into
base: main
Choose a base branch
from
Open

feat: hide stale tags and deprecated versions by default #2629

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
da26851
feat: add toggle buttons to control prerelease & deprecated versions
ShroXd Apr 26, 2026
79f4834
perf: avoid unnecessary process
ShroXd Apr 26, 2026
70a16e8
feat: optimize the filter popover
ShroXd Apr 26, 2026
048f497
refactor: use pre-defined tailwind token
ShroXd Apr 26, 2026
db58690
test: fix expection & add unit tests for filter and toggle
ShroXd Apr 26, 2026
d4203d3
feat: add sort tags for the group
ShroXd Apr 26, 2026
2ebd3ff
test: fix the type error in the unit test
ShroXd Apr 26, 2026
22190b0
test: check the deprecated on the version in unit test
ShroXd Apr 26, 2026
6d94668
feat: hide pre-released versions in the package page versions section
ShroXd Apr 27, 2026
4f2186c
feat: add aria-expanded to toggle
ShroXd Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 107 additions & 1 deletion app/components/Package/Versions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,22 @@ const expandedTags = ref<Set<string>>(new Set())
const tagVersions = ref<Map<string, VersionDisplay[]>>(new Map())
const loadingTags = ref<Set<string>>(new Set())

const showHiddenPrereleaseTags = ref(false)

const stableVisibleTagRows = computed(() =>
visibleTagRows.value.filter(row => !isPrereleaseVersion(row.primaryVersion.version)),
)

const hiddenPrereleaseTagRows = computed(() =>
visibleTagRows.value.filter(row => isPrereleaseVersion(row.primaryVersion.version)),
)

const hiddenPrereleaseTagCount = computed(() => hiddenPrereleaseTagRows.value.length)
Comment on lines +252 to +256
Copy link
Copy Markdown
Member

@serhalp serhalp May 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

naming nit: "hidden" is in these names but they may or may not be hidden (depending on showHiddenPrereleaseTags). maybe drop that prefix?


const displayedTagRows = computed(() =>
hiddenPrereleaseTagCount.value === 0 ? visibleTagRows.value : stableVisibleTagRows.value,
)

const otherVersionsExpanded = shallowRef(false)
const expandedMajorGroups = ref<Set<string>>(new Set())
const otherMajorGroups = shallowRef<
Expand Down Expand Up @@ -611,7 +627,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
</div>

<!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
<div v-for="row in visibleTagRows" :key="row.id">
<div v-for="row in displayedTagRows" :key="row.id">
<div
class="flex items-center gap-2 pe-2 px-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
:class="rowContainsCurrentVersion(row) ? 'bg-bg-subtle' : ''"
Expand Down Expand Up @@ -779,6 +795,96 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
</div>
</div>

<!-- Hidden pre-release tags expand -->
<div v-if="hiddenPrereleaseTagCount > 0" class="p-1">
<button
type="button"
class="group/version-row flex items-center gap-2 text-start rounded-sm w-full"
:aria-expanded="showHiddenPrereleaseTags"
@click="showHiddenPrereleaseTags = !showHiddenPrereleaseTags"
>
<span
class="size-5 -me-1 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors"
>
<span
class="w-3 h-3 transition-transform duration-200 rtl-flip"
:class="showHiddenPrereleaseTags ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'"
aria-hidden="true"
/>
</span>
<span
class="text-xs text-fg-muted py-1.5 group-hover/version-row:text-fg transition-colors"
>
{{ $t('package.versions.tags_hidden', hiddenPrereleaseTagCount) }}
</span>
</button>

<div v-if="showHiddenPrereleaseTags" class="ms-4 ps-2 border-is border-border space-y-0.5">
<div
v-for="row in hiddenPrereleaseTagRows"
:key="row.id"
class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
:class="rowContainsCurrentVersion(row) ? 'bg-bg-subtle' : ''"
>
<div class="flex items-center justify-between gap-2">
<LinkBase
:to="versionRoute(row.primaryVersion.version)"
block
class="text-xs after:absolute after:inset-0 after:content-['']"
:class="
row.primaryVersion.deprecated
? 'text-red-800 group-hover/version-row:text-red-700 dark:text-red-400 dark:group-hover/version-row:text-red-300'
: undefined
"
:title="
row.primaryVersion.deprecated
? $t('package.versions.deprecated_title', {
version: row.primaryVersion.version,
})
: row.primaryVersion.version
"
:classicon="row.primaryVersion.deprecated ? 'i-lucide:octagon-alert' : undefined"
>
<span dir="ltr" class="block truncate">
{{ row.primaryVersion.version }}
</span>
</LinkBase>
<div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
<DateTime
v-if="row.primaryVersion.time"
:datetime="row.primaryVersion.time"
class="text-3xs text-fg-subtle"
year="numeric"
month="short"
day="numeric"
/>
<ProvenanceBadge
v-if="row.primaryVersion.hasProvenance"
:package-name="packageName"
:version="row.primaryVersion.version"
compact
:linked="false"
/>
</div>
</div>
<div
v-if="row.tags.length"
class="flex items-center gap-1 mt-0.5 flex-wrap relative z-10"
>
<span
v-for="tag in row.tags"
:key="tag"
class="text-5xs font-semibold uppercase tracking-wide truncate max-w-[120px]"
:class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
:title="tag"
>
{{ tag }}
</span>
</div>
</div>
</div>
</div>

<!-- Other versions section -->
<div class="p-1">
<button
Expand Down
Loading
Loading