From 064700bd5de9c8939b7b0be81ab53fde8c87cc08 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Tue, 16 May 2023 11:10:08 +0700
Subject: [PATCH] update note metadata

---
 src/app/note/components/metadata.tsx        | 20 ++++++++++++++++----
 src/app/note/components/metadata/reply.tsx  |  5 +++--
 src/app/note/components/metadata/repost.tsx |  5 +++--
 src/app/note/components/metadata/zap.tsx    |  9 +++------
 src/utils/number.tsx                        |  2 ++
 5 files changed, 27 insertions(+), 14 deletions(-)
 create mode 100644 src/utils/number.tsx

diff --git a/src/app/note/components/metadata.tsx b/src/app/note/components/metadata.tsx
index d7daea96..19b47657 100644
--- a/src/app/note/components/metadata.tsx
+++ b/src/app/note/components/metadata.tsx
@@ -4,6 +4,8 @@ import NoteRepost from "@app/note/components/metadata/repost";
 import { RelayContext } from "@shared/relayProvider";
 
 import NoteZap from "@app/note/components/metadata/zap";
+import PlusIcon from "@shared/icons/plus";
+import { Tooltip } from "@shared/tooltip";
 import { READONLY_RELAYS } from "@stores/constants";
 import { decode } from "light-bolt11-decoder";
 import { useContext, useState } from "react";
@@ -61,10 +63,20 @@ export default function NoteMetadata({
 	});
 
 	return (
-		<div className="mt-4 flex h-12 items-center gap-16 border-t border-zinc-800/50">
-			<NoteReply id={id} replies={replies} />
-			<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
-			<NoteZap zaps={zaps} />
+		<div className="mt-4 flex h-12 items-center justify-between border-t border-zinc-800/50">
+			<div className="flex items-center gap-16">
+				<NoteReply id={id} replies={replies} />
+				<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
+				<NoteZap zaps={zaps} />
+			</div>
+			<Tooltip message="Save to Space">
+				<button
+					type="button"
+					className="inline-flex w-4 h-4 rounded justify-center items-center gap-1 hover:bg-zinc-800"
+				>
+					<PlusIcon className="w-3 h-3 text-zinc-400" />
+				</button>
+			</Tooltip>
 		</div>
 	);
 }
diff --git a/src/app/note/components/metadata/reply.tsx b/src/app/note/components/metadata/reply.tsx
index b359061e..1ac0281f 100644
--- a/src/app/note/components/metadata/reply.tsx
+++ b/src/app/note/components/metadata/reply.tsx
@@ -9,6 +9,7 @@ import { dateToUnix } from "@utils/date";
 import { useActiveAccount } from "@utils/hooks/useActiveAccount";
 
 import { Dialog, Transition } from "@headlessui/react";
+import { compactNumber } from "@utils/number";
 import { getEventHash, signEvent } from "nostr-tools";
 import { Fragment, useContext, useEffect, useState } from "react";
 
@@ -64,7 +65,7 @@ export default function NoteReply({
 			<button
 				type="button"
 				onClick={() => openModal()}
-				className="group inline-flex items-center gap-1.5"
+				className="w-20 group inline-flex items-center gap-1.5"
 			>
 				<ReplyIcon
 					width={16}
@@ -72,7 +73,7 @@ export default function NoteReply({
 					className="text-zinc-400 group-hover:text-green-400"
 				/>
 				<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">
-					{count}
+					{compactNumber.format(count)}
 				</span>
 			</button>
 			<Transition appear show={isOpen} as={Fragment}>
diff --git a/src/app/note/components/metadata/repost.tsx b/src/app/note/components/metadata/repost.tsx
index ee4e967a..b6e04294 100644
--- a/src/app/note/components/metadata/repost.tsx
+++ b/src/app/note/components/metadata/repost.tsx
@@ -7,6 +7,7 @@ import { WRITEONLY_RELAYS } from "@stores/constants";
 import { dateToUnix } from "@utils/date";
 import { useActiveAccount } from "@utils/hooks/useActiveAccount";
 
+import { compactNumber } from "@utils/number";
 import { getEventHash, signEvent } from "nostr-tools";
 import { useContext, useEffect, useState } from "react";
 
@@ -53,7 +54,7 @@ export default function NoteRepost({
 		<button
 			type="button"
 			onClick={(e) => submitEvent(e)}
-			className="group inline-flex items-center gap-1.5"
+			className="w-20 group inline-flex items-center gap-1.5"
 		>
 			<RepostIcon
 				width={16}
@@ -61,7 +62,7 @@ export default function NoteRepost({
 				className="text-zinc-400 group-hover:text-blue-400"
 			/>
 			<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">
-				{count}
+				{compactNumber.format(count)}
 			</span>
 		</button>
 	);
diff --git a/src/app/note/components/metadata/zap.tsx b/src/app/note/components/metadata/zap.tsx
index 6f044eb8..c4bd5f58 100644
--- a/src/app/note/components/metadata/zap.tsx
+++ b/src/app/note/components/metadata/zap.tsx
@@ -1,11 +1,8 @@
 import ZapIcon from "@shared/icons/zap";
-import { useEffect, useMemo, useState } from "react";
+import { compactNumber } from "@utils/number";
+import { useEffect, useState } from "react";
 
 export default function NoteZap({ zaps }: { zaps: number }) {
-	const formatter = useMemo(
-		() => Intl.NumberFormat("en", { notation: "compact" }),
-		[],
-	);
 	const [count, setCount] = useState(0);
 
 	useEffect(() => {
@@ -20,7 +17,7 @@ export default function NoteZap({ zaps }: { zaps: number }) {
 				className="text-zinc-400 group-hover:text-orange-400"
 			/>
 			<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">
-				{formatter.format(count)} sats
+				{compactNumber.format(count)} sats
 			</span>
 		</button>
 	);
diff --git a/src/utils/number.tsx b/src/utils/number.tsx
new file mode 100644
index 00000000..877ebc9a
--- /dev/null
+++ b/src/utils/number.tsx
@@ -0,0 +1,2 @@
+// convert number to K, M, B, T, etc.
+export const compactNumber = Intl.NumberFormat("en", { notation: "compact" });