Skip to content

Commit 4725d48

Browse files
danielroedanielroe
committed
Merge remote-tracking branch 'origin/main' into feat-package-code-view-opens-with-dot
2 parents bb43853 + 1f88d31 commit 4725d48

15 files changed

Lines changed: 272 additions & 92 deletions

‎app/components/AppFooter.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,9 @@ onUnmounted(() => {
8383
: // JS-controlled: fixed position, hidden by default, transition only after mount
8484
isScrollable
8585
? [
86-
'fixed bottom-0 left-0 right-0 z-40 translate-y-full',
86+
'fixed bottom-0 left-0 right-0 z-40',
8787
isMounted && 'transition-transform duration-300 ease-out',
88-
isVisible && 'translate-y-0',
88+
isVisible ? 'translate-y-0' : 'translate-y-full',
8989
]
9090
: 'mt-auto',
9191
]"

‎app/components/PackageCard.vue‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,17 @@ const emit = defineEmits<{
3131
@focus="index != null && emit('focus', index)"
3232
@mouseenter="index != null && emit('focus', index)"
3333
>
34-
<header class="flex items-start justify-between gap-4 mb-2">
34+
<header class="flex items-start justify-between gap-2 sm:gap-4 mb-2">
3535
<component
3636
:is="headingLevel ?? 'h3'"
37-
class="font-mono text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all"
37+
class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-words"
3838
>
3939
{{ result.package.name }}
4040
</component>
41-
<div class="flex items-center gap-1.5 shrink-0 max-w-32">
41+
<div class="flex items-center gap-1.5 shrink-0">
4242
<span
4343
v-if="result.package.version"
44-
class="font-mono text-xs text-fg-subtle truncate"
44+
class="font-mono text-xs text-fg-subtle truncate max-w-20 sm:max-w-32"
4545
:title="result.package.version"
4646
>
4747
v{{ result.package.version }}
@@ -56,11 +56,14 @@ const emit = defineEmits<{
5656
</div>
5757
</header>
5858

59-
<p v-if="result.package.description" class="text-fg-muted text-sm line-clamp-2 mb-3">
59+
<p
60+
v-if="result.package.description"
61+
class="text-fg-muted text-xs sm:text-sm line-clamp-2 mb-2 sm:mb-3"
62+
>
6063
<MarkdownText :text="result.package.description" />
6164
</p>
6265

63-
<footer class="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-fg-subtle">
66+
<footer class="flex flex-wrap items-center gap-x-3 sm:gap-x-4 gap-y-2 text-xs text-fg-subtle">
6467
<dl v-if="showPublisher || result.package.date" class="flex items-center gap-4 m-0">
6568
<div
6669
v-if="showPublisher && result.package.publisher?.username"

‎app/components/PackageDependencies.vue‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -91,13 +91,14 @@ const sortedOptionalDependencies = computed(() => {
9191
>
9292
<span class="i-carbon-warning-alt w-3 h-3" />
9393
</span>
94-
<span
94+
<NuxtLink
95+
:to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
9596
class="font-mono text-xs text-right truncate"
9697
:class="getVersionClass(outdatedDeps[dep])"
9798
:title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
9899
>
99100
{{ version }}
100-
</span>
101+
</NuxtLink>
101102
<span v-if="outdatedDeps[dep]" class="sr-only">
102103
({{ getOutdatedTooltip(outdatedDeps[dep]) }})
103104
</span>
@@ -143,12 +144,16 @@ const sortedOptionalDependencies = computed(() => {
143144
optional
144145
</span>
145146
</div>
146-
<span
147+
<NuxtLink
148+
:to="{
149+
name: 'package',
150+
params: { package: [...peer.name.split('/'), 'v', peer.version] },
151+
}"
147152
class="font-mono text-xs text-fg-subtle max-w-[40%] text-right truncate"
148153
:title="peer.version"
149154
>
150155
{{ peer.version }}
151-
</span>
156+
</NuxtLink>
152157
</li>
153158
</ul>
154159
<button
@@ -187,12 +192,13 @@ const sortedOptionalDependencies = computed(() => {
187192
>
188193
{{ dep }}
189194
</NuxtLink>
190-
<span
195+
<NuxtLink
196+
:to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
191197
class="font-mono text-xs text-fg-subtle max-w-[50%] text-right truncate"
192198
:title="version"
193199
>
194200
{{ version }}
195-
</span>
201+
</NuxtLink>
196202
</li>
197203
</ul>
198204
<button

‎app/components/PackageListControls.vue‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -52,40 +52,42 @@ const showFilteredCount = computed(() => {
5252
<!-- Filter input -->
5353
<div class="flex-1 relative">
5454
<label for="package-filter" class="sr-only">Filter packages</label>
55-
<span
56-
class="absolute left-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
55+
<div
56+
class="absolute h-full w-10 flex items-center justify-center text-fg-subtle pointer-events-none"
5757
aria-hidden="true"
5858
>
59-
<span class="i-carbon-search inline-block w-4 h-4" />
60-
</span>
59+
<div class="i-carbon-search inline-block w-4 h-4" />
60+
</div>
6161
<input
6262
id="package-filter"
6363
v-model="filterValue"
6464
type="search"
6565
:placeholder="placeholder ?? 'Filter packages...'"
6666
autocomplete="off"
67-
class="w-full bg-bg-subtle border border-border rounded-lg pl-9 pr-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:(border-border-hover outline-none)"
67+
class="w-full bg-bg-subtle border border-border rounded-lg pl-10 pr-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:(border-border-hover outline-none)"
6868
/>
6969
</div>
7070

7171
<!-- Sort select -->
72-
<div class="relative shrink-0">
72+
<div class="relative shrink-0 flex">
7373
<label for="package-sort" class="sr-only">Sort packages</label>
74-
<select
75-
id="package-sort"
76-
v-model="sortValue"
77-
class="appearance-none bg-bg-subtle border border-border rounded-lg pl-3 pr-8 py-2 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
78-
>
79-
<option v-for="option in sortOptions" :key="option.value" :value="option.value">
80-
{{ option.label }}
81-
</option>
82-
</select>
83-
<span
84-
class="absolute right-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
85-
aria-hidden="true"
86-
>
87-
<span class="i-carbon-chevron-down w-4 h-4" />
88-
</span>
74+
<div class="relative">
75+
<select
76+
id="package-sort"
77+
v-model="sortValue"
78+
class="appearance-none bg-bg-subtle border border-border rounded-lg pl-3 pr-8 py-2 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
79+
>
80+
<option v-for="option in sortOptions" :key="option.value" :value="option.value">
81+
{{ option.label }}
82+
</option>
83+
</select>
84+
<div
85+
class="absolute right-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
86+
aria-hidden="true"
87+
>
88+
<div class="i-carbon-chevron-down w-4 h-4" />
89+
</div>
90+
</div>
8991
</div>
9092
</div>
9193

‎app/components/PackageVersions.vue‎

Lines changed: 74 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ interface VersionDisplay {
2626
time?: string
2727
tags?: string[]
2828
hasProvenance: boolean
29+
deprecated?: string
2930
}
3031
3132
// Check if a version has provenance/attestations
@@ -86,16 +87,32 @@ const allTagRows = computed(() => {
8687
time: props.time[version],
8788
tags,
8889
hasProvenance: hasProvenance(versionData),
90+
deprecated: versionData?.deprecated,
8991
} as VersionDisplay,
9092
}))
9193
.sort((a, b) => compareVersions(b.primaryVersion.version, a.primaryVersion.version))
9294
})
9395
94-
// Visible tag rows (limited to MAX_VISIBLE_TAGS)
95-
const visibleTagRows = computed(() => allTagRows.value.slice(0, MAX_VISIBLE_TAGS))
96+
// Check if the whole package is deprecated (latest version is deprecated)
97+
const isPackageDeprecated = computed(() => {
98+
const latestVersion = props.distTags.latest
99+
if (!latestVersion) return false
100+
return !!props.versions[latestVersion]?.deprecated
101+
})
102+
103+
// Visible tag rows: limited to MAX_VISIBLE_TAGS
104+
// If package is NOT deprecated, filter out deprecated tags from visible list
105+
const visibleTagRows = computed(() => {
106+
const rows = isPackageDeprecated.value
107+
? allTagRows.value
108+
: allTagRows.value.filter(row => !row.primaryVersion.deprecated)
109+
return rows.slice(0, MAX_VISIBLE_TAGS)
110+
})
96111
97-
// Hidden tag rows (overflow beyond MAX_VISIBLE_TAGS) - shown in "Other versions"
98-
const hiddenTagRows = computed(() => allTagRows.value.slice(MAX_VISIBLE_TAGS))
112+
// Hidden tag rows (all other tags) - shown in "Other versions"
113+
const hiddenTagRows = computed(() =>
114+
allTagRows.value.filter(row => !visibleTagRows.value.includes(row)),
115+
)
99116
100117
// Client-side state for expansion and loaded versions
101118
const expandedTags = ref<Set<string>>(new Set())
@@ -166,6 +183,7 @@ function processLoadedVersions(allVersions: PackageVersionInfo[]) {
166183
time: v.time,
167184
tags: versionToTags.value.get(v.version),
168185
hasProvenance: v.hasProvenance,
186+
deprecated: v.deprecated,
169187
}))
170188
171189
tagVersions.value.set(row.tag, channelVersions)
@@ -190,6 +208,7 @@ function processLoadedVersions(allVersions: PackageVersionInfo[]) {
190208
time: v.time,
191209
tags: versionToTags.value.get(v.version),
192210
hasProvenance: v.hasProvenance,
211+
deprecated: v.deprecated,
193212
})
194213
}
195214
@@ -306,8 +325,17 @@ function getTagVersions(tag: string): VersionDisplay[] {
306325
<div class="flex items-center justify-between gap-2">
307326
<NuxtLink
308327
:to="versionRoute(row.primaryVersion.version)"
309-
class="font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 truncate"
310-
:title="row.primaryVersion.version"
328+
class="font-mono text-sm transition-colors duration-200 truncate"
329+
:class="
330+
row.primaryVersion.deprecated
331+
? 'text-red-400 hover:text-red-300'
332+
: 'text-fg-muted hover:text-fg'
333+
"
334+
:title="
335+
row.primaryVersion.deprecated
336+
? `${row.primaryVersion.version} (deprecated)`
337+
: row.primaryVersion.version
338+
"
311339
>
312340
{{ row.primaryVersion.version }}
313341
</NuxtLink>
@@ -350,8 +378,13 @@ function getTagVersions(tag: string): VersionDisplay[] {
350378
<div class="flex items-center justify-between gap-2">
351379
<NuxtLink
352380
:to="versionRoute(v.version)"
353-
class="font-mono text-xs text-fg-subtle hover:text-fg-muted transition-colors duration-200 truncate"
354-
:title="v.version"
381+
class="font-mono text-xs transition-colors duration-200 truncate"
382+
:class="
383+
v.deprecated
384+
? 'text-red-400 hover:text-red-300'
385+
: 'text-fg-subtle hover:text-fg-muted'
386+
"
387+
:title="v.deprecated ? `${v.version} (deprecated)` : v.version"
355388
>
356389
{{ v.version }}
357390
</NuxtLink>
@@ -422,8 +455,17 @@ function getTagVersions(tag: string): VersionDisplay[] {
422455
<div class="flex items-center justify-between gap-2">
423456
<NuxtLink
424457
:to="versionRoute(row.primaryVersion.version)"
425-
class="font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 truncate"
426-
:title="row.primaryVersion.version"
458+
class="font-mono text-xs transition-colors duration-200 truncate"
459+
:class="
460+
row.primaryVersion.deprecated
461+
? 'text-red-400 hover:text-red-300'
462+
: 'text-fg-muted hover:text-fg'
463+
"
464+
:title="
465+
row.primaryVersion.deprecated
466+
? `${row.primaryVersion.version} (deprecated)`
467+
: row.primaryVersion.version
468+
"
427469
>
428470
{{ row.primaryVersion.version }}
429471
</NuxtLink>
@@ -467,7 +509,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
467509
class="w-3 h-3 transition-transform duration-200 text-fg-subtle"
468510
:class="group.expanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
469511
/>
470-
<span class="font-mono text-xs text-fg-muted truncate">
512+
<span
513+
class="font-mono text-xs truncate"
514+
:class="group.versions[0]?.deprecated ? 'text-red-400' : 'text-fg-muted'"
515+
>
471516
{{ group.versions[0]?.version }}
472517
</span>
473518
</div>
@@ -492,8 +537,17 @@ function getTagVersions(tag: string): VersionDisplay[] {
492537
<NuxtLink
493538
v-if="group.versions[0]"
494539
:to="versionRoute(group.versions[0].version)"
495-
class="font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 truncate"
496-
:title="group.versions[0].version"
540+
class="font-mono text-xs transition-colors duration-200 truncate"
541+
:class="
542+
group.versions[0].deprecated
543+
? 'text-red-400 hover:text-red-300'
544+
: 'text-fg-muted hover:text-fg'
545+
"
546+
:title="
547+
group.versions[0].deprecated
548+
? `${group.versions[0].version} (deprecated)`
549+
: group.versions[0].version
550+
"
497551
>
498552
{{ group.versions[0].version }}
499553
</NuxtLink>
@@ -515,8 +569,13 @@ function getTagVersions(tag: string): VersionDisplay[] {
515569
<div class="flex items-center justify-between gap-2">
516570
<NuxtLink
517571
:to="versionRoute(v.version)"
518-
class="font-mono text-xs text-fg-subtle hover:text-fg-muted transition-colors duration-200 truncate"
519-
:title="v.version"
572+
class="font-mono text-xs transition-colors duration-200 truncate"
573+
:class="
574+
v.deprecated
575+
? 'text-red-400 hover:text-red-300'
576+
: 'text-fg-subtle hover:text-fg-muted'
577+
"
578+
:title="v.deprecated ? `${v.version} (deprecated)` : v.version"
520579
>
521580
{{ v.version }}
522581
</NuxtLink>

0 commit comments

Comments
 (0)