refactor: usefetch + apply to orgs page too

Author: danielroe

app/components/User/Avatar.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const props = defineProps<{
+  username: string
+}>()
+
+const { data: gravatarUrl } = useLazyFetch('/api/gravatar', {
+  query: {
+    username: computed(() => props.username),
+    size: 128,
+  },
+  transform: res => res.url,
+})
+</script>
+
+<template>
+  <!-- Avatar -->
+  <div
+    class="size-16 shrink-0 rounded-full bg-bg-muted border border-border flex items-center justify-center overflow-hidden"
+    role="img"
+    :aria-label="`Avatar for ${username}`"
+  >
+    <!-- If Gravatar was fetched, display it -->
+    <img
+      v-if="gravatarUrl"
+      :src="gravatarUrl"
+      alt=""
+      width="64"
+      height="64"
+      class="w-full h-full object-cover"
+    />
+    <!-- Else fallback to initials -->
+    <span v-else class="text-2xl text-fg-subtle font-mono" aria-hidden="true">
+      {{ username.charAt(0).toUpperCase() }}
+    </span>
+  </div>
+</template>

app/pages/~[username]/index.vue

@@ -6,26 +6,6 @@ const router = useRouter()
 
 const username = computed(() => route.params.username)
 
-async function fetchGravatarUrl(handle: string): Promise<string | null> {
-  if (!handle) return null
-
-  try {
-    const response = await $fetch<{ url: string | null }>(
-      `/api/gravatar?username=${encodeURIComponent(handle)}&size=64`,
-    )
-    return response.url ?? null
-  } catch {
-    // Gravatar couldn't be fetched, it is ignored as not considered an error
-    return null
-  }
-}
-
-const { data: gravatarUrl } = useLazyAsyncData(
-  () => `gravatar:${username.value}`,
-  () => fetchGravatarUrl(username.value),
-  { watch: [username] },
-)
-
 // Infinite scroll state
 const pageSize = 50
 const maxResults = 250 // npm API hard limit
@@ -199,26 +179,7 @@ defineOgImageComponent('Default', {
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
       <div class="flex flex-wrap items-center gap-4">
-        <!-- Avatar -->
-        <div
-          class="w-16 h-16 rounded-full bg-bg-muted border border-border flex items-center justify-center overflow-hidden"
-          role="img"
-          :aria-label="`Avatar for ${username}`"
-        >
-          <!-- If Gravatar was fetched, display it -->
-          <img
-            v-if="gravatarUrl"
-            :src="gravatarUrl"
-            alt=""
-            width="64"
-            height="64"
-            class="w-full h-full object-cover"
-          />
-          <!-- Else fallback to initials -->
-          <span v-else class="text-2xl text-fg-subtle font-mono" aria-hidden="true">
-            {{ username.charAt(0).toUpperCase() }}
-          </span>
-        </div>
+        <UserAvatar :username="username" />
         <div>
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">~{{ username }}</h1>
           <p v-if="results?.total" class="text-fg-muted text-sm mt-1">

app/pages/~[username]/orgs.vue

@@ -120,15 +120,7 @@ defineOgImageComponent('Default', {
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
       <div class="flex flex-wrap items-center gap-4 mb-4">
-        <!-- Avatar placeholder -->
-        <div
-          class="size-16 shrink-0 rounded-full bg-bg-muted border border-border flex items-center justify-center"
-          aria-hidden="true"
-        >
-          <span class="text-2xl text-fg-subtle font-mono">{{
-            username.charAt(0).toUpperCase()
-          }}</span>
-        </div>
+        <UserAvatar :username="username" />
         <div>
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">~{{ username }}</h1>
           <p class="text-fg-muted text-sm mt-1">{{ $t('user.orgs_page.title') }}</p>