Merge branch 'main' into feat/like-comparaison

Sukiiu · web-flow · commit 2e5d51165d15 · 2026-02-04T15:55:04.000+02:00
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
@@ -87,8 +87,17 @@ function openAuthModal() {
         </span>
 
         <!-- Atmosphere avatar (second/front, overlapping) -->
+        <img
+          v-if="atprotoUser?.avatar"
+          :src="atprotoUser.avatar"
+          :alt="atprotoUser.handle"
+          width="24"
+          height="24"
+          class="w-6 h-6 rounded-full ring-2 ring-bg"
+          :class="hasBothConnections ? 'relative z-10' : ''"
+        />
         <span
-          v-if="atprotoUser"
+          v-else-if="atprotoUser"
           class="w-6 h-6 rounded-full bg-bg-muted ring-2 ring-bg flex items-center justify-center"
           :class="hasBothConnections ? 'relative z-10' : ''"
         >
@@ -181,7 +190,18 @@ function openAuthModal() {
               class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start"
               @click="openAuthModal"
             >
-              <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
+              <img
+                v-if="atprotoUser.avatar"
+                :src="atprotoUser.avatar"
+                :alt="atprotoUser.handle"
+                width="32"
+                height="32"
+                class="w-8 h-8 rounded-full"
+              />
+              <span
+                v-else
+                class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center"
+              >
                 <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <div class="flex-1 min-w-0">
diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
@@ -7,11 +7,13 @@ const props = defineProps<{
   version?: string
 }>()
 
-const { data: analysis } = usePackageAnalysis(
+const { data: analysis, status } = usePackageAnalysis(
   () => props.packageName,
   () => props.version,
 )
 
+const isLoading = computed(() => status.value !== 'error' && !analysis.value)
+
 // ESM support
 const hasEsm = computed(() => {
   if (!analysis.value) return false
@@ -52,25 +54,33 @@ const typesHref = computed(() => {
 </script>
 
 <template>
-  <ul v-if="analysis" class="flex items-center gap-1.5 list-none m-0 p-0">
+  <ul class="flex items-center gap-1.5 list-none m-0 p-0">
     <!-- TypeScript types badge -->
-    <li v-if="!props.isBinary">
+    <li v-if="!props.isBinary" class="contents">
       <TooltipApp :text="typesTooltip">
         <component
           :is="typesHref ? NuxtLink : 'span'"
           :to="typesHref"
           :tabindex="!typesHref ? 0 : undefined"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
+          class="flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
           :class="[
-            hasTypes
-              ? 'text-fg-muted bg-bg-muted border border-border'
-              : 'text-fg-subtle bg-bg-subtle border border-border-subtle',
+            isLoading
+              ? 'text-fg-subtle bg-bg-subtle border border-border-subtle'
+              : hasTypes
+                ? 'text-fg-muted bg-bg-muted border border-border'
+                : 'text-fg-subtle bg-bg-subtle border border-border-subtle',
             typesHref
               ? 'hover:text-fg hover:border-border-hover focus-visible:outline-accent/70'
               : '',
           ]"
         >
           <span
+            v-if="isLoading"
+            class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
+            aria-hidden="true"
+          />
+          <span
+            v-else
             class="w-3 h-3"
             :class="hasTypes ? 'i-carbon-checkmark' : 'i-carbon-close'"
             aria-hidden="true"
@@ -81,18 +91,28 @@ const typesHref = computed(() => {
     </li>
 
     <!-- ESM badge (show with X if missing) -->
-    <li>
-      <TooltipApp :text="hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')">
+    <li class="contents">
+      <TooltipApp
+        :text="isLoading ? '' : hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')"
+      >
         <span
           tabindex="0"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
+          class="flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
           :class="
-            hasEsm
-              ? 'text-fg-muted bg-bg-muted border border-border'
-              : 'text-fg-subtle bg-bg-subtle border border-border-subtle'
+            isLoading
+              ? 'text-fg-subtle bg-bg-subtle border border-border-subtle'
+              : hasEsm
+                ? 'text-fg-muted bg-bg-muted border border-border'
+                : 'text-fg-subtle bg-bg-subtle border border-border-subtle'
           "
         >
           <span
+            v-if="isLoading"
+            class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
+            aria-hidden="true"
+          />
+          <span
+            v-else
             class="w-3 h-3"
             :class="hasEsm ? 'i-carbon-checkmark' : 'i-carbon-close'"
             aria-hidden="true"
@@ -102,14 +122,24 @@ const typesHref = computed(() => {
       </TooltipApp>
     </li>
 
-    <!-- CJS badge (only show if present) -->
-    <li v-if="hasCjs">
-      <TooltipApp :text="$t('package.metrics.cjs')">
+    <!-- CJS badge -->
+    <li v-if="isLoading || hasCjs" class="contents">
+      <TooltipApp :text="isLoading ? '' : $t('package.metrics.cjs')">
         <span
           tabindex="0"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
+          class="flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
+          :class="
+            isLoading
+              ? 'text-fg-subtle bg-bg-subtle border border-border-subtle'
+              : 'text-fg-muted bg-bg-muted border border-border'
+          "
         >
-          <span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
+          <span
+            v-if="isLoading"
+            class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
+            aria-hidden="true"
+          />
+          <span v-else class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
           CJS
         </span>
       </TooltipApp>
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
@@ -585,8 +585,8 @@ defineOgImageComponent('Package', {
           </span>
 
           <!-- Package metrics (module format, types) -->
-          <ClientOnly>
-            <div class="flex gap-2 sm:gap-3 flex-wrap">
+          <div class="flex gap-2 sm:gap-3 flex-wrap">
+            <ClientOnly>
               <PackageMetricsBadges
                 v-if="resolvedVersion"
                 :package-name="pkg.name"
@@ -613,16 +613,18 @@ defineOgImageComponent('Package', {
                 />
                 <span>{{ formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 }) }}</span>
               </button>
-            </div>
-
-            <template #fallback>
-              <div class="flex items-center gap-1.5 self-baseline ms-1 sm:ms-2">
-                <SkeletonBlock class="w-8 h-5 rounded" />
-                <SkeletonBlock class="w-12 h-5 rounded" />
-                <SkeletonBlock class="w-5 h-5 rounded" />
-              </div>
-            </template>
-          </ClientOnly>
+              <template #fallback>
+                <div
+                  class="flex items-center gap-1.5 list-none m-0 p-0 relative top-[5px] self-baseline ms-1 sm:ms-2"
+                >
+                  <SkeletonBlock class="w-16 h-5.5 rounded" />
+                  <SkeletonBlock class="w-13 h-5.5 rounded" />
+                  <SkeletonBlock class="w-13 h-5.5 rounded" />
+                  <SkeletonBlock class="w-13 h-5.5 rounded bg-bg-subtle" />
+                </div>
+              </template>
+            </ClientOnly>
+          </div>
 
           <!-- Internal navigation: Docs + Code + Compare (hidden on mobile, shown in external links instead) -->
           <nav
diff --git a/server/api/auth/atproto.get.ts b/server/api/auth/atproto.get.ts
@@ -7,6 +7,15 @@ import { SLINGSHOT_HOST } from '#shared/utils/constants'
 import { useServerSession } from '#server/utils/server-session'
 import type { PublicUserSession } from '#shared/schemas/publicUserSession'
 
+interface ProfileRecord {
+  avatar?: {
+    $type: 'blob'
+    ref: { $link: string }
+    mimeType: string
+    size: number
+  }
+}
+
 export default defineEventHandler(async event => {
   const config = useRuntimeConfig(event)
   if (!config.sessionPassword) {
@@ -58,8 +67,36 @@ export default defineEventHandler(async event => {
   )
   if (response.ok) {
     const miniDoc: PublicUserSession = await response.json()
+
+    // Fetch the user's profile record to get their avatar blob reference
+    let avatar: string | undefined
+    const did = agent.did
+    try {
+      const pdsUrl = new URL(miniDoc.pds)
+      // Only fetch from HTTPS PDS endpoints to prevent SSRF
+      if (did && pdsUrl.protocol === 'https:') {
+        const profileResponse = await fetch(
+          `${pdsUrl.origin}/xrpc/com.atproto.repo.getRecord?repo=${encodeURIComponent(did)}&collection=app.bsky.actor.profile&rkey=self`,
+          { headers: { 'User-Agent': 'npmx' } },
+        )
+        if (profileResponse.ok) {
+          const record = (await profileResponse.json()) as { value: ProfileRecord }
+          const avatarBlob = record.value.avatar
+          if (avatarBlob?.ref?.$link) {
+            // Use Bluesky CDN for faster image loading
+            avatar = `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${avatarBlob.ref.$link}@jpeg`
+          }
+        }
+      }
+    } catch {
+      // Avatar fetch failed, continue without it
+    }
+
     await session.update({
-      public: miniDoc,
+      public: {
+        ...miniDoc,
+        avatar,
+      },
     })
   }
 
diff --git a/shared/schemas/publicUserSession.ts b/shared/schemas/publicUserSession.ts
@@ -1,11 +1,12 @@
-import { object, string, pipe, url } from 'valibot'
+import { object, string, pipe, url, optional } from 'valibot'
 import type { InferOutput } from 'valibot'
 
 export const PublicUserSessionSchema = object({
   // Safe to pass to the frontend
   did: string(),
   handle: string(),
   pds: pipe(string(), url()),
+  avatar: optional(pipe(string(), url())),
 })
 
 export type PublicUserSession = InferOutput<typeof PublicUserSessionSchema>
diff --git a/shared/types/userSession.ts b/shared/types/userSession.ts
@@ -5,6 +5,7 @@ export interface UserServerSession {
     did: string
     handle: string
     pds: string
+    avatar?: string
   }
   // Only to be used in the atproto session and state stores
   // Will need to change to Record<string, T> and add a current logged in user if we ever want to support

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ export interface UserServerSession {`
`5`	`5`	`did: string`
`6`	`6`	`handle: string`
`7`	`7`	`pds: string`
	`8`	`+ avatar?: string`
`8`	`9`	`}`
`9`	`10`	`// Only to be used in the atproto session and state stores`
`10`	`11`	`// Will need to change to Record<string, T> and add a current logged in user if we ever want to support`