add profile pictures

packages/appview/src/routes.ts

···
 import { TID } from '@atproto/common'
 import { OAuthResolverError } from '@atproto/oauth-client-node'
 import { isValidHandle } from '@atproto/syntax'
-import { AppBskyActorProfile, XyzStatusphereStatus } from '@statusphere/lexicon'
+import {
+  AppBskyActorDefs,
+  AppBskyActorProfile,
+  XyzStatusphereStatus,
+} from '@statusphere/lexicon'
 import express from 'express'
 import { getIronSession, SessionOptions } from 'iron-session'
 
···
           .catch(() => undefined)
 
         const profileRecord = profileResponse?.data
-        const profile =
+        let profile: AppBskyActorProfile.Record =
+          {} as AppBskyActorProfile.Record
+
+        if (
           profileRecord &&
-          AppBskyActorProfile.isRecord(profileRecord.value) &&
-          AppBskyActorProfile.validateRecord(profileRecord.value).success
-            ? profileRecord.value
-            : ({} as AppBskyActorProfile.Record)
+          AppBskyActorProfile.isRecord(profileRecord.value)
+        ) {
+          const validated = AppBskyActorProfile.validateRecord(
+            profileRecord.value,
+          )
+          if (validated.success) {
+            profile = profileRecord.value
+          } else {
+            ctx.logger.error(
+              { err: validated.error },
+              'Failed to validate user profile',
+            )
+          }
+        }
 
-        profile.did = did
-        profile.handle = await ctx.resolver.resolveDidToHandle(did)
+        const profileView: AppBskyActorDefs.ProfileView = {
+          $type: 'app.bsky.actor.defs#profileView',
+          did: did,
+          handle: await ctx.resolver.resolveDidToHandle(did),
+          avatar: profile.avatar
+            ? `https://atproto.pictures/img/${did}/${profile.avatar.ref}`
+            : undefined,
+          displayName: profile.displayName,
+          createdAt: profile.createdAt,
+        }
 
         // Fetch user status
         const status = await ctx.db
···
 
         res.json({
           did: agent.assertDid,
-          profile,
+          profile: profileView,
           status: status ? await statusToStatusView(status, ctx) : undefined,
         })
       } catch (err) {

packages/client/src/components/Header.tsx

···
         <nav>
           {user ? (
             <div className="flex gap-4 items-center">
+              {user.profile.avatar ? (
+                <img
+                  src={user.profile.avatar}
+                  alt={user.profile.displayName || user.profile.handle}
+                  className="w-8 h-8 rounded-full"
+                />
+              ) : (
+                <div className="w-8 h-8 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
+              )}
               <span className="text-gray-700 dark:text-gray-300">
-                {user.profile?.displayName ||
-                  user.profile?.handle ||
-                  user.did.substring(0, 15)}
+                {user.profile.displayName || user.profile.handle}
               </span>
               <button
                 onClick={handleLogout}