From f11fe2d3493b0b3184b8d0d60f40ab63cc10bd5c Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sat, 20 May 2023 21:19:22 +0700
Subject: [PATCH] use nip05 as display name

---
 src/app/note/components/base.tsx         |  2 +-
 src/app/note/components/parent.tsx       |  4 ++--
 src/app/note/components/quoteRepost.tsx  |  2 +-
 src/app/note/components/replies/item.tsx |  2 +-
 src/app/note/components/rootNote.tsx     |  4 ++--
 src/app/note/components/user/default.tsx | 27 ++++++++++--------------
 src/app/note/components/user/reply.tsx   |  6 +++---
 src/app/note/components/user/repost.tsx  | 18 +++++++---------
 8 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/src/app/note/components/base.tsx b/src/app/note/components/base.tsx
index c4e3c8b1..a2b2e19c 100644
--- a/src/app/note/components/base.tsx
+++ b/src/app/note/components/base.tsx
@@ -29,7 +29,7 @@ export function NoteBase({ event }: { event: any }) {
 				)}
 				<div className="flex flex-col">
 					<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 === 1063 && <Kind1063 metadata={event.tags} />}
 						<NoteMetadata id={event.event_id} eventPubkey={event.pubkey} />
diff --git a/src/app/note/components/parent.tsx b/src/app/note/components/parent.tsx
index 1a62c7ac..fff8dfe0 100644
--- a/src/app/note/components/parent.tsx
+++ b/src/app/note/components/parent.tsx
@@ -47,11 +47,11 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
 
 	return (
 		<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 ? (
 				<>
 					<NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
-					<div className="mt-3 pl-[46px]">
+					<div className="-mt-5 pl-[48px]">
 						{kind1 && <Kind1 content={kind1} />}
 						{kind1063 && <Kind1063 metadata={kind1063} />}
 						<NoteMetadata id={data.id} eventPubkey={data.pubkey} />
diff --git a/src/app/note/components/quoteRepost.tsx b/src/app/note/components/quoteRepost.tsx
index 27e96504..dfdf4401 100644
--- a/src/app/note/components/quoteRepost.tsx
+++ b/src/app/note/components/quoteRepost.tsx
@@ -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="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} />
 				</div>
 				<RootNote id={rootID} fallback={event.content} />
diff --git a/src/app/note/components/replies/item.tsx b/src/app/note/components/replies/item.tsx
index 9fdc5e3e..6ac5ce4d 100644
--- a/src/app/note/components/replies/item.tsx
+++ b/src/app/note/components/replies/item.tsx
@@ -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 flex-col">
 				<NoteReplyUser pubkey={data.pubkey} time={data.created_at} />
-				<div className="-mt-[18px] pl-[46px]">
+				<div className="-mt-[20px] pl-[47px]">
 					<Kind1 content={content} />
 				</div>
 			</div>
diff --git a/src/app/note/components/rootNote.tsx b/src/app/note/components/rootNote.tsx
index a35e8c34..36fe8dfa 100644
--- a/src/app/note/components/rootNote.tsx
+++ b/src/app/note/components/rootNote.tsx
@@ -81,7 +81,7 @@ export const RootNote = memo(function RootNote({
 					pubkey={parseFallback.pubkey}
 					time={parseFallback.created_at}
 				/>
-				<div className="mt-3 pl-[46px]">
+				<div className="-mt-5 pl-[48px]">
 					<Kind1 content={contentFallback} />
 					<NoteMetadata
 						id={parseFallback.id}
@@ -101,7 +101,7 @@ export const RootNote = memo(function RootNote({
 			{data ? (
 				<>
 					<NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
-					<div className="mt-3 pl-[46px]">
+					<div className="-mt-5 pl-[48px]">
 						{kind1 && <Kind1 content={kind1} />}
 						{kind1063 && <Kind1063 metadata={kind1063} />}
 						<NoteMetadata id={data.id} eventPubkey={data.pubkey} />
diff --git a/src/app/note/components/user/default.tsx b/src/app/note/components/user/default.tsx
index f69a2011..8b9e857a 100644
--- a/src/app/note/components/user/default.tsx
+++ b/src/app/note/components/user/default.tsx
@@ -19,29 +19,24 @@ export function NoteDefaultUser({
 	const { user } = useProfile(pubkey);
 
 	return (
-		<Popover className="relative flex items-center gap-2.5">
-			<Popover.Button className="h-9 w-9 shrink-0 overflow-hidden rounded-md bg-zinc-900">
+		<Popover className="relative flex items-start gap-3">
+			<Popover.Button className="h-11 w-11 shrink-0 overflow-hidden rounded-md bg-zinc-900">
 				<Image
 					src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${
 						user?.picture ? user.picture : DEFAULT_AVATAR
 					}`}
 					alt={pubkey}
-					className="h-9 w-9 object-cover"
+					className="h-11 w-11 object-cover"
 				/>
 			</Popover.Button>
-			<div className="flex w-full flex-1 items-start justify-between">
-				<div className="flex flex-col gap-0.5">
-					<h5 className="text-base font-semibold leading-none">
-						{user?.display_name || user?.name || (
-							<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
-						)}
-					</h5>
-					<div className="flex items-baseline gap-1.5 text-base leading-none text-zinc-500">
-						<span>{user?.nip05 || shortenKey(pubkey)}</span>
-						<span>•</span>
-						<span>{dayjs().to(dayjs.unix(time), true)}</span>
-					</div>
-				</div>
+			<div className="flex flex-wrap items-baseline gap-1">
+				<h5 className="text-base font-semibold leading-none">
+					{user?.nip05 || user?.name || shortenKey(pubkey)}
+				</h5>
+				<span className="leading-none text-zinc-500">·</span>
+				<span className="leading-none text-zinc-500">
+					{dayjs().to(dayjs.unix(time), true)}
+				</span>
 			</div>
 			<Transition
 				as={Fragment}
diff --git a/src/app/note/components/user/reply.tsx b/src/app/note/components/user/reply.tsx
index 75ff1931..0db3fb36 100644
--- a/src/app/note/components/user/reply.tsx
+++ b/src/app/note/components/user/reply.tsx
@@ -18,19 +18,19 @@ export default function NoteReplyUser({
 
 	return (
 		<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
 					src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${
 						user?.picture ? user.picture : DEFAULT_AVATAR
 					}`}
 					alt={pubkey}
-					className="h-9 w-9 rounded-md object-cover"
+					className="h-11 w-11 rounded-md object-cover"
 				/>
 			</div>
 			<div className="flex w-full flex-1 items-start justify-between">
 				<div className="flex items-baseline gap-2 text-base">
 					<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 className="leading-none text-zinc-500">·</span>
 					<span className="leading-none text-zinc-500">
diff --git a/src/app/note/components/user/repost.tsx b/src/app/note/components/user/repost.tsx
index cdbab9c7..cda2237e 100644
--- a/src/app/note/components/user/repost.tsx
+++ b/src/app/note/components/user/repost.tsx
@@ -19,28 +19,26 @@ export function NoteRepostUser({
 	const { user } = useProfile(pubkey);
 
 	return (
-		<Popover className="relative flex items-center gap-2.5">
-			<Popover.Button className="h-9 w-9 shrink-0 overflow-hidden rounded-md bg-zinc-900">
+		<Popover className="relative flex items-start gap-3">
+			<Popover.Button className="h-11 w-11 shrink-0 overflow-hidden rounded-md bg-zinc-900">
 				<Image
 					src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${
 						user?.picture ? user.picture : DEFAULT_AVATAR
 					}`}
 					alt={pubkey}
-					className="h-9 w-9 rounded-md object-cover"
+					className="h-11 w-11 rounded-md object-cover"
 				/>
 			</Popover.Button>
-			<div className="flex items-baseline gap-1.5 text-base">
-				<h5 className="font-semibold leading-tight group-hover:underline">
-					{user?.display_name || user?.name || (
-						<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
-					)}
+			<div className="flex flex-wrap items-baseline gap-1">
+				<h5 className="text-base font-semibold leading-none">
+					{user?.nip05 || user?.name || shortenKey(pubkey)}
 					<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
 						{" "}
 						reposted
 					</span>
 				</h5>
-				<span className="leading-tight text-zinc-500">·</span>
-				<span className="text-zinc-500">
+				<span className="leading-none text-zinc-500">·</span>
+				<span className="leading-none text-zinc-500">
 					{dayjs().to(dayjs.unix(time), true)}
 				</span>
 			</div>