minor updates

src/app/space/components/notes/metadata.tsx

@@ -3,7 +3,7 @@ import { NoteRepost } from "@app/space/components/notes/metadata/repost";
 import { NoteZap } from "@app/space/components/notes/metadata/zap";
 import { createReplyNote } from "@libs/storage";
 import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
-import { LoaderIcon, ReplyIcon, RepostIcon } from "@shared/icons";
+import { LoaderIcon, ReplyIcon, RepostIcon, ZapIcon } from "@shared/icons";
 import { RelayContext } from "@shared/relayProvider";
 import { decode } from "light-bolt11-decoder";
 import { useContext } from "react";
@@ -99,17 +99,24 @@ export function NoteMetadata({
 							className="animate-spin text-black dark:text-white"
 						/>
 					</div>
-					<div className="ml-auto">
-						<div className="w-10 h-4 bg-zinc-800 rounded animate-pulse" />
+					<div className="w-20 group inline-flex items-center gap-1.5">
+						<ZapIcon
+							width={16}
+							height={16}
+							className="text-zinc-400 group-hover:text-green-400"
+						/>
+						<LoaderIcon
+							width={16}
+							height={16}
+							className="animate-spin text-black dark:text-white"
+						/>
 					</div>
 				</>
 			) : (
 				<>
 					<NoteReply id={id} replies={data.replies} />
 					<NoteRepost id={id} pubkey={eventPubkey} reposts={data.reposts} />
-					<div className="ml-auto">
-						<NoteZap zaps={data.zap} />
-					</div>
+					<NoteZap zaps={data.zap} />
 				</>
 			)}
 		</div>

src/app/space/components/notes/metadata/reply.tsx

@@ -50,7 +50,7 @@ export function NoteReply({ id, replies }: { id: string; replies: number }) {
 			<button
 				type="button"
 				onClick={() => openModal()}
-				className="w-20 group inline-flex items-center gap-1.5"
+				className="w-14 group inline-flex items-center gap-1.5"
 			>
 				<ReplyIcon
 					width={16}

src/app/space/components/notes/metadata/repost.tsx

@@ -44,7 +44,7 @@ export function NoteRepost({
 		<button
 			type="button"
 			onClick={(e) => submitEvent(e)}
-			className="w-20 group inline-flex items-center gap-1.5"
+			className="w-14 group inline-flex items-center gap-1.5"
 		>
 			<RepostIcon
 				width={16}

src/app/space/components/notes/metadata/zap.tsx

@@ -1,13 +1,22 @@
+import { ZapIcon } from "@shared/icons";
 import { compactNumber } from "@utils/number";
 import { useState } from "react";
 
 export function NoteZap({ zaps }: { zaps: number }) {
-	const [count, setCount] = useState(zaps);
+	const [count] = useState(zaps);
 
 	return (
-		<button type="button" className="group inline-flex items-center gap-1.5">
+		<button
+			type="button"
+			className="w-14 group inline-flex items-center gap-1.5"
+		>
+			<ZapIcon
+				width={16}
+				height={16}
+				className="text-zinc-400 group-hover:text-blue-400"
+			/>
 			<span className="text-base leading-none text-zinc-400 group-hover:text-white">
-				{compactNumber.format(count)} sats zapped
+				{compactNumber.format(count)}
 			</span>
 		</button>
 	);