feat: show bluesky avatar in header

Author: danielroe

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">

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,33 @@ 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
+    // We use com.atproto.repo.getRecord to fetch directly from the user's PDS
+    // This works with any PDS, not just Bluesky
+    let avatar: string | undefined
+    try {
+      const profileResponse = await fetch(
+        `${miniDoc.pds}/xrpc/com.atproto.repo.getRecord?repo=${encodeURIComponent(agent.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) {
+          // Construct the blob URL from the user's PDS
+          avatar = `${miniDoc.pds}/xrpc/com.atproto.sync.getBlob?did=${encodeURIComponent(agent.did!)}&cid=${encodeURIComponent(avatarBlob.ref.$link)}`
+        }
+      }
+    } catch {
+      // Avatar fetch failed, continue without it
+    }
+
     await session.update({
-      public: miniDoc,
+      public: {
+        ...miniDoc,
+        avatar,
+      },
     })
   }
 

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>

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