Fix custom emoji reactions having multiple colons

.changeset/large-items-knock.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Fix custom emoji reactions having multiple colons

src/components/embed-event/event-types/embedded-emoji-pack.tsx

@@ -46,7 +46,7 @@ export default function EmbeddedEmojiPack({ pack, ...props }: Omit<CardProps, "c
         {emojis.length > 0 && (
           <Flex mb="2" wrap="wrap" gap="2">
             {emojis.map(({ name, url }) => (
-              <Image key={name + url} src={url} title={name} alt={`:${name}:`} w={8} h={8} />
+              <Image key={name + url} src={url} title={name} alt={`:${name}:`} w={8} h={8} overflow="hidden" />
             ))}
           </Flex>
         )}

src/components/embed-types/emoji.tsx

@@ -17,7 +17,8 @@ export function embedEmoji(content: EmbedableContent, note: NostrEvent | DraftNo
             display="inline-block"
             verticalAlign="middle"
             title={match[1]}
-            alt={match[1]}
+            alt={":" + match[1] + ":"}
+            overflow="hidden"
           />
         );
       }

src/components/event-reactions/reaction-icon.tsx

@@ -4,6 +4,6 @@ import { DislikeIcon, LikeIcon } from "../icons";
 export default function ReactionIcon({ emoji, url }: { emoji: string; url?: string }) {
   if (emoji === "+") return <LikeIcon />;
   if (emoji === "-") return <DislikeIcon />;
-  if (url) return <Image src={url} title={emoji} alt={emoji} w="1em" h="1em" display="inline" />;
+  if (url) return <Image src={url} title={emoji} alt={emoji} w="1em" h="1em" display="inline" overflow="hidden" />;
   return <span>{emoji}</span>;
 }

src/helpers/nostr/reactions.ts

@@ -26,9 +26,13 @@ export function draftEventReaction(event: NostrEvent, emoji = "+", url?: string)
     ["e", event.id],
     ["p", event.pubkey],
   ];
+
+  let content = emoji;
+  if (url && !content.startsWith(":") && content.endsWith(":")) content = ":" + content + ":";
+
   const draft: DraftNostrEvent = {
     kind: kinds.Reaction,
-    content: url ? ":" + emoji + ":" : emoji,
+    content,
     tags: isReplaceable(event.kind) ? [...tags, ["a", getEventCoordinate(event)]] : tags,
     created_at: dayjs().unix(),
   };