feat: merge package mobile top action into bottom bar

Author: RYGRIT

app/components/ScrollToTop.client.vue

@@ -3,31 +3,26 @@ const route = useRoute()
 
 // Pages where scroll-to-top should NOT be shown
 const excludedRoutes = new Set(['index', 'code'])
+const isPackagePage = computed(() => route.path.includes('/package/'))
 
-const isActive = computed(() => !excludedRoutes.has(route.name as string))
+const isActive = computed(() => !excludedRoutes.has(route.name as string) && !isPackagePage.value)
 
 const SCROLL_TO_TOP_DURATION = 500
 
 const isMounted = useMounted()
-const isTouchDeviceClient = shallowRef(false)
-const scrollThreshold = 300
+const { scrollToTop, isTouchDeviceClient } = useScrollToTop({ duration: SCROLL_TO_TOP_DURATION })
+
 const { y: scrollTop } = useScroll(window)
 const isVisible = computed(() => {
   if (supportsScrollStateQueries.value) return false
-  return scrollTop.value > scrollThreshold
+  return scrollTop.value > SCROLL_TO_TOP_THRESHOLD
 })
 const { isSupported: supportsScrollStateQueries } = useCssSupports(
   'container-type',
   'scroll-state',
   { ssrValue: false },
 )
 const shouldShowButton = computed(() => isActive.value && isTouchDeviceClient.value)
-
-const { scrollToTop } = useScrollToTop({ duration: SCROLL_TO_TOP_DURATION })
-
-onMounted(() => {
-  isTouchDeviceClient.value = isTouchDevice()
-})
 </script>
 
 <template>

app/composables/useScrollToTop.ts

@@ -8,6 +8,8 @@ interface UseScrollToTopOptions {
 // Easing function for the scroll animation
 const easeOutQuad = (t: number) => t * (2 - t)
 
+export const SCROLL_TO_TOP_THRESHOLD = 300
+
 /**
  * Scroll to the top of the page with a smooth animation.
  * @param options - Configuration options for the scroll animation.
@@ -86,8 +88,14 @@ export function useScrollToTop(options: UseScrollToTopOptions) {
 
   tryOnScopeDispose(cancel)
 
+  const isTouchDeviceClient = shallowRef(false)
+  onMounted(() => {
+    isTouchDeviceClient.value = isTouchDevice()
+  })
+
   return {
     scrollToTop,
     cancel,
+    isTouchDeviceClient,
   }
 }

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

@@ -250,6 +250,13 @@ const { copied: copiedVersion, copy: copyVersion } = useClipboard({
   copiedDuring: 2000,
 })
 
+const { scrollToTop, isTouchDeviceClient } = useScrollToTop({ duration: 500 })
+
+const { y: scrollY } = useScroll(window)
+const showScrollToTop = computed(
+  () => isTouchDeviceClient.value && scrollY.value > SCROLL_TO_TOP_THRESHOLD,
+)
+
 // Fetch dependency analysis (lazy, client-side)
 // This is the same composable used by PackageVulnerabilityTree and PackageDeprecatedTree
 const { data: vulnTree, status: vulnTreeStatus } = useDependencyAnalysis(
@@ -785,26 +792,37 @@ const showSkeleton = shallowRef(false)
               :to="docsLink"
               aria-keyshortcuts="d"
               classicon="i-lucide:file-text"
+              :title="$t('package.links.docs')"
             >
-              {{ $t('package.links.docs') }}
+              <span class="max-sm:sr-only">{{ $t('package.links.docs') }}</span>
             </LinkBase>
             <LinkBase
               v-if="codeLink"
               variant="button-secondary"
               :to="codeLink"
               aria-keyshortcuts="."
               classicon="i-lucide:code"
+              :title="$t('package.links.code')"
             >
-              {{ $t('package.links.code') }}
+              <span class="max-sm:sr-only">{{ $t('package.links.code') }}</span>
             </LinkBase>
             <LinkBase
               variant="button-secondary"
               :to="{ name: 'compare', query: { packages: pkg.name } }"
               aria-keyshortcuts="c"
               classicon="i-lucide:git-compare"
+              :title="$t('package.links.compare')"
             >
-              {{ $t('package.links.compare') }}
+              <span class="max-sm:sr-only">{{ $t('package.links.compare') }}</span>
             </LinkBase>
+            <ButtonBase
+              v-if="showScrollToTop"
+              variant="secondary"
+              :title="$t('common.scroll_to_top')"
+              :aria-label="$t('common.scroll_to_top')"
+              @click="() => scrollToTop()"
+              classicon="i-lucide:arrow-up"
+            />
           </ButtonGroup>
 
           <!-- Package metrics -->