Render custom emoji in the inbox; DRY up emoji derivation

desktop/src/features/home/lib/inbox.ts

@@ -47,6 +47,7 @@ export type InboxReply = {
   parentId?: string | null;
   reactions?: TimelineReaction[];
   rootId?: string | null;
+  tags?: string[][];
 };
 
 export type InboxContextMessage = InboxReply & {

desktop/src/features/home/ui/HomeView.tsx

@@ -245,6 +245,7 @@ export function HomeView({
         mentionNames:
           resolveMentionNames(message.tags ?? [], feedProfiles) ?? [],
         reactions: message.reactions,
+        tags: message.tags,
       };
     });
   }, [
@@ -544,6 +545,7 @@ export function HomeView({
                   id: result.eventId,
                   parentId: result.parentEventId,
                   rootId: result.rootEventId,
+                  tags: emojiTags,
                 };
                 setLocalRepliesByItemId((current) => ({
                   ...current,

desktop/src/features/home/ui/InboxMessageRow.tsx

@@ -5,6 +5,7 @@ import type { TimelineMessage } from "@/features/messages/types";
 import { MessageActionBar } from "@/features/messages/ui/MessageActionBar";
 import { MessageReactions } from "@/features/messages/ui/MessageReactions";
 import { useReactionHandler } from "@/features/messages/ui/useReactionHandler";
+import { useMessageEmoji } from "@/features/messages/lib/useMessageEmoji";
 import { cn } from "@/shared/lib/cn";
 import { Markdown } from "@/shared/ui/markdown";
 import { UserAvatar } from "@/shared/ui/UserAvatar";
@@ -22,6 +23,7 @@ function toTimelineMessage(message: InboxDisplayMessage): TimelineMessage {
     createdAt: 0,
     depth: message.depth,
     reactions: message.reactions ?? [],
+    tags: message.tags,
     time: message.fullTimestampLabel,
   };
 }
@@ -52,6 +54,10 @@ export function InboxMessageRow({
     () => toTimelineMessage(message),
     [message],
   );
+  const { customEmoji, emojiOnly } = useMessageEmoji(
+    message.content,
+    message.tags,
+  );
   const [badgeBurstEmoji, setBadgeBurstEmoji] = React.useState<string | null>(
     null,
   );
@@ -128,8 +134,13 @@ export function InboxMessageRow({
 
           <div className="mt-0.5">
             <Markdown
-              className="max-w-full text-left text-sm text-foreground"
+              className={cn(
+                "max-w-full text-left text-sm text-foreground",
+                emojiOnly &&
+                  "text-4xl leading-tight [&_p]:leading-tight [&_img[data-custom-emoji]]:h-[1.45em] [&_img[data-custom-emoji]]:align-middle [&_button:has(img[data-custom-emoji])]:align-middle",
+              )}
               content={message.content}
+              customEmoji={customEmoji}
               mentionNames={message.mentionNames}
             />
             <MessageReactions

desktop/src/features/messages/lib/useMessageEmoji.test.mjs

@@ -0,0 +1,27 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { customEmojiFromTags } from "@/shared/api/customEmoji.ts";
+import { isEmojiOnlyMessage } from "@/shared/lib/emojiOnly.ts";
+
+// useMessageEmoji is a thin React-hook wrapper around these two pure
+// functions (memoized with React.useMemo). Exercise the underlying logic
+// directly here — the same data both MessageRow (channels) and
+// InboxMessageRow (inbox) now derive their emoji rendering from, so a custom
+// emoji tag on an event must produce the same `customEmoji`/`emojiOnly`
+// regardless of which row reads it.
+const EMOJI_TAGS = [["emoji", "buzz", "https://relay/buzz.png"]];
+
+test("derives custom emoji and emoji-only flag from event tags", () => {
+  const customEmoji = customEmojiFromTags(EMOJI_TAGS);
+  assert.deepEqual(customEmoji, [
+    { shortcode: "buzz", url: "https://relay/buzz.png" },
+  ]);
+  assert.equal(isEmojiOnlyMessage(":buzz:", customEmoji), true);
+  assert.equal(isEmojiOnlyMessage("hi :buzz:", customEmoji), false);
+});
+
+test("messages without tags get no custom emoji and are never emoji-only", () => {
+  const customEmoji = undefined;
+  assert.equal(isEmojiOnlyMessage(":buzz:", customEmoji), false);
+});

desktop/src/features/messages/lib/useMessageEmoji.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { customEmojiFromTags } from "@/shared/api/customEmoji";
+import { isEmojiOnlyMessage } from "@/shared/lib/emojiOnly";
+import type { CustomEmoji } from "@/shared/lib/remarkCustomEmoji";
+
+/**
+ * Derive custom-emoji rendering info for a message body from its raw event
+ * tags. Shared by channel and inbox message rows so NIP-30 `:shortcode:`
+ * emoji (and the emoji-only large-render treatment) behave identically
+ * everywhere a message body is shown.
+ */
+export function useMessageEmoji(
+  body: string,
+  tags: ReadonlyArray<ReadonlyArray<string>> | undefined,
+): { customEmoji: CustomEmoji[] | undefined; emojiOnly: boolean } {
+  const customEmoji = React.useMemo(
+    () => (tags ? customEmojiFromTags(tags) : undefined),
+    [tags],
+  );
+  const emojiOnly = React.useMemo(
+    () => isEmojiOnlyMessage(body, customEmoji),
+    [body, customEmoji],
+  );
+  return { customEmoji, emojiOnly };
+}

desktop/src/features/messages/ui/MessageRow.tsx

@@ -12,8 +12,7 @@ import { normalizePubkey } from "@/shared/lib/pubkey";
 import { UserAvatar } from "@/shared/ui/UserAvatar";
 import { useChannelNavigation } from "@/shared/context/ChannelNavigationContext";
 import { parseImetaTags } from "@/features/messages/lib/parseImeta";
-import { customEmojiFromTags } from "@/shared/api/customEmoji";
-import { isEmojiOnlyMessage } from "@/shared/lib/emojiOnly";
+import { useMessageEmoji } from "@/features/messages/lib/useMessageEmoji";
 import {
   resolveMentionNames,
   resolveMentionPubkeysByName,
@@ -131,13 +130,9 @@ export const MessageRow = React.memo(
       [message.tags],
     );
 
-    const customEmoji = React.useMemo(
-      () => (message.tags ? customEmojiFromTags(message.tags) : undefined),
-      [message.tags],
-    );
-    const emojiOnly = React.useMemo(
-      () => isEmojiOnlyMessage(message.body, customEmoji),
-      [message.body, customEmoji],
+    const { customEmoji, emojiOnly } = useMessageEmoji(
+      message.body,
+      message.tags,
     );
     const bodyOffsetClass = emojiOnly ? "mt-1" : "-mt-0.5";