feat: use version-selector in package-header

Author: alexdln

app/components/Package/Header.vue

@@ -1,21 +1,22 @@
 <script setup lang="ts">
-import type { PackumentVersion, ProvenanceDetails, SlimVersion } from '#shared/types'
+import type { PackumentVersion, ProvenanceDetails, SlimVersion, SlimPackument } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
 import { SCROLL_TO_TOP_THRESHOLD } from '~/composables/useScrollToTop'
 import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
 
 const props = defineProps<{
-  pkg: { name: string } | null
+  pkg: SlimPackument | null
   resolvedVersion?: string | null
   displayVersion: PackumentVersion | null
   latestVersion: SlimVersion | null
   provenanceData: ProvenanceDetails | null
   provenanceStatus: string
   docsLink: RouteLocationRaw | null
   codeLink: RouteLocationRaw | null
-  page: 'docs' | 'code' | 'diff'
+  page: 'readme' | 'docs' | 'code' | 'diff'
+  versionUrlPattern: string
 }>()
 
 const { requestedVersion, orgName } = usePackageRoute()
@@ -74,11 +75,6 @@ const { copied: copiedPkgName, copy: copyPkgName } = useClipboard({
   copiedDuring: 2000,
 })
 
-const { copied: copiedVersion, copy: copyVersion } = useClipboard({
-  source: () => props.resolvedVersion ?? '',
-  copiedDuring: 2000,
-})
-
 function hasProvenance(version: PackumentVersion | null): boolean {
   if (!version?.dist) return false
   return !!(version.dist as { attestations?: unknown }).attestations
@@ -238,7 +234,7 @@ const likeAction = async () => {
         class="py-1.5 px-2.5 sm:me-2"
         :tabindex="showScrollToTop ? 0 : -1"
       />
-      <div class="break-all font-mono text-fg-muted">
+      <div class="flex-inline items-center flex-nowrap gap-1 font-mono text-fg-muted">
         <template v-if="hasProvenance(displayVersion)">
           <TooltipApp
             :text="
@@ -271,28 +267,15 @@ const likeAction = async () => {
             <span class="i-lucide:cable rtl-flip min-w-3 w-3 h-3 mx-1" aria-hidden="true" />
           </TooltipApp>
         </template>
-        <CopyToClipboardButton
-          v-if="resolvedVersion"
-          :copied="copiedVersion"
-          :copy-text="$t('package.copy_version')"
-          @click="copyVersion()"
-          class="inline"
-        >
-          <LinkBase
-            v-if="requestedVersion && resolvedVersion !== requestedVersion"
-            :to="packageRoute(packageName, resolvedVersion)"
-            :title="$t('package.view_permalink')"
-            dir="ltr"
-            class="inline!"
-            >{{ resolvedVersion }}</LinkBase
-          >
-          <span dir="ltr" v-else>v{{ resolvedVersion }}</span>
-        </CopyToClipboardButton>
-        <span
-          v-if="requestedVersion && latestVersion && resolvedVersion !== latestVersion.version"
-          class="text-fg-subtle text-sm text-nowrap ms-1"
-          >{{ $t('package.not_latest') }}</span
-        >
+        <!-- Version selector -->
+        <VersionSelector
+          v-if="resolvedVersion && pkg?.versions && pkg?.['dist-tags']"
+          :package-name="packageName"
+          :current-version="resolvedVersion"
+          :versions="pkg.versions"
+          :dist-tags="pkg['dist-tags']"
+          :url-pattern="versionUrlPattern"
+        />
       </div>
     </div>
     <!-- Docs + Code — inline on desktop, floating bottom bar on mobile -->
@@ -303,6 +286,15 @@ const likeAction = async () => {
       :style="navExtraOffsetStyle"
       :class="$style.packageNav"
     >
+      <LinkBase
+        v-if="docsLink"
+        :to="docsLink"
+        aria-keyshortcuts="r"
+        class="decoration-none border-b-2 p-1 hover:border-accent/50 lowercase"
+        :class="page === 'readme' ? 'border-accent text-accent!' : 'border-transparent'"
+      >
+        {{ $t('package.readme.title') }}
+      </LinkBase>
       <LinkBase
         v-if="docsLink"
         :to="docsLink"
@@ -325,6 +317,7 @@ const likeAction = async () => {
         v-if="displayVersion && latestVersion && displayVersion.version !== latestVersion.version"
         :to="diffRoute(packageName, displayVersion.version, latestVersion.version)"
         :title="$t('compare.compare_versions_title')"
+        aria-keyshortcuts="f"
         class="decoration-none border-b-2 p-1 hover:border-accent/50"
         :class="page === 'diff' ? 'border-accent text-accent!' : 'border-transparent'"
       >

app/components/VersionSelector.vue

@@ -472,19 +472,19 @@ watch(
       type="button"
       aria-haspopup="listbox"
       :aria-expanded="isOpen"
-      class="flex items-center gap-1.5 text-fg-subtle font-mono text-sm hover:text-fg transition-[color] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg rounded"
+      class="break-all text-start text-fg-subtle font-mono text-sm hover:text-fg transition-[color] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg rounded"
       @click="isOpen = !isOpen"
       @keydown="handleButtonKeydown"
     >
       <span dir="ltr">{{ currentVersion }}</span>
       <span
         v-if="currentVersion === latestVersion"
-        class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium"
+        class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium mx-1.5"
       >
         latest
       </span>
       <span
-        class="i-lucide:chevron-down w-3.5 h-3.5 transition-[transform] duration-200 motion-reduce:transition-none"
+        class="i-lucide:chevron-down w-3.5 h-3.5 transition-[transform] duration-200 motion-reduce:transition-none vertical-middle"
         :class="{ 'rotate-180': isOpen }"
         aria-hidden="true"
       />

app/pages/package/[[org]]/[name].vue

@@ -600,6 +600,11 @@ onKeyStroke(
   },
 )
 
+// URL pattern for version selector - includes file path if present
+const versionUrlPattern = computed(
+  () => `/package/${pkg.value?.name || packageName.value}/v/{version}`,
+)
+
 const showSkeleton = shallowRef(false)
 </script>
 
@@ -650,7 +655,8 @@ const showSkeleton = shallowRef(false)
         :docs-link="docsLink"
         :code-link="codeLink"
         :class="$style.areaHeader"
-        page="docs"
+        :version-url-pattern="versionUrlPattern"
+        page="readme"
       />
       <article id="package-article" :class="$style.packagePage">
         <!-- Package details -->