feat: render highlight comments with RichText component (#34)

* feat: render highlight comments with RichText component

Enable support for custom emoji, mentions, hashtags, and other rich text features in highlight comments by using the RichText component instead of plain text rendering.

Changes:
- HighlightRenderer: Use RichText for comment rendering with media/embeds disabled
- HighlightDetailRenderer: Add RichText import and use it for comment rendering

* chore: update package-lock.json

* fix: pass event to RichText for custom emoji tag support

Create synthetic events that preserve emoji tags from the original
highlight event while using the comment as content. This ensures
custom emoji in comments render correctly.

Changes:
- HighlightRenderer: Create commentEvent with emoji tags preserved
- HighlightDetailRenderer: Create commentEvent with emoji tags preserved

---------

Co-authored-by: Claude <noreply@anthropic.com>

src/components/nostr/kinds/HighlightDetailRenderer.tsx

@@ -11,6 +11,7 @@ import {
 import { EmbeddedEvent } from "../EmbeddedEvent";
 import { UserName } from "../UserName";
 import { useGrimoire } from "@/core/state";
+import { RichText } from "../RichText";
 
 /**
  * Detail renderer for Kind 9802 - Highlight
@@ -38,6 +39,14 @@ export function Kind9802DetailRenderer({ event }: { event: NostrEvent }) {
     },
   );
 
+  // Create synthetic event for comment rendering (preserves emoji tags)
+  const commentEvent = comment
+    ? {
+        ...event,
+        content: comment,
+      }
+    : undefined;
+
   return (
     <div className="flex flex-col gap-6 p-6 max-w-3xl mx-auto">
       {/* Highlight Header */}
@@ -75,12 +84,16 @@ export function Kind9802DetailRenderer({ event }: { event: NostrEvent }) {
       )}
 
       {/* Comment */}
-      {comment && (
+      {commentEvent && (
         <div className="flex flex-col gap-2">
           <div className="text-xs text-muted-foreground uppercase tracking-wide">
             Comment
           </div>
-          <p className="text-sm leading-relaxed">{comment}</p>
+          <RichText
+            event={commentEvent}
+            className="text-sm leading-relaxed"
+            options={{ showMedia: false, showEventEmbeds: false }}
+          />
         </div>
       )}
 

src/components/nostr/kinds/HighlightRenderer.tsx

@@ -49,11 +49,25 @@ export function Kind9802Renderer({ event }: BaseEventProps) {
     }
   };
 
+  // Create synthetic event for comment rendering (preserves emoji tags)
+  const commentEvent = comment
+    ? {
+        ...event,
+        content: comment,
+      }
+    : undefined;
+
   return (
     <BaseEventContainer event={event}>
       <div className="flex flex-col gap-2">
         {/* Comment */}
-        {comment && <p className="text-sm text-foreground">{comment}</p>}
+        {commentEvent && (
+          <RichText
+            event={commentEvent}
+            className="text-sm text-foreground"
+            options={{ showMedia: false, showEventEmbeds: false }}
+          />
+        )}
 
         {/* Highlighted text */}
         {highlightText && (