feat: kind 3's and replies

src/components/EventDetailViewer.tsx

@@ -3,6 +3,7 @@ import type { EventPointer, AddressPointer } from "nostr-tools/nip19";
 import { useNostrEvent } from "@/hooks/useNostrEvent";
 import { KindRenderer } from "./nostr/kinds";
 import { Kind0DetailRenderer } from "./nostr/kinds/Kind0DetailRenderer";
+import { Kind3DetailView } from "./nostr/kinds/Kind3Renderer";
 import { Kind30023DetailRenderer } from "./nostr/kinds/Kind30023DetailRenderer";
 import { Kind9802DetailRenderer } from "./nostr/kinds/Kind9802DetailRenderer";
 import { KindBadge } from "./KindBadge";
@@ -167,6 +168,8 @@ export function EventDetailViewer({ pointer }: EventDetailViewerProps) {
       <div className="flex-1 overflow-y-auto">
         {event.kind === 0 ? (
           <Kind0DetailRenderer event={event} />
+        ) : event.kind === 3 ? (
+          <Kind3DetailView event={event} />
         ) : event.kind === 30023 ? (
           <Kind30023DetailRenderer event={event} />
         ) : event.kind === 9802 ? (

src/components/nostr/LinkPreview/PlainLink.tsx

@@ -1,5 +1,3 @@
-import { ExternalLink } from "lucide-react";
-
 interface PlainLinkProps {
   url: string;
 }
@@ -10,10 +8,9 @@ export function PlainLink({ url }: PlainLinkProps) {
       href={url}
       target="_blank"
       rel="noopener noreferrer"
-      className="inline-flex items-baseline gap-1 text-muted-foreground underline decoration-dotted hover:text-foreground cursor-crosshair break-all"
+      className="text-muted-foreground underline decoration-dotted hover:text-foreground cursor-crosshair break-all"
     >
-      <ExternalLink className="h-3 w-3 flex-shrink-0" />
-      <span>{url}</span>
+      {url}
     </a>
   );
 }

src/components/nostr/RichText.tsx

@@ -36,7 +36,7 @@ export function RichText({ event, content, className = "" }: RichTextProps) {
   if (content && !event) {
     const lines = content.trim().split("\n");
     return (
-      <div className={cn("leading-tight break-words", className)}>
+      <div className={cn("leading-relaxed break-words", className)}>
         {lines.map((line, idx) => (
           <div key={idx} dir="auto">
             {line || "\u00A0"}
@@ -54,7 +54,7 @@ export function RichText({ event, content, className = "" }: RichTextProps) {
     };
     const renderedContent = useRenderedContent(trimmedEvent, contentComponents);
     return (
-      <div className={cn("leading-tight break-words", className)}>
+      <div className={cn("leading-relaxed break-words", className)}>
         {renderedContent}
       </div>
     );

src/components/nostr/RichText/Text.tsx

@@ -12,13 +12,13 @@ function hasRTLCharacters(text: string): boolean {
 
 export function Text({ node }: TextNodeProps) {
   const text = node.value;
-  
+
   // If no newlines, render as inline span
   if (!text.includes("\n")) {
     const isRTL = hasRTLCharacters(text);
     return <span dir={isRTL ? "rtl" : "auto"}>{text || "\u00A0"}</span>;
   }
-  
+
   // If has newlines, use spans with <br> tags
   const lines = text.split("\n");
   return (

src/components/nostr/kinds/BaseEventRenderer.tsx

@@ -144,7 +144,7 @@ export function BaseEventContainer({
   });
 
   return (
-    <div className="flex flex-col gap-1 p-2">
+    <div className="flex flex-col gap-2 p-3 border-b border-border/50 last:border-0">
       <div className="flex flex-row justify-between items-center">
         <EventAuthor pubkey={event.pubkey} />
         {showTimestamp ? (

src/components/nostr/kinds/Kind1Renderer.tsx

@@ -1,12 +1,54 @@
-import { BaseEventProps, BaseEventContainer } from "./BaseEventRenderer";
 import { RichText } from "../RichText";
+import { BaseEventContainer, type BaseEventProps } from "./BaseEventRenderer";
+import { getNip10References } from "applesauce-core/helpers/threading";
+import { useNostrEvent } from "@/hooks/useNostrEvent";
+import { UserName } from "../UserName";
+import { Reply } from "lucide-react";
+import { useGrimoire } from "@/core/state";
 
 /**
  * Renderer for Kind 1 - Short Text Note
  */
 export function Kind1Renderer({ event, showTimestamp }: BaseEventProps) {
+  const { addWindow } = useGrimoire();
+  const refs = getNip10References(event);
+  const hasReply = refs.reply?.e || refs.reply?.a;
+
+  // Fetch parent event if replying
+  const parentEvent = useNostrEvent(
+    hasReply ? refs.reply?.e || refs.reply?.a : undefined,
+  );
+
+  const handleReplyClick = () => {
+    if (!parentEvent) return;
+
+    const pointer = refs.reply?.e || refs.reply?.a;
+    if (pointer) {
+      addWindow(
+        "open",
+        { pointer },
+        `Reply to ${parentEvent.pubkey.slice(0, 8)}...`,
+      );
+    }
+  };
+
   return (
     <BaseEventContainer event={event} showTimestamp={showTimestamp}>
+      {hasReply && parentEvent && (
+        <div
+          onClick={handleReplyClick}
+          className="flex items-start gap-2 p-1 bg-muted/20 text-xs text-muted-foreground hover:bg-muted/30 cursor-pointer rounded transition-colors"
+        >
+          <Reply className="size-3 flex-shrink-0 mt-0.5" />
+          <div className="flex items-baseline gap-1 min-w-0 flex-1">
+            <UserName
+              pubkey={parentEvent.pubkey}
+              className="flex-shrink-0 text-accent"
+            />
+            <span className="truncate">{parentEvent.content}</span>
+          </div>
+        </div>
+      )}
       <RichText event={event} className="text-sm" />
     </BaseEventContainer>
   );

src/components/nostr/kinds/Kind3Renderer.tsx

@@ -0,0 +1,87 @@
+import { useGrimoire } from "@/core/state";
+import { BaseEventContainer, type BaseEventProps } from "./BaseEventRenderer";
+import { UserName } from "../UserName";
+import { Users, Sparkles } from "lucide-react";
+
+/**
+ * Kind 3 Renderer - Contact/Follow List
+ * Shows follow count and "follows you" indicator
+ */
+export function Kind3Renderer({ event, showTimestamp }: BaseEventProps) {
+  const { state } = useGrimoire();
+
+  // Extract followed pubkeys from p tags
+  const followedPubkeys = event.tags
+    .filter((tag) => tag[0] === "p")
+    .map((tag) => tag[1]);
+
+  const followsYou = state.activeAccount?.pubkey
+    ? followedPubkeys.includes(state.activeAccount.pubkey)
+    : false;
+
+  return (
+    <BaseEventContainer event={event} showTimestamp={showTimestamp}>
+      <div className="flex flex-col gap-2 text-xs">
+        <span className="flex items-center gap-1">
+          <Users className="size-3 text-muted-foreground" />
+          Following {followedPubkeys.length} people
+        </span>
+        {followsYou && (
+          <span className="flex items-center gap-1">
+            <Sparkles className="size-3 text-muted-foreground" />
+            Follows you
+          </span>
+        )}
+      </div>
+    </BaseEventContainer>
+  );
+}
+
+/**
+ * Kind 3 Detail View - Full follow list
+ * Shows all followed users in order
+ */
+export function Kind3DetailView({ event }: { event: any }) {
+  const { state } = useGrimoire();
+
+  // Extract followed pubkeys from p tags
+  const followedPubkeys = event.tags
+    .filter((tag: string[]) => tag[0] === "p" && tag[1].length === 64)
+    .map((tag: string[]) => tag[1]);
+
+  const followsYou = state.activeAccount?.pubkey
+    ? followedPubkeys.includes(state.activeAccount.pubkey)
+    : false;
+
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <Users className="size-5" />
+          <span className="text-lg font-semibold">Contacts</span>
+        </div>
+
+        <div className="flex flex-col gap-1 text-sm">
+          <span>Following {followedPubkeys.length} people</span>
+          {followsYou && (
+            <span className="flex items-center gap-1">
+              <Sparkles className="size-4  text-muted-foreground" />
+              Follows you
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="border-t border-border pt-4">
+        <div className="flex flex-col gap-2">
+          {followedPubkeys.map((pubkey: string) => (
+            <div key={pubkey} className="flex items-center gap-2 text-sm">
+              <span className="text-muted-foreground">•</span>
+              <UserName pubkey={pubkey} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/nostr/kinds/index.tsx

@@ -1,5 +1,6 @@
 import { Kind0Renderer } from "./Kind0Renderer";
 import { Kind1Renderer } from "./Kind1Renderer";
+import { Kind3Renderer } from "./Kind3Renderer";
 import { Kind6Renderer } from "./Kind6Renderer";
 import { Kind7Renderer } from "./Kind7Renderer";
 import { Kind20Renderer } from "./Kind20Renderer";
@@ -19,6 +20,7 @@ import { BaseEventContainer, type BaseEventProps } from "./BaseEventRenderer";
 const kindRenderers: Record<number, React.ComponentType<BaseEventProps>> = {
   0: Kind0Renderer, // Profile Metadata
   1: Kind1Renderer, // Short Text Note
+  3: Kind3Renderer, // Contact List
   6: Kind6Renderer, // Repost
   7: Kind7Renderer, // Reaction
   20: Kind20Renderer, // Picture (NIP-68)