refactor note component

src/shared/user.tsx

@@ -14,13 +14,13 @@ export function User({
   pubkey,
   time,
   size,
-  repost,
+  isRepost = false,
   isChat = false,
 }: {
   pubkey: string;
   time: number;
   size?: string;
-  repost?: boolean;
+  isRepost?: boolean;
   isChat?: boolean;
 }) {
   const { status, user } = useProfile(pubkey);
@@ -50,9 +50,7 @@ export function User({
 
   return (
     <Popover
-      className={`relative flex ${
-        size === 'small' ? 'items-center gap-2' : 'items-start gap-3'
-      }`}
+      className={`flex ${size === 'small' ? 'items-center gap-2' : 'items-start gap-3'}`}
     >
       <Popover.Button
         className={`${avatarWidth} ${avatarHeight} relative z-10 shrink-0 overflow-hidden bg-zinc-900`}
@@ -61,23 +59,26 @@ export function User({
           src={user?.picture || user?.image}
           fallback={DEFAULT_AVATAR}
           alt={pubkey}
-          className={`${avatarWidth} ${avatarHeight} ${
+          className={`${
+            isRepost ? 'ring-1 ring-zinc-800' : ''
+          } ${avatarWidth} ${avatarHeight} ${
             size === 'small' ? 'rounded' : 'rounded-lg'
           } object-cover`}
         />
       </Popover.Button>
-      <div className="flex flex-wrap items-baseline gap-1">
+      <div
+        className={`${isRepost ? 'mt-4' : ''} flex flex-1 items-baseline justify-between`}
+      >
         <h5
           className={`truncate font-semibold leading-none text-zinc-100 ${
-            size === 'small' ? 'max-w-[8rem]' : 'max-w-[12rem]'
+            size === 'small' ? 'max-w-[8rem]' : 'max-w-[18rem]'
           }`}
         >
-          {user?.nip05 || user?.name || user?.displayName || shortenKey(pubkey)}
+          {user?.nip05?.toLowerCase() ||
+            user?.name ||
+            user?.display_name ||
+            shortenKey(pubkey)}
         </h5>
-        {repost && (
-          <span className="font-semibold leading-none text-fuchsia-500"> reposted</span>
-        )}
-        <span className="leading-none text-zinc-500">·</span>
         <span className="leading-none text-zinc-500">{createdAt}</span>
       </div>
       <Transition