Move reply context above content in NoteCard

- Repositioned "Replying to @user" to appear between the header and content
- Matches Ditto's UI pattern for better visual hierarchy
- Hide reply context when post is a repost (repost takes priority)
- Added click event stop propagation to reply context link

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy
2026-02-18 20:28:58 -06:00
parent bc95237b7c
commit 6f4e28c3df
+7 -7
View File
@@ -216,11 +216,6 @@ export function NoteCard({ event, className, repostedBy, compact }: NoteCardProp
<TreasureHeader pubkey={event.pubkey} variant={isGeocache ? 'hid' : 'found'} />
)}
{/* Reply context (kind 1 only) */}
{isReply && replyTo?.[1] && (
<ReplyContext pubkey={replyTo[1]} />
)}
{/* Header: avatar + name/handle stacked */}
<div className="flex items-center gap-3">
{author.isLoading ? (
@@ -269,6 +264,11 @@ export function NoteCard({ event, className, repostedBy, compact }: NoteCardProp
)}
</div>
{/* Reply context (kind 1 only) — shown above content */}
{isReply && replyTo?.[1] && !repostedBy && (
<ReplyContext pubkey={replyTo[1]} />
)}
{/* Content — kind-based dispatch */}
{isVine ? (
<>
@@ -513,12 +513,12 @@ function ReplyContext({ pubkey }: { pubkey: string }) {
const name = author.data?.metadata?.name || genUserName(pubkey);
return (
<div className="flex items-center text-sm text-muted-foreground mb-1 ml-14">
<div className="flex items-center text-sm text-muted-foreground mt-2 mb-1">
<span className="mr-1">Replying to</span>
{author.isLoading ? (
<Skeleton className="h-3.5 w-20 inline-block" />
) : (
<Link to={`/${nip19.npubEncode(pubkey)}`} className="text-primary hover:underline">
<Link to={`/${nip19.npubEncode(pubkey)}`} className="text-primary hover:underline" onClick={(e) => e.stopPropagation()}>
@{name}
</Link>
)}