feat(ui): move fund to the package header (#2170)

Author: MatteoGabriele

app/components/Package/ExternalLinks.vue

@@ -23,15 +23,6 @@ const homepageUrl = computed(() => {
   return homepage
 })
 
-const fundingUrl = computed(() => {
-  let funding = displayVersion.value?.funding
-  if (Array.isArray(funding)) funding = funding[0]
-
-  if (!funding) return null
-
-  return typeof funding === 'string' ? funding : funding.url
-})
-
 const PROVIDER_ICONS: Record<string, IconClass> = {
   github: 'i-simple-icons:github',
   gitlab: 'i-simple-icons:gitlab',
@@ -97,10 +88,5 @@ const repoProviderIcon = computed((): IconClass => {
         {{ $t('package.links.jsr') }}
       </LinkBase>
     </li>
-    <li v-if="fundingUrl">
-      <LinkBase :to="fundingUrl" classicon="i-lucide:heart">
-        {{ $t('package.links.fund') }}
-      </LinkBase>
-    </li>
   </ul>
 </template>

app/components/Package/Header.vue

@@ -241,6 +241,15 @@ const likeAction = async () => {
     isLikeActionPending.value = false
   }
 }
+
+const fundingUrl = computed(() => {
+  let funding = props.displayVersion?.funding
+  if (Array.isArray(funding)) funding = funding[0]
+
+  if (!funding) return null
+
+  return typeof funding === 'string' ? funding : funding.url
+})
 </script>
 
 <template>
@@ -312,6 +321,15 @@ const likeAction = async () => {
             </span>
           </ButtonBase>
         </TooltipApp>
+
+        <LinkBase
+          variant="button-secondary"
+          v-if="fundingUrl"
+          :to="fundingUrl"
+          classicon="i-lucide:handshake text-accent"
+        >
+          <span class="max-sm:sr-only">{{ $t('package.links.fund') }}</span>
+        </LinkBase>
       </div>
     </div>
   </header>

app/components/Package/Skeleton.vue

@@ -13,6 +13,8 @@
         <SkeletonBlock class="w-9 md:w-36 h-9 rounded" />
         <!-- Likes button placeholder -->
         <SkeletonBlock class="w-14 h-9 rounded" />
+        <!-- Fund link placeholder -->
+        <SkeletonBlock class="w-22 h-9 rounded self-baseline" />
       </div>
     </div>
   </header>