feat(activities): event name on My tickets + organizer on cards #102
3 changed files with 94 additions and 104 deletions
feat(activities): show organizer on event cards + route through ProfileService
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>
commit
42bff96c58
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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<{
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
// 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
|
||||
})
|
||||
|
||||
const relayHub = tryInjectService<any>(SERVICE_TOKENS.RELAY_HUB)
|
||||
if (!relayHub) {
|
||||
isLoading.value = false
|
||||
return
|
||||
}
|
||||
const displayName = computed(() => {
|
||||
const p = profile.value
|
||||
return p?.displayName ?? p?.name ?? `${pubkey.slice(0, 8)}...${pubkey.slice(-4)}`
|
||||
})
|
||||
|
||||
unsubscribe = relayHub.subscribe({
|
||||
id: `profile-${pubkey}-${Date.now()}`,
|
||||
filters: [{
|
||||
kinds: [0],
|
||||
authors: [pubkey],
|
||||
limit: 1,
|
||||
}],
|
||||
onEvent: (event: NostrEvent) => {
|
||||
onMounted(async () => {
|
||||
if (!profileService || profile.value) return
|
||||
isLoading.value = true
|
||||
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
|
||||
}
|
||||
await profileService.getProfile(pubkey)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
},
|
||||
onEose: () => {
|
||||
isLoading.value = false
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
load()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe()
|
||||
}
|
||||
})
|
||||
|
||||
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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue