From 42bff96c584588e6592b07981c12d7eda12ae28b Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Thu, 11 Jun 2026 00:11:37 +0200
Subject: [PATCH] feat(activities): show organizer on event cards + route
 through ProfileService
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two changes that ship together:

- Compact variant of OrganizerCard (tiny avatar + display name on a
  single line) used on every feed EventCard so viewers see who's
  hosting before they tap into the detail page. Hidden on compact
  feed rows (host's own roster — they already know).

- Refactor useOrganizerProfile.ts to route through the centralized
  ProfileService. Two bugs the local impl was carrying:
  * `displayName` was exposed via a `get` accessor on the returned
    object; destructuring it (`const { displayName } = …`) resolved
    once at the destructure site, so a kind-0 arriving later never
    updated the bound name. Now exposed as `computed<string>`.
  * `relayHub.subscribe()` throws synchronously when the hub isn't
    connected yet. OrganizerCard mounted during cold start swallowed
    the throw silently in onMounted, leaving the user with the
    pubkey-truncated fallback forever. ProfileService.getProfile()
    awaits the relay-hub connection before issuing the filter.

  Bonus: ProfileService's kind-0 cache is shared with chat / market /
  nostr-feed, so a profile fetched by any module is immediately
  visible to all of them.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/modules/events/components/EventCard.vue   |  10 ++
 .../events/components/OrganizerCard.vue       |  34 +++-
 .../events/composables/useOrganizerProfile.ts | 156 +++++++-----------
 3 files changed, 95 insertions(+), 105 deletions(-)

diff --git a/src/modules/events/components/EventCard.vue b/src/modules/events/components/EventCard.vue
index b26976d..91ccb0b 100644
--- a/src/modules/events/components/EventCard.vue
+++ b/src/modules/events/components/EventCard.vue
@@ -6,6 +6,7 @@ import { Card, CardContent } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { MapPin, Calendar, Ticket, User, CheckCircle2, History } from 'lucide-vue-next'
 import BookmarkButton from './BookmarkButton.vue'
+import OrganizerCard from './OrganizerCard.vue'
 import { useDateLocale } from '../composables/useDateLocale'
 import { useOwnedTickets } from '../composables/useOwnedTickets'
 import type { Event } from '../types/event'
@@ -208,6 +209,15 @@ const isNonApproved = computed(
       </p>
 
       <div :class="compact ? 'space-y-1 text-xs' : 'mt-auto space-y-1.5 pt-2'">
+        <!-- Organizer — small avatar + display name. Hidden in compact
+             mode (host's own roster, no need to tell them whose event
+             it is) and on cards the user already owns. -->
+        <OrganizerCard
+          v-if="!compact"
+          :pubkey="event.organizer.pubkey"
+          compact
+        />
+
         <!-- Date/Time -->
         <div class="flex items-center gap-1.5 text-sm text-muted-foreground">
           <Calendar class="w-3.5 h-3.5 shrink-0" />
diff --git a/src/modules/events/components/OrganizerCard.vue b/src/modules/events/components/OrganizerCard.vue
index 66030ea..dea6c4f 100644
--- a/src/modules/events/components/OrganizerCard.vue
+++ b/src/modules/events/components/OrganizerCard.vue
@@ -3,15 +3,37 @@ import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
 import { User } from 'lucide-vue-next'
 import { useOrganizerProfile } from '../composables/useOrganizerProfile'
 
-const props = defineProps<{
-  pubkey: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    pubkey: string
+    /** Compact row variant — small avatar, single-line "By <name>".
+     * Used on the events feed card where the organizer is a hint, not
+     * the focus. Default (full) is used on the detail page. */
+    compact?: boolean
+  }>(),
+  { compact: false },
+)
 
 const { profile, displayName, isLoading } = useOrganizerProfile(props.pubkey)
 </script>
 
 <template>
-  <div class="flex items-center gap-3">
+  <!-- Compact: tiny avatar + "By <name>" on a single line -->
+  <div v-if="compact" class="flex items-center gap-1.5 text-sm text-muted-foreground min-w-0">
+    <Avatar class="h-4 w-4 shrink-0">
+      <AvatarImage v-if="profile?.picture" :src="profile.picture" :alt="displayName" />
+      <AvatarFallback class="bg-primary/10">
+        <User class="w-2.5 h-2.5 text-primary" />
+      </AvatarFallback>
+    </Avatar>
+    <span class="truncate">
+      <template v-if="isLoading">Loading…</template>
+      <template v-else>{{ displayName }}</template>
+    </span>
+  </div>
+
+  <!-- Full (default): 10x10 avatar with name + nip05/pubkey -->
+  <div v-else class="flex items-center gap-3">
     <Avatar class="h-10 w-10">
       <AvatarImage v-if="profile?.picture" :src="profile.picture" :alt="displayName" />
       <AvatarFallback class="bg-primary/10">
@@ -20,14 +42,14 @@ const { profile, displayName, isLoading } = useOrganizerProfile(props.pubkey)
     </Avatar>
     <div class="min-w-0">
       <p class="text-sm font-medium text-foreground truncate">
-        <template v-if="isLoading">Loading...</template>
+        <template v-if="isLoading">Loading…</template>
         <template v-else>{{ displayName }}</template>
       </p>
       <p v-if="profile?.nip05" class="text-xs text-muted-foreground truncate">
         {{ profile.nip05 }}
       </p>
       <p v-else class="text-xs text-muted-foreground font-mono truncate">
-        {{ pubkey.slice(0, 16) }}...
+        {{ pubkey.slice(0, 16) }}…
       </p>
     </div>
   </div>
diff --git a/src/modules/events/composables/useOrganizerProfile.ts b/src/modules/events/composables/useOrganizerProfile.ts
index 8d6455b..0f13f19 100644
--- a/src/modules/events/composables/useOrganizerProfile.ts
+++ b/src/modules/events/composables/useOrganizerProfile.ts
@@ -1,6 +1,6 @@
-import { ref, onMounted, onUnmounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
-import type { Event as NostrEvent } from 'nostr-tools'
+import type { ProfileService, UserProfile } from '@/modules/base/nostr/ProfileService'
 
 export interface OrganizerProfile {
   pubkey: string
@@ -14,134 +14,92 @@ export interface OrganizerProfile {
   website?: string
 }
 
-// Global cache of fetched profiles
-const profileCache = ref<Map<string, OrganizerProfile>>(new Map())
+function fromUserProfile(p: UserProfile): OrganizerProfile {
+  return {
+    pubkey: p.pubkey,
+    name: p.name,
+    displayName: p.display_name,
+    about: p.about,
+    picture: p.picture,
+    nip05: p.nip05,
+  }
+}
 
 /**
  * Composable for fetching and displaying organizer profiles (NIP-01 kind 0).
- * Uses its own relay subscription to avoid depending on the nostr-feed module.
+ *
+ * Routes through the centralized ProfileService (registered by the base
+ * module) so:
+ *  - the cache is shared with every other module that reads kind-0
+ *    metadata (nostr-feed, market, chat),
+ *  - the subscription waits for the relay hub to actually be connected
+ *    before firing (the previous local impl threw synchronously when a
+ *    component mounted before connection — silently leaving the user
+ *    with a pubkey-truncated fallback even after profiles arrived),
+ *  - duplicate fetches for the same pubkey collapse into one
+ *    subscription.
  */
 export function useOrganizerProfile(pubkey: string) {
-  const profile = ref<OrganizerProfile | null>(profileCache.value.get(pubkey) ?? null)
-  const isLoading = ref(!profile.value)
-  let unsubscribe: (() => void) | null = null
+  const profileService = tryInjectService<ProfileService>(SERVICE_TOKENS.PROFILE_SERVICE)
+  const isLoading = ref(false)
 
-  function load() {
-    if (profileCache.value.has(pubkey)) {
-      profile.value = profileCache.value.get(pubkey)!
-      isLoading.value = false
-      return
-    }
-
-    const relayHub = tryInjectService<any>(SERVICE_TOKENS.RELAY_HUB)
-    if (!relayHub) {
-      isLoading.value = false
-      return
-    }
-
-    unsubscribe = relayHub.subscribe({
-      id: `profile-${pubkey}-${Date.now()}`,
-      filters: [{
-        kinds: [0],
-        authors: [pubkey],
-        limit: 1,
-      }],
-      onEvent: (event: NostrEvent) => {
-        try {
-          const metadata = JSON.parse(event.content)
-          const p: OrganizerProfile = {
-            pubkey,
-            name: metadata.name,
-            displayName: metadata.display_name,
-            about: metadata.about,
-            picture: metadata.picture,
-            banner: metadata.banner,
-            nip05: metadata.nip05,
-            lud16: metadata.lud16,
-            website: metadata.website,
-          }
-          profileCache.value.set(pubkey, p)
-          profile.value = p
-        } catch {
-          // invalid metadata JSON
-        }
-        isLoading.value = false
-      },
-      onEose: () => {
-        isLoading.value = false
-      },
-    })
-  }
-
-  onMounted(() => {
-    load()
+  // Reactive read from the shared ProfileService cache. Updates the
+  // moment a kind-0 lands for this pubkey, regardless of which module
+  // triggered the fetch.
+  const profile = computed<OrganizerProfile | null>(() => {
+    if (!profileService) return null
+    const p = profileService.profiles.get(pubkey)
+    return p ? fromUserProfile(p) : null
   })
 
-  onUnmounted(() => {
-    if (unsubscribe) {
-      unsubscribe()
+  const displayName = computed(() => {
+    const p = profile.value
+    return p?.displayName ?? p?.name ?? `${pubkey.slice(0, 8)}...${pubkey.slice(-4)}`
+  })
+
+  onMounted(async () => {
+    if (!profileService || profile.value) return
+    isLoading.value = true
+    try {
+      await profileService.getProfile(pubkey)
+    } finally {
+      isLoading.value = false
     }
   })
 
   return {
     profile,
     isLoading,
-    get displayName() {
-      const p = profile.value
-      return p?.displayName ?? p?.name ?? `${pubkey.slice(0, 8)}...${pubkey.slice(-4)}`
-    },
+    displayName,
   }
 }
 
 /**
  * Batch-fetch profiles for multiple pubkeys (for event cards).
+ *
+ * Thin wrapper around ProfileService.fetchProfiles so callers don't
+ * have to know the service token. Useful for warming the cache before
+ * a list of cards mounts.
  */
 export function useBatchProfiles() {
+  const profileService = tryInjectService<ProfileService>(SERVICE_TOKENS.PROFILE_SERVICE)
+
   function fetchProfiles(pubkeys: string[]) {
-    const uncached = pubkeys.filter(pk => !profileCache.value.has(pk))
-    if (uncached.length === 0) return
-
-    const relayHub = tryInjectService<any>(SERVICE_TOKENS.RELAY_HUB)
-    if (!relayHub) return
-
-    relayHub.subscribe({
-      id: `batch-profiles-${Date.now()}`,
-      filters: [{
-        kinds: [0],
-        authors: uncached,
-      }],
-      onEvent: (event: NostrEvent) => {
-        try {
-          const metadata = JSON.parse(event.content)
-          profileCache.value.set(event.pubkey, {
-            pubkey: event.pubkey,
-            name: metadata.name,
-            displayName: metadata.display_name,
-            about: metadata.about,
-            picture: metadata.picture,
-            banner: metadata.banner,
-            nip05: metadata.nip05,
-            lud16: metadata.lud16,
-            website: metadata.website,
-          })
-        } catch {
-          // skip invalid
-        }
-      },
-    })
+    if (!profileService || pubkeys.length === 0) return
+    void profileService.fetchProfiles(pubkeys)
   }
 
   function getProfile(pubkey: string): OrganizerProfile | undefined {
-    return profileCache.value.get(pubkey)
+    const p = profileService?.profiles.get(pubkey)
+    return p ? fromUserProfile(p) : undefined
   }
 
   function getDisplayName(pubkey: string): string {
-    const p = profileCache.value.get(pubkey)
-    return p?.displayName ?? p?.name ?? `${pubkey.slice(0, 8)}...${pubkey.slice(-4)}`
+    const p = profileService?.profiles.get(pubkey)
+    return p?.display_name ?? p?.name ?? `${pubkey.slice(0, 8)}...${pubkey.slice(-4)}`
   }
 
   return {
-    profiles: profileCache,
     fetchProfiles,
     getProfile,
     getDisplayName,