use nip05 as display name

This commit is contained in:
Ren Amamiya 2023-05-20 21:19:22 +07:00
parent caeffe98a7
commit f11fe2d349
8 changed files with 29 additions and 36 deletions

View File

@ -29,7 +29,7 @@ export function NoteBase({ event }: { event: any }) {
)} )}
<div className="flex flex-col"> <div className="flex flex-col">
<NoteDefaultUser pubkey={event.pubkey} time={event.created_at} /> <NoteDefaultUser pubkey={event.pubkey} time={event.created_at} />
<div className="mt-3 pl-[46px]"> <div className="-mt-5 pl-[48px]">
{event.kind === 1 && <Kind1 content={content} />} {event.kind === 1 && <Kind1 content={content} />}
{event.kind === 1063 && <Kind1063 metadata={event.tags} />} {event.kind === 1063 && <Kind1063 metadata={event.tags} />}
<NoteMetadata id={event.event_id} eventPubkey={event.pubkey} /> <NoteMetadata id={event.event_id} eventPubkey={event.pubkey} />

View File

@ -47,11 +47,11 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
return ( return (
<div className="relative flex flex-col pb-6"> <div className="relative flex flex-col pb-6">
<div className="absolute left-[16px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" /> <div className="absolute left-[18px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
{data ? ( {data ? (
<> <>
<NoteDefaultUser pubkey={data.pubkey} time={data.created_at} /> <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
<div className="mt-3 pl-[46px]"> <div className="-mt-5 pl-[48px]">
{kind1 && <Kind1 content={kind1} />} {kind1 && <Kind1 content={kind1} />}
{kind1063 && <Kind1063 metadata={kind1063} />} {kind1063 && <Kind1063 metadata={kind1063} />}
<NoteMetadata id={data.id} eventPubkey={data.pubkey} /> <NoteMetadata id={data.id} eventPubkey={data.pubkey} />

View File

@ -14,7 +14,7 @@ export function NoteQuoteRepost({ event }: { event: any }) {
> >
<div className="rounded-md border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20"> <div className="rounded-md border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
<div className="relative px-3 pb-5 pt-3"> <div className="relative px-3 pb-5 pt-3">
<div className="absolute left-[29px] top-[20px] h-[70px] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" /> <div className="absolute left-[28px] top-[20px] h-[70px] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
<NoteRepostUser pubkey={event.pubkey} time={event.created_at} /> <NoteRepostUser pubkey={event.pubkey} time={event.created_at} />
</div> </div>
<RootNote id={rootID} fallback={event.content} /> <RootNote id={rootID} fallback={event.content} />

View File

@ -10,7 +10,7 @@ export default function Reply({ data }: { data: any }) {
<div className="flex h-min min-h-min w-full select-text flex-col px-3 py-3"> <div className="flex h-min min-h-min w-full select-text flex-col px-3 py-3">
<div className="flex flex-col"> <div className="flex flex-col">
<NoteReplyUser pubkey={data.pubkey} time={data.created_at} /> <NoteReplyUser pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-[18px] pl-[46px]"> <div className="-mt-[20px] pl-[47px]">
<Kind1 content={content} /> <Kind1 content={content} />
</div> </div>
</div> </div>

View File

@ -81,7 +81,7 @@ export const RootNote = memo(function RootNote({
pubkey={parseFallback.pubkey} pubkey={parseFallback.pubkey}
time={parseFallback.created_at} time={parseFallback.created_at}
/> />
<div className="mt-3 pl-[46px]"> <div className="-mt-5 pl-[48px]">
<Kind1 content={contentFallback} /> <Kind1 content={contentFallback} />
<NoteMetadata <NoteMetadata
id={parseFallback.id} id={parseFallback.id}
@ -101,7 +101,7 @@ export const RootNote = memo(function RootNote({
{data ? ( {data ? (
<> <>
<NoteDefaultUser pubkey={data.pubkey} time={data.created_at} /> <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
<div className="mt-3 pl-[46px]"> <div className="-mt-5 pl-[48px]">
{kind1 && <Kind1 content={kind1} />} {kind1 && <Kind1 content={kind1} />}
{kind1063 && <Kind1063 metadata={kind1063} />} {kind1063 && <Kind1063 metadata={kind1063} />}
<NoteMetadata id={data.id} eventPubkey={data.pubkey} /> <NoteMetadata id={data.id} eventPubkey={data.pubkey} />

View File

@ -19,29 +19,24 @@ export function NoteDefaultUser({
const { user } = useProfile(pubkey); const { user } = useProfile(pubkey);
return ( return (
<Popover className="relative flex items-center gap-2.5"> <Popover className="relative flex items-start gap-3">
<Popover.Button className="h-9 w-9 shrink-0 overflow-hidden rounded-md bg-zinc-900"> <Popover.Button className="h-11 w-11 shrink-0 overflow-hidden rounded-md bg-zinc-900">
<Image <Image
src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${ src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${
user?.picture ? user.picture : DEFAULT_AVATAR user?.picture ? user.picture : DEFAULT_AVATAR
}`} }`}
alt={pubkey} alt={pubkey}
className="h-9 w-9 object-cover" className="h-11 w-11 object-cover"
/> />
</Popover.Button> </Popover.Button>
<div className="flex w-full flex-1 items-start justify-between"> <div className="flex flex-wrap items-baseline gap-1">
<div className="flex flex-col gap-0.5">
<h5 className="text-base font-semibold leading-none"> <h5 className="text-base font-semibold leading-none">
{user?.display_name || user?.name || ( {user?.nip05 || user?.name || shortenKey(pubkey)}
<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
)}
</h5> </h5>
<div className="flex items-baseline gap-1.5 text-base leading-none text-zinc-500"> <span className="leading-none text-zinc-500">·</span>
<span>{user?.nip05 || shortenKey(pubkey)}</span> <span className="leading-none text-zinc-500">
<span></span> {dayjs().to(dayjs.unix(time), true)}
<span>{dayjs().to(dayjs.unix(time), true)}</span> </span>
</div>
</div>
</div> </div>
<Transition <Transition
as={Fragment} as={Fragment}

View File

@ -18,19 +18,19 @@ export default function NoteReplyUser({
return ( return (
<div className="group flex items-start gap-2.5"> <div className="group flex items-start gap-2.5">
<div className="relative h-9 w-9 shrink-0 rounded-md"> <div className="relative h-11 w-11 shrink-0 rounded-md">
<Image <Image
src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${ src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${
user?.picture ? user.picture : DEFAULT_AVATAR user?.picture ? user.picture : DEFAULT_AVATAR
}`} }`}
alt={pubkey} alt={pubkey}
className="h-9 w-9 rounded-md object-cover" className="h-11 w-11 rounded-md object-cover"
/> />
</div> </div>
<div className="flex w-full flex-1 items-start justify-between"> <div className="flex w-full flex-1 items-start justify-between">
<div className="flex items-baseline gap-2 text-base"> <div className="flex items-baseline gap-2 text-base">
<span className="font-semibold leading-none text-white group-hover:underline"> <span className="font-semibold leading-none text-white group-hover:underline">
{user?.display_name || user?.name || shortenKey(pubkey)} {user?.nip05 || user?.name || shortenKey(pubkey)}
</span> </span>
<span className="leading-none text-zinc-500">·</span> <span className="leading-none text-zinc-500">·</span>
<span className="leading-none text-zinc-500"> <span className="leading-none text-zinc-500">

View File

@ -19,28 +19,26 @@ export function NoteRepostUser({
const { user } = useProfile(pubkey); const { user } = useProfile(pubkey);
return ( return (
<Popover className="relative flex items-center gap-2.5"> <Popover className="relative flex items-start gap-3">
<Popover.Button className="h-9 w-9 shrink-0 overflow-hidden rounded-md bg-zinc-900"> <Popover.Button className="h-11 w-11 shrink-0 overflow-hidden rounded-md bg-zinc-900">
<Image <Image
src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${ src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${
user?.picture ? user.picture : DEFAULT_AVATAR user?.picture ? user.picture : DEFAULT_AVATAR
}`} }`}
alt={pubkey} alt={pubkey}
className="h-9 w-9 rounded-md object-cover" className="h-11 w-11 rounded-md object-cover"
/> />
</Popover.Button> </Popover.Button>
<div className="flex items-baseline gap-1.5 text-base"> <div className="flex flex-wrap items-baseline gap-1">
<h5 className="font-semibold leading-tight group-hover:underline"> <h5 className="text-base font-semibold leading-none">
{user?.display_name || user?.name || ( {user?.nip05 || user?.name || shortenKey(pubkey)}
<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
)}
<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent"> <span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
{" "} {" "}
reposted reposted
</span> </span>
</h5> </h5>
<span className="leading-tight text-zinc-500">·</span> <span className="leading-none text-zinc-500">·</span>
<span className="text-zinc-500"> <span className="leading-none text-zinc-500">
{dayjs().to(dayjs.unix(time), true)} {dayjs().to(dayjs.unix(time), true)}
</span> </span>
</div> </div>