wip: avatars

src/api/profile.ts

···
+"use server";
+
+import { cache } from "@solidjs/router";
+
+export interface BlueskyProfile {
+  avatar?: string;
+  displayName?: string;
+  description?: string;
+  handle: string;
+}
+
+/**
+ * Fetch a user's profile from Bluesky's public API
+ * No authentication required - uses the public API endpoint
+ */
+export const getProfileByHandle = cache(async (handle: string): Promise<BlueskyProfile | null> => {
+  try {
+    const response = await fetch(
+      `https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(handle)}`
+    );
+
+    if (!response.ok) {
+      console.warn(`Failed to fetch profile for ${handle}: ${response.status}`);
+      return null;
+    }
+
+    const data = await response.json();
+
+    return {
+      avatar: data.avatar,
+      displayName: data.displayName,
+      description: data.description,
+      handle: data.handle,
+    };
+  } catch (error) {
+    console.error(`Error fetching profile for ${handle}:`, error);
+    return null;
+  }
+}, "profile")
+
+/**
+ * Fetch multiple profiles in parallel
+ */
+export async function getProfilesByHandles(handles: string[]): Promise<Map<string, BlueskyProfile>> {
+  const uniqueHandles = [...new Set(handles)];
+  const profiles = await Promise.all(
+    uniqueHandles.map(async (handle) => {
+      const profile = await getProfileByHandle(handle);
+      return [handle, profile] as const;
+    })
+  );
+
+  const map = new Map<string, BlueskyProfile>();
+  for (const [handle, profile] of profiles) {
+    if (profile) {
+      map.set(handle, profile);
+    }
+  }
+  return map;
+}

src/app.tsx

···
 // @refresh reload
 import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
-import { Suspense } from "solid-js";
+import { Suspense, createResource, Show } from "solid-js";
 import "./app.css";
+import { getUser } from "~/api";
+import { getProfileByHandle } from "~/api/profile";
+import { Avatar } from "~/components/Avatar";
+import { logout } from "~/api";
+
+function Header() {
+  const [user] = createResource(() => getUser());
+  const [profile] = createResource(
+    () => user()?.handle,
+    (handle) => getProfileByHandle(handle)
+  );
+
+  return (
+    <header class="border-b bg-white">
+      <div class="max-w-2xl mx-auto px-4 py-3 flex items-center justify-between">
+        <a href="/" class="text-xl font-bold text-gray-900 hover:text-gray-700">
+          Askimut
+        </a>
+
+        <Show
+          when={user()}
+          fallback={
+            <a
+              href="/login"
+              class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm font-medium"
+            >
+              Login
+            </a>
+          }
+        >
+          <div class="flex items-center gap-3">
+            <a
+              href={`/${user()?.handle}/answers`}
+              class="flex items-center gap-2 hover:opacity-80"
+            >
+              <Avatar
+                src={profile()?.avatar}
+                handle={user()?.handle || ""}
+                size="md"
+              />
+              <span class="text-sm text-gray-600">@{user()?.handle}</span>
+            </a>
+            <form action={logout} method="post">
+              <button
+                type="submit"
+                class="px-3 py-1 text-sm text-gray-500 hover:text-gray-700"
+              >
+                Logout
+              </button>
+            </form>
+          </div>
+        </Show>
+      </div>
+    </header>
+  );
+}
 
 export default function App() {
   return (
     <Router
-      root={props => (
-        <>
-          <a href="/">Index</a>
-          <a href="/about">About</a>
+      root={(props) => (
+        <div class="min-h-screen bg-gray-50">
+          <Header />
           <Suspense>{props.children}</Suspense>
-        </>
+        </div>
       )}
     >
       <FileRoutes />

src/components/Avatar.tsx

···
+import { Show } from "solid-js";
+
+export type AvatarProps = {
+  src?: string;
+  handle: string;
+  size?: "sm" | "md" | "lg";
+  class?: string;
+};
+
+const sizeClasses = {
+  sm: "w-6 h-6 text-xs",
+  md: "w-8 h-8 text-sm",
+  lg: "w-12 h-12 text-base",
+};
+
+function getInitials(handle: string): string {
+  // Remove @ prefix if present and get first two chars
+  const clean = handle.replace(/^@/, "");
+  return clean.slice(0, 2).toUpperCase();
+}
+
+export function Avatar(props: AvatarProps) {
+  const size = () => props.size || "md";
+
+  return (
+    <Show
+      when={props.src}
+      fallback={
+        <div
+          class={`${sizeClasses[size()]} rounded-full bg-gray-200 flex items-center justify-center font-medium text-gray-600 ${props.class || ""}`}
+        >
+          {getInitials(props.handle)}
+        </div>
+      }
+    >
+      <img
+        src={props.src}
+        alt={`@${props.handle}'s avatar`}
+        class={`${sizeClasses[size()]} rounded-full object-cover ${props.class || ""}`}
+      />
+    </Show>
+  );
+}

src/components/QuestionCard.tsx

···
+import { Avatar } from "./Avatar";
+
 export type QuestionCardProps = {
   questionContent: string;
   askerHandle: string;
+  askerAvatar?: string;
   answerContent: string;
   responderHandle: string;
+  responderAvatar?: string;
   answeredAt: number;
 };
 
···
     <div class="border rounded-lg p-4 space-y-3 bg-white">
       <div class="space-y-2">
         <div class="flex items-center gap-2 text-sm text-gray-500">
+          <Avatar src={props.askerAvatar} handle={props.askerHandle} size="sm" />
           <span class="font-medium text-gray-700">@{props.askerHandle}</span>
           <span>asked</span>
           <a href={`/${props.responderHandle}/answers`} class="font-medium text-blue-600 hover:underline">
             @{props.responderHandle}
           </a>
         </div>
-        <p class="text-gray-800">{props.questionContent}</p>
+        <p class="text-gray-800 pl-8">{props.questionContent}</p>
       </div>
 
       <div class="border-t pt-3 space-y-2">
         <div class="flex items-center gap-2 text-sm text-gray-500">
+          <Avatar src={props.responderAvatar} handle={props.responderHandle} size="sm" />
           <a href={`/${props.responderHandle}/answers`} class="font-medium text-blue-600 hover:underline">
             @{props.responderHandle}
           </a>
           <span>answered</span>
           <span class="text-gray-400">{formatDate(props.answeredAt)}</span>
         </div>
-        <p class="text-gray-800">{props.answerContent}</p>
+        <p class="text-gray-800 pl-8">{props.answerContent}</p>
       </div>
     </div>
   );

src/routes/[userhandle]/answers.tsx

···
 import { createAsync, type RouteDefinition, useParams } from "@solidjs/router";
-import { For, Show } from "solid-js";
+import { For, Show, createResource } from "solid-js";
 import { getAnsweredQuestionsForUser } from "~/db/utils";
+import { getProfilesByHandles } from "~/api/profile";
 import { QuestionCard } from "~/components/QuestionCard";
 
 export const route = {
···
   const params = useParams();
   const answeredQuestions = createAsync(() => getAnsweredQuestionsForUser(params.userhandle));
 
+  // Fetch profiles for all unique handles in the questions
+  const [profiles] = createResource(
+    () => answeredQuestions(),
+    async (questions) => {
+      if (!questions || questions.length === 0) return new Map();
+      const handles = questions.flatMap((q) => [q.askerHandle, q.responderHandle]);
+      return getProfilesByHandles(handles);
+    }
+  );
+
   return (
     <main class="w-full max-w-2xl mx-auto p-4 space-y-6">
       <div class="flex items-center justify-between">
         <div>
-          <a href="/" class="text-blue-500 hover:underline text-sm">← Home</a>
           <h1 class="text-2xl font-bold mt-1">@{params.userhandle}'s Answers</h1>
         </div>
         <a
···
                 <QuestionCard
                   questionContent={q.questionContent}
                   askerHandle={q.askerHandle}
+                  askerAvatar={profiles()?.get(q.askerHandle)?.avatar}
                   answerContent={q.answerContent}
                   responderHandle={q.responderHandle}
+                  responderAvatar={profiles()?.get(q.responderHandle)?.avatar}
                   answeredAt={q.answeredAt}
                 />
               )}

src/routes/index.tsx

···
 import { query, createAsync, revalidate, type RouteDefinition } from "@solidjs/router";
-import { For, Show, onMount, onCleanup } from "solid-js";
-import { getUser, logout } from "~/api";
+import { For, Show, onMount, onCleanup, createResource } from "solid-js";
+import { getUser } from "~/api";
 import { getLatestAnsweredQuestions } from "~/db/utils";
+import { getProfilesByHandles } from "~/api/profile";
 import { QuestionCard } from "~/components/QuestionCard";
 
 const getAnsweredQuestionsQuery = query(
···
 } satisfies RouteDefinition;
 
 export default function Home() {
-  const user = createAsync(() => getUser(), { deferStream: true });
   const answeredQuestions = createAsync(() => getAnsweredQuestionsQuery());
 
+  // Fetch profiles for all unique handles in the questions
+  const [profiles] = createResource(
+    () => answeredQuestions(),
+    async (questions) => {
+      if (!questions || questions.length === 0) return new Map();
+      const handles = questions.flatMap((q) => [q.askerHandle, q.responderHandle]);
+      return getProfilesByHandles(handles);
+    }
+  );
+
   // Live updates: poll every 5 seconds
   onMount(() => {
     const interval = setInterval(() => {
···
 
   return (
     <main class="w-full max-w-2xl mx-auto p-4 space-y-6">
-      <div class="flex items-center justify-between">
-        <h1 class="text-2xl font-bold">Askimut</h1>
-        <Show
-          when={user()}
-          fallback={
-            <a href="/login" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
-              Login
-            </a>
-          }
-        >
-          <div class="flex items-center gap-4">
-            <span class="text-gray-600">@{user()?.handle}</span>
-            <form action={logout} method="post">
-              <button type="submit" class="px-3 py-1 text-sm text-gray-600 hover:text-gray-800">
-                Logout
-              </button>
-            </form>
-          </div>
-        </Show>
-      </div>
-
       <div class="space-y-4">
         <h2 class="text-lg font-semibold text-gray-700">Latest Answered Questions</h2>
 
···
                 <QuestionCard
                   questionContent={q.questionContent}
                   askerHandle={q.askerHandle}
+                  askerAvatar={profiles()?.get(q.askerHandle)?.avatar}
                   answerContent={q.answerContent}
                   responderHandle={q.responderHandle}
+                  responderAvatar={profiles()?.get(q.responderHandle)?.avatar}
                   answeredAt={q.answeredAt}
                 />
               )}