13 changed files with 145 additions and 731 deletions
@ -0,0 +1,56 @@
@@ -0,0 +1,56 @@
|
||||
import { Skeleton } from '@/components/ui/skeleton' |
||||
import { useProfileWall } from '@/hooks/useProfileWall' |
||||
import { useTranslation } from 'react-i18next' |
||||
|
||||
export default function ProfileBadges({ |
||||
pubkey, |
||||
profileEventId |
||||
}: { |
||||
pubkey: string |
||||
profileEventId?: string |
||||
}) { |
||||
const { t } = useTranslation() |
||||
const { badges, isLoading } = useProfileWall(pubkey, profileEventId) |
||||
|
||||
if (isLoading && badges.length === 0) { |
||||
return ( |
||||
<div className="mt-3 flex flex-wrap gap-2" aria-hidden> |
||||
<Skeleton className="h-14 w-14 rounded-lg" /> |
||||
<Skeleton className="h-14 w-14 rounded-lg" /> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
if (badges.length === 0) return null |
||||
|
||||
return ( |
||||
<section className="mt-3 min-w-0" aria-label={t('Badges')}> |
||||
<div className="flex flex-wrap gap-2"> |
||||
{badges.map((badge) => ( |
||||
<div |
||||
key={`${badge.definitionCoordinate}:${badge.awardEventId}`} |
||||
className="flex max-w-[5.5rem] flex-col items-center gap-0.5" |
||||
title={badge.description ?? badge.name} |
||||
> |
||||
{badge.imageUrl ? ( |
||||
<img |
||||
src={badge.imageUrl} |
||||
alt={badge.name} |
||||
className="h-14 w-14 rounded-lg border border-border object-cover" |
||||
loading="lazy" |
||||
/> |
||||
) : ( |
||||
<div |
||||
className="flex h-14 w-14 items-center justify-center rounded-lg border border-border bg-muted px-1 text-center text-[10px] font-medium leading-tight" |
||||
aria-hidden |
||||
> |
||||
{badge.name} |
||||
</div> |
||||
)} |
||||
<span className="w-full truncate text-center text-[10px] text-muted-foreground">{badge.name}</span> |
||||
</div> |
||||
))} |
||||
</div> |
||||
</section> |
||||
) |
||||
} |
||||
@ -1,298 +0,0 @@
@@ -1,298 +0,0 @@
|
||||
import NoteCard from '@/components/NoteCard' |
||||
import { Skeleton } from '@/components/ui/skeleton' |
||||
import { ExtendedKind } from '@/constants' |
||||
import { useDeletedEvent } from '@/providers/DeletedEventProvider' |
||||
import client from '@/services/client.service' |
||||
import indexedDb from '@/services/indexed-db.service' |
||||
import { generateBech32IdFromATag, getFirstHexEventIdFromETags } from '@/lib/tag' |
||||
import { relayHintsFromEventTags } from '@/lib/relay-list-builder' |
||||
import { hexPubkeysEqual, normalizeHexPubkey } from '@/lib/pubkey' |
||||
import { RefreshCw } from 'lucide-react' |
||||
import { kinds, type Event } from 'nostr-tools' |
||||
import { |
||||
forwardRef, |
||||
useEffect, |
||||
useImperativeHandle, |
||||
useMemo, |
||||
useRef, |
||||
useState |
||||
} from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { useProfileTimeline } from '@/hooks/useProfileTimeline' |
||||
|
||||
const INITIAL_SHOW_COUNT = 25 |
||||
const LOAD_MORE_COUNT = 25 |
||||
const LIKED_REACTION_KINDS = [kinds.Reaction, ExtendedKind.EXTERNAL_REACTION] |
||||
|
||||
type ReactionTargetRef = { |
||||
key: string |
||||
fetchId: string |
||||
hexId?: string |
||||
relayHints: string[] |
||||
} |
||||
|
||||
type LikedTarget = { |
||||
reaction: Event |
||||
target: Event |
||||
} |
||||
|
||||
function isPositiveReaction(event: Event): boolean { |
||||
return event.content.trim() !== '-' |
||||
} |
||||
|
||||
function relayHintsForReactionTarget(event: Event, tag?: string[]): string[] { |
||||
const hints = new Set(relayHintsFromEventTags(event)) |
||||
const tagHint = tag?.[2]?.trim() |
||||
if (tagHint) hints.add(tagHint) |
||||
return [...hints] |
||||
} |
||||
|
||||
function reactionTargetRef(event: Event): ReactionTargetRef | null { |
||||
const hexId = getFirstHexEventIdFromETags(event.tags) |
||||
if (hexId) { |
||||
return { |
||||
key: `e:${hexId.toLowerCase()}`, |
||||
fetchId: hexId, |
||||
hexId, |
||||
relayHints: relayHintsForReactionTarget(event) |
||||
} |
||||
} |
||||
|
||||
const addressTag = event.tags.find((tag) => (tag[0] === 'a' || tag[0] === 'A') && tag[1]) |
||||
if (!addressTag) return null |
||||
const bech32Id = generateBech32IdFromATag(addressTag) |
||||
if (!bech32Id) return null |
||||
return { |
||||
key: `a:${addressTag[1]}`, |
||||
fetchId: bech32Id, |
||||
relayHints: relayHintsForReactionTarget(event, addressTag) |
||||
} |
||||
} |
||||
|
||||
function samePubkey(a: string, b: string): boolean { |
||||
try { |
||||
return hexPubkeysEqual(normalizeHexPubkey(a), normalizeHexPubkey(b)) |
||||
} catch { |
||||
return a === b |
||||
} |
||||
} |
||||
|
||||
function newestReactionTargets(reactions: Event[]): Array<{ reaction: Event; targetRef: ReactionTargetRef }> { |
||||
const byTarget = new Map<string, { reaction: Event; targetRef: ReactionTargetRef }>() |
||||
for (const reaction of reactions) { |
||||
if (!isPositiveReaction(reaction)) continue |
||||
const targetRef = reactionTargetRef(reaction) |
||||
if (!targetRef) continue |
||||
const existing = byTarget.get(targetRef.key) |
||||
if ( |
||||
!existing || |
||||
reaction.created_at > existing.reaction.created_at || |
||||
(reaction.created_at === existing.reaction.created_at && reaction.id > existing.reaction.id) |
||||
) { |
||||
byTarget.set(targetRef.key, { reaction, targetRef }) |
||||
} |
||||
} |
||||
return [...byTarget.values()].sort((a, b) => b.reaction.created_at - a.reaction.created_at) |
||||
} |
||||
|
||||
const ProfileLikedFeed = forwardRef<{ refresh: () => void }, { pubkey: string }>(({ pubkey }, ref) => { |
||||
const { t } = useTranslation() |
||||
const { isEventDeleted } = useDeletedEvent() |
||||
const [isRefreshing, setIsRefreshing] = useState(false) |
||||
const [isResolvingTargets, setIsResolvingTargets] = useState(false) |
||||
const [likedTargets, setLikedTargets] = useState<LikedTarget[]>([]) |
||||
const [showCount, setShowCount] = useState(INITIAL_SHOW_COUNT) |
||||
const bottomRef = useRef<HTMLDivElement>(null) |
||||
|
||||
const reactionKinds = useMemo(() => [...LIKED_REACTION_KINDS], []) |
||||
const cacheKey = useMemo(() => `${pubkey}-profile-liked-v1`, [pubkey]) |
||||
const { events: reactionEvents, isLoading, refresh } = useProfileTimeline({ |
||||
pubkey, |
||||
cacheKey, |
||||
kinds: reactionKinds, |
||||
limit: 200 |
||||
}) |
||||
|
||||
const targetRefs = useMemo(() => newestReactionTargets(reactionEvents), [reactionEvents]) |
||||
|
||||
useEffect(() => { |
||||
setShowCount(INITIAL_SHOW_COUNT) |
||||
}, [pubkey]) |
||||
|
||||
useEffect(() => { |
||||
if (!isLoading && !isResolvingTargets) { |
||||
setIsRefreshing(false) |
||||
} |
||||
}, [isLoading, isResolvingTargets]) |
||||
|
||||
useImperativeHandle( |
||||
ref, |
||||
() => ({ |
||||
refresh: () => { |
||||
setIsRefreshing(true) |
||||
refresh() |
||||
} |
||||
}), |
||||
[refresh] |
||||
) |
||||
|
||||
useEffect(() => { |
||||
let cancelled = false |
||||
const viewerPubkey = pubkey |
||||
const toLikedTarget = (row: { reaction: Event; target: Event }): LikedTarget | null => { |
||||
if (samePubkey(row.target.pubkey, viewerPubkey)) return null |
||||
if (isEventDeleted(row.target)) return null |
||||
return row |
||||
} |
||||
|
||||
const cachedRows = targetRefs |
||||
.map(({ reaction, targetRef }) => { |
||||
const cached = targetRef.hexId ? client.peekSessionCachedEvent(targetRef.hexId) : undefined |
||||
return cached ? toLikedTarget({ reaction, target: cached }) : null |
||||
}) |
||||
.filter((row): row is LikedTarget => !!row) |
||||
|
||||
setLikedTargets(cachedRows) |
||||
if (targetRefs.length === 0) { |
||||
setIsResolvingTargets(false) |
||||
return () => { |
||||
cancelled = true |
||||
} |
||||
} |
||||
|
||||
setIsResolvingTargets(true) |
||||
void (async () => { |
||||
try { |
||||
const hexIds = targetRefs.map(({ targetRef }) => targetRef.hexId).filter((id): id is string => !!id) |
||||
if (hexIds.length > 0) { |
||||
const [archived, publications] = await Promise.all([ |
||||
indexedDb.getArchivedEventsByIds(hexIds), |
||||
Promise.all(hexIds.map((id) => indexedDb.getEventFromPublicationStore(id))) |
||||
]) |
||||
if (cancelled) return |
||||
const localById = new Map<string, Event>() |
||||
for (const event of archived) localById.set(event.id, event) |
||||
for (const event of publications) { |
||||
if (event) localById.set(event.id, event) |
||||
} |
||||
const localResolved = targetRefs |
||||
.map(({ reaction, targetRef }) => { |
||||
const target = targetRef.hexId ? localById.get(targetRef.hexId) : undefined |
||||
return target ? toLikedTarget({ reaction, target }) : null |
||||
}) |
||||
.filter((row): row is LikedTarget => !!row) |
||||
if (localResolved.length > 0) { |
||||
setLikedTargets((prev) => { |
||||
const byTargetId = new Map(prev.map((row) => [row.target.id, row])) |
||||
for (const row of localResolved) byTargetId.set(row.target.id, row) |
||||
return [...byTargetId.values()].sort((a, b) => b.reaction.created_at - a.reaction.created_at) |
||||
}) |
||||
} |
||||
} |
||||
|
||||
const missingHexIds = targetRefs |
||||
.map(({ targetRef }) => targetRef.hexId) |
||||
.filter((id): id is string => !!id && !client.peekSessionCachedEvent(id)) |
||||
if (missingHexIds.length > 0) { |
||||
await client.prefetchHexEventIds(missingHexIds) |
||||
} |
||||
|
||||
const resolved = await Promise.all( |
||||
targetRefs.map(async ({ reaction, targetRef }) => { |
||||
const target = |
||||
(targetRef.hexId ? client.peekSessionCachedEvent(targetRef.hexId) : undefined) ?? |
||||
await client.fetchEvent(targetRef.fetchId, { relayHints: targetRef.relayHints }) |
||||
if (!target) return null |
||||
return toLikedTarget({ reaction, target }) |
||||
}) |
||||
) |
||||
if (cancelled) return |
||||
const byTargetId = new Map<string, LikedTarget>() |
||||
for (const row of resolved) { |
||||
if (!row) continue |
||||
const existing = byTargetId.get(row.target.id) |
||||
if ( |
||||
!existing || |
||||
row.reaction.created_at > existing.reaction.created_at || |
||||
(row.reaction.created_at === existing.reaction.created_at && row.reaction.id > existing.reaction.id) |
||||
) { |
||||
byTargetId.set(row.target.id, row) |
||||
} |
||||
} |
||||
setLikedTargets([...byTargetId.values()].sort((a, b) => b.reaction.created_at - a.reaction.created_at)) |
||||
} finally { |
||||
if (!cancelled) setIsResolvingTargets(false) |
||||
} |
||||
})() |
||||
|
||||
return () => { |
||||
cancelled = true |
||||
} |
||||
}, [targetRefs, pubkey, isEventDeleted]) |
||||
|
||||
const displayedTargets = useMemo( |
||||
() => likedTargets.slice(0, showCount), |
||||
[likedTargets, showCount] |
||||
) |
||||
|
||||
useEffect(() => { |
||||
if (!bottomRef.current || displayedTargets.length >= likedTargets.length) return |
||||
const observer = new IntersectionObserver( |
||||
(entries) => { |
||||
if (entries[0].isIntersecting && displayedTargets.length < likedTargets.length) { |
||||
setShowCount((prev) => Math.min(prev + LOAD_MORE_COUNT, likedTargets.length)) |
||||
} |
||||
}, |
||||
{ threshold: 0.1 } |
||||
) |
||||
observer.observe(bottomRef.current) |
||||
return () => observer.disconnect() |
||||
}, [displayedTargets.length, likedTargets.length]) |
||||
|
||||
if ((isLoading || isResolvingTargets) && likedTargets.length === 0) { |
||||
return ( |
||||
<div className="mt-4 space-y-2"> |
||||
{Array.from({ length: 3 }).map((_, i) => ( |
||||
<Skeleton key={i} className="h-32 w-full" /> |
||||
))} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
if (likedTargets.length === 0) { |
||||
return ( |
||||
<div className="px-4 py-8 text-center text-sm text-muted-foreground"> |
||||
{t('No liked posts yet')} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<div className="mt-4 min-w-0"> |
||||
{isRefreshing && ( |
||||
<div |
||||
className="flex items-center justify-center gap-2 px-4 py-2 text-center text-sm text-green-500" |
||||
role="status" |
||||
aria-live="polite" |
||||
> |
||||
<RefreshCw className="h-4 w-4 shrink-0 animate-spin" aria-hidden /> |
||||
{t('Refreshing liked posts...')} |
||||
</div> |
||||
)} |
||||
<div className="space-y-2"> |
||||
{displayedTargets.map(({ target }) => ( |
||||
<NoteCard key={target.id} className="w-full" event={target} filterMutedNotes={false} bottomNoteLabel={t('Liked by you')} /> |
||||
))} |
||||
</div> |
||||
{displayedTargets.length < likedTargets.length && ( |
||||
<div ref={bottomRef} className="h-10 flex items-center justify-center"> |
||||
<div className="text-sm text-muted-foreground">{t('Loading more...')}</div> |
||||
</div> |
||||
)} |
||||
</div> |
||||
) |
||||
}) |
||||
|
||||
ProfileLikedFeed.displayName = 'ProfileLikedFeed' |
||||
|
||||
export default ProfileLikedFeed |
||||
@ -1,101 +0,0 @@
@@ -1,101 +0,0 @@
|
||||
import NoteList, { type TNoteListRef } from '@/components/NoteList' |
||||
import { buildAuthorInboxOutboxRelayUrls } from '@/lib/favorites-feed-relays' |
||||
import { PROFILE_MEDIA_TAB_KINDS } from '@/constants' |
||||
import { buildProfileMediaSubRequests } from '@/pages/primary/SpellsPage/fauxSpellFeeds' |
||||
import { normalizeHexPubkey } from '@/lib/pubkey' |
||||
import { useFavoriteRelays } from '@/providers/FavoriteRelaysProvider' |
||||
import { useNostrOptional } from '@/providers/nostr-context' |
||||
import { hexPubkeysEqual } from '@/lib/pubkey' |
||||
import client from '@/services/client.service' |
||||
import { forwardRef, useEffect, useMemo, useState } from 'react' |
||||
|
||||
const ProfileMediaFeed = forwardRef<TNoteListRef, { pubkey: string }>(({ pubkey }, ref) => { |
||||
const nostr = useNostrOptional() |
||||
const { blockedRelays } = useFavoriteRelays() |
||||
const includeAuthorLocalRelays = useMemo(() => { |
||||
const me = nostr?.pubkey?.trim() |
||||
const pk = pubkey?.trim() |
||||
if (!me || !pk) return false |
||||
try { |
||||
return hexPubkeysEqual(normalizeHexPubkey(me), normalizeHexPubkey(pk)) |
||||
} catch { |
||||
return false |
||||
} |
||||
}, [nostr?.pubkey, pubkey]) |
||||
|
||||
const [authorRelayUrls, setAuthorRelayUrls] = useState<string[] | null>(null) |
||||
|
||||
useEffect(() => { |
||||
const pk = pubkey?.trim() |
||||
if (!pk) { |
||||
setAuthorRelayUrls([]) |
||||
return |
||||
} |
||||
let cancelled = false |
||||
setAuthorRelayUrls(null) |
||||
void client |
||||
.fetchRelayList(pk) |
||||
.catch(() => ({ read: [] as string[], write: [] as string[] })) |
||||
.then((authorRl) => { |
||||
if (cancelled) return |
||||
setAuthorRelayUrls(buildAuthorInboxOutboxRelayUrls(authorRl, blockedRelays, includeAuthorLocalRelays)) |
||||
}) |
||||
return () => { |
||||
cancelled = true |
||||
} |
||||
}, [pubkey, blockedRelays, includeAuthorLocalRelays]) |
||||
|
||||
const subRequests = useMemo(() => { |
||||
const pk = pubkey?.trim() |
||||
if (!pk || !authorRelayUrls?.length) return [] |
||||
return buildProfileMediaSubRequests(authorRelayUrls, blockedRelays, pk) |
||||
}, [pubkey, authorRelayUrls, blockedRelays]) |
||||
|
||||
const feedSubscriptionKey = useMemo(() => { |
||||
const pk = pubkey?.trim() |
||||
if (!pk) return 'profile-media-empty' |
||||
return `profile-media-${normalizeHexPubkey(pk)}` |
||||
}, [pubkey]) |
||||
|
||||
const showKinds = useMemo(() => [...PROFILE_MEDIA_TAB_KINDS], []) |
||||
|
||||
if (authorRelayUrls === null) { |
||||
return ( |
||||
<div className="min-h-[min(40vh,320px)] min-w-0 px-2 py-8 text-center text-sm text-muted-foreground"> |
||||
{/* Skeleton while author NIP-65 resolves — avoids provisional→refined subRequest churn */} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
if (!subRequests.length) { |
||||
return ( |
||||
<div className="min-h-[min(40vh,320px)] min-w-0 px-2 py-8 text-center text-sm text-muted-foreground" /> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<div className="min-h-[min(40vh,320px)] min-w-0"> |
||||
<NoteList |
||||
ref={ref} |
||||
subRequests={subRequests} |
||||
feedSubscriptionKey={feedSubscriptionKey} |
||||
hostPrimaryPageName="profile" |
||||
showKinds={showKinds} |
||||
useFilterAsIs |
||||
preserveTimelineOnSubRequestsChange |
||||
mergeTimelineWhenSubRequestFiltersMatch |
||||
revealBatchSize={48} |
||||
filterMutedNotes={false} |
||||
showKind1OPs |
||||
showKind1Replies |
||||
showKind1111 |
||||
hideReplies={false} |
||||
timelinePublicReadFallback |
||||
/> |
||||
</div> |
||||
) |
||||
}) |
||||
|
||||
ProfileMediaFeed.displayName = 'ProfileMediaFeed' |
||||
|
||||
export default ProfileMediaFeed |
||||
@ -1,50 +0,0 @@
@@ -1,50 +0,0 @@
|
||||
import ProfileSearchBar from '@/components/ui/ProfileSearchBar' |
||||
import { ExtendedKind } from '@/constants' |
||||
import { PROFILE_PUBLICATIONS_TAB_KINDS } from '@/constants' |
||||
import { forwardRef, useMemo, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import ProfileTimeline from './ProfileTimeline' |
||||
|
||||
const ProfilePublicationsFeed = forwardRef<{ refresh: () => void }, { pubkey: string }>(({ pubkey }, ref) => { |
||||
const { t } = useTranslation() |
||||
const [searchQuery, setSearchQuery] = useState('') |
||||
|
||||
const kindsList = useMemo(() => [...PROFILE_PUBLICATIONS_TAB_KINDS], []) |
||||
const cacheKey = useMemo(() => `${pubkey}-profile-publications-v3`, [pubkey]) |
||||
const visiblePublicationFilter = useMemo( |
||||
() => (event: { kind: number }) => event.kind !== ExtendedKind.PUBLICATION_CONTENT, |
||||
[] |
||||
) |
||||
|
||||
const getKindLabel = (_kindValue: string) => t('articles and publications') |
||||
|
||||
return ( |
||||
<div className="mt-4"> |
||||
<div className="mb-2 flex flex-wrap items-center gap-2 px-2"> |
||||
<ProfileSearchBar |
||||
onSearch={setSearchQuery} |
||||
placeholder={t('Search articles...')} |
||||
className="w-64 max-w-full" |
||||
/> |
||||
</div> |
||||
<ProfileTimeline |
||||
ref={ref} |
||||
pubkey={pubkey} |
||||
topSpace={0} |
||||
searchQuery={searchQuery} |
||||
kindFilter="all" |
||||
kinds={kindsList} |
||||
cacheKey={cacheKey} |
||||
filterPredicate={visiblePublicationFilter} |
||||
getKindLabel={getKindLabel} |
||||
refreshLabel={t('Refreshing articles...')} |
||||
emptyLabel={t('No articles or publications found')} |
||||
emptySearchLabel={t('No articles or publications match your search')} |
||||
/> |
||||
</div> |
||||
) |
||||
}) |
||||
|
||||
ProfilePublicationsFeed.displayName = 'ProfilePublicationsFeed' |
||||
|
||||
export default ProfilePublicationsFeed |
||||
@ -1,117 +0,0 @@
@@ -1,117 +0,0 @@
|
||||
import NoteCard from '@/components/NoteCard' |
||||
import { Skeleton } from '@/components/ui/skeleton' |
||||
import { useProfileWall } from '@/hooks/useProfileWall' |
||||
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { RefreshCw } from 'lucide-react' |
||||
|
||||
type ProfileWallFeedProps = { |
||||
pubkey: string |
||||
profileEventId?: string |
||||
} |
||||
|
||||
const ProfileWallFeed = forwardRef<{ refresh: () => void }, ProfileWallFeedProps>( |
||||
({ pubkey, profileEventId }, ref) => { |
||||
const { t } = useTranslation() |
||||
const { badges, comments, isLoading, refresh } = useProfileWall(pubkey, profileEventId) |
||||
const [isRefreshing, setIsRefreshing] = useState(false) |
||||
|
||||
useEffect(() => { |
||||
if (!isLoading) setIsRefreshing(false) |
||||
}, [isLoading]) |
||||
|
||||
useImperativeHandle( |
||||
ref, |
||||
() => ({ |
||||
refresh: () => { |
||||
setIsRefreshing(true) |
||||
refresh() |
||||
} |
||||
}), |
||||
[refresh] |
||||
) |
||||
|
||||
if (isLoading && badges.length === 0 && comments.length === 0) { |
||||
return ( |
||||
<div className="mt-4 space-y-6 px-4"> |
||||
<div className="flex gap-3"> |
||||
<Skeleton className="h-24 w-24 rounded-full md:h-48 md:w-48" /> |
||||
<Skeleton className="h-24 w-24 rounded-full md:h-48 md:w-48" /> |
||||
</div> |
||||
{Array.from({ length: 2 }).map((_, i) => ( |
||||
<Skeleton key={i} className="h-32 w-full" /> |
||||
))} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<div className="mt-4 space-y-8"> |
||||
{isRefreshing && ( |
||||
<div |
||||
className="flex items-center justify-center gap-2 px-4 py-2 text-center text-sm text-green-500" |
||||
role="status" |
||||
aria-live="polite" |
||||
> |
||||
<RefreshCw className="h-4 w-4 shrink-0 animate-spin" aria-hidden /> |
||||
{t('Refreshing wall...')} |
||||
</div> |
||||
)} |
||||
|
||||
{badges.length > 0 && ( |
||||
<section className="px-4" aria-label={t('Badges')}> |
||||
<div className="flex flex-wrap gap-3 justify-center sm:justify-start"> |
||||
{badges.map((badge) => ( |
||||
<div |
||||
key={`${badge.definitionCoordinate}:${badge.awardEventId}`} |
||||
className="flex flex-col items-center gap-1" |
||||
title={badge.description ?? badge.name} |
||||
> |
||||
{badge.imageUrl ? ( |
||||
<img |
||||
src={badge.imageUrl} |
||||
alt={badge.name} |
||||
className="h-24 w-24 rounded-lg object-cover md:h-48 md:w-48" |
||||
loading="lazy" |
||||
/> |
||||
) : ( |
||||
<div |
||||
className="flex h-24 w-24 items-center justify-center rounded-lg border border-border bg-muted px-2 text-center text-xs font-medium md:h-48 md:w-48 md:text-sm" |
||||
aria-hidden |
||||
> |
||||
{badge.name} |
||||
</div> |
||||
)} |
||||
<span className="max-w-[6rem] truncate text-center text-xs text-muted-foreground md:max-w-[12rem]"> |
||||
{badge.name} |
||||
</span> |
||||
</div> |
||||
))} |
||||
</div> |
||||
</section> |
||||
)} |
||||
|
||||
<section className="space-y-2" aria-labelledby="profile-wall-comments-heading"> |
||||
<h2 id="profile-wall-comments-heading" className="px-4 text-sm font-semibold text-foreground"> |
||||
{t('Wall')} |
||||
</h2> |
||||
{!profileEventId ? ( |
||||
<p className="px-4 py-4 text-sm text-muted-foreground">{t('Profile metadata not loaded yet')}</p> |
||||
) : comments.length === 0 ? ( |
||||
<p className="px-4 py-4 text-sm text-muted-foreground">{t('No wall comments yet')}</p> |
||||
) : ( |
||||
<div className="space-y-2"> |
||||
{comments.map((event) => ( |
||||
<NoteCard key={event.id} className="w-full" event={event} filterMutedNotes={false} /> |
||||
))} |
||||
</div> |
||||
)} |
||||
</section> |
||||
</div> |
||||
) |
||||
} |
||||
) |
||||
|
||||
ProfileWallFeed.displayName = 'ProfileWallFeed' |
||||
|
||||
export default ProfileWallFeed |
||||
Loading…
Reference in new issue