From 5657c0d7cd60e16f71eee830a8a107f241593a42 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 2 Mar 2026 13:30:22 -0600
Subject: [PATCH] Improve NIP-72 community context for comments: show 'Posted
 in' with community preview

---
 src/components/CommentContext.tsx        | 15 +++--
 src/components/ExternalContentHeader.tsx | 76 +++++++++++++++++++++++-
 src/pages/PostDetailPage.tsx             | 22 ++++++-
 3 files changed, 104 insertions(+), 9 deletions(-)

diff --git a/src/components/CommentContext.tsx b/src/components/CommentContext.tsx
index ccc24ee6..9bc1abd4 100644
--- a/src/components/CommentContext.tsx
+++ b/src/components/CommentContext.tsx
@@ -60,14 +60,14 @@ function getEventDisplayName(event: NostrEvent): string {
   const title = event.tags.find(([name]) => name === 'title')?.[1];
   if (title) return title;
 
+  // Try name tag (used by communities, emoji packs, etc.)
+  const name = event.tags.find(([name]) => name === 'name')?.[1];
+  if (name) return name;
+
   // Try d tag (addressable events use this as an identifier)
   const dTag = event.tags.find(([name]) => name === 'd')?.[1];
   if (dTag) return dTag;
 
-  // Try name tag (used by some events)
-  const name = event.tags.find(([name]) => name === 'name')?.[1];
-  if (name) return name;
-
   // Fall back to kind label from EXTRA_KINDS
   const kindDef = EXTRA_KINDS.find((def) =>
     def.subKinds?.some((sub) => sub.kind === event.kind) || def.kind === event.kind,
@@ -181,10 +181,13 @@ function ProfileCommentContext({ pubkey, className }: { pubkey: string; classNam
 function GenericAddrCommentContext({ root, className }: { root: CommentRoot; className?: string }) {
   const { data: event, isLoading } = useAddrEvent(root.addr);
 
+  const isCommunity = root.rootKind === '34550' || root.addr?.kind === 34550;
+  const prefix = isCommunity ? 'Posted in' : 'Commenting on';
+
   if (isLoading) {
     return (
       <div className={className || 'flex items-center gap-x-1 text-sm text-muted-foreground mt-2 mb-1'}>
-        <span className="shrink-0">Commenting on</span>
+        <span className="shrink-0">{prefix}</span>
         <Skeleton className="h-3.5 w-24 inline-block" />
       </div>
     );
@@ -195,7 +198,7 @@ function GenericAddrCommentContext({ root, className }: { root: CommentRoot; cla
 
   return (
     <div className={className || 'flex items-center gap-x-1 text-sm text-muted-foreground mt-2 mb-1 min-w-0 overflow-hidden'}>
-      <span className="shrink-0">Commenting on</span>
+      <span className="shrink-0">{prefix}</span>
       {link ? (
         <Link
           to={link}
diff --git a/src/components/ExternalContentHeader.tsx b/src/components/ExternalContentHeader.tsx
index 8e5685ed..82ccda6f 100644
--- a/src/components/ExternalContentHeader.tsx
+++ b/src/components/ExternalContentHeader.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import { BookOpen, ExternalLink, Globe, MapPin, User } from 'lucide-react';
+import { BookOpen, ExternalLink, Globe, MapPin, User, Users } from 'lucide-react';
+import { nip19 } from 'nostr-tools';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { Skeleton } from '@/components/ui/skeleton';
 import { ExternalFavicon } from '@/components/ExternalFavicon';
@@ -8,6 +9,7 @@ import { LinkEmbed } from '@/components/LinkEmbed';
 import { extractYouTubeId } from '@/lib/linkEmbed';
 import { useLinkPreview } from '@/hooks/useLinkPreview';
 import { useBookInfo } from '@/hooks/useBookInfo';
+import { useAddrEvent } from '@/hooks/useEvent';
 import { useAuthor } from '@/hooks/useAuthor';
 import { useProfileUrl } from '@/hooks/useProfileUrl';
 import { genUserName } from '@/lib/genUserName';
@@ -361,6 +363,78 @@ function CountryPreview({ code, link }: { code: string; link: string }) {
  * on its detail page when the root is a kind 0 profile event.
  * Links to the profile page.
  */
+/**
+ * Compact preview of a NIP-72 community, shown above a kind 1111 comment
+ * on its detail page when the root is a kind 34550 community definition.
+ * Links to the community detail page.
+ */
+export function CommunityPreview({ addr }: { addr: { kind: number; pubkey: string; identifier: string } }) {
+  const { data: event, isLoading } = useAddrEvent(addr);
+
+  const communityName = event?.tags.find(([n]) => n === 'name')?.[1]
+    || event?.tags.find(([n]) => n === 'd')?.[1]
+    || 'Community';
+  const communityImage = event?.tags.find(([n]) => n === 'image')?.[1];
+  const communityDescription = event?.tags.find(([n]) => n === 'description')?.[1];
+  const moderatorCount = event?.tags.filter(([n, , , role]) => n === 'p' && role === 'moderator').length ?? 0;
+
+  const link = useMemo(() => {
+    return `/${nip19.naddrEncode({ kind: addr.kind, pubkey: addr.pubkey, identifier: addr.identifier })}`;
+  }, [addr]);
+
+  if (isLoading) {
+    return (
+      <div className="px-4 py-3 border-b border-border">
+        <div className="flex items-center gap-3">
+          <Skeleton className="size-12 rounded-lg shrink-0" />
+          <div className="flex-1 min-w-0 space-y-1.5">
+            <Skeleton className="h-3 w-16" />
+            <Skeleton className="h-4 w-32" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Link
+      to={link}
+      className="flex items-center gap-3 px-4 py-3 border-b border-border hover:bg-secondary/30 transition-colors"
+    >
+      {communityImage ? (
+        <img
+          src={communityImage}
+          alt={communityName}
+          className="size-12 rounded-lg object-cover shrink-0"
+          loading="lazy"
+        />
+      ) : (
+        <div className="size-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
+          <Users className="size-5 text-primary/50" />
+        </div>
+      )}
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <Users className="size-3 shrink-0" />
+          <span>Community</span>
+          {moderatorCount > 0 && (
+            <span className="text-muted-foreground/60">&middot; {moderatorCount} mod{moderatorCount !== 1 ? 's' : ''}</span>
+          )}
+        </div>
+        <p className="text-sm font-medium truncate mt-0.5">
+          {communityName}
+        </p>
+        {communityDescription && (
+          <p className="text-xs text-muted-foreground truncate">
+            {communityDescription}
+          </p>
+        )}
+      </div>
+    </Link>
+  );
+}
+
 export function ProfilePreview({ pubkey }: { pubkey: string }) {
   const author = useAuthor(pubkey);
   const metadata = author.data?.metadata;
diff --git a/src/pages/PostDetailPage.tsx b/src/pages/PostDetailPage.tsx
index a5b920dc..6267ab0b 100644
--- a/src/pages/PostDetailPage.tsx
+++ b/src/pages/PostDetailPage.tsx
@@ -71,7 +71,7 @@ import { ProfileHoverCard } from '@/components/ProfileHoverCard';
 import { useProfileUrl } from '@/hooks/useProfileUrl';
 import { ContentWarningGuard } from '@/components/ContentWarningGuard';
 import { MutedContentGuard } from '@/components/MutedContentGuard';
-import { ExternalContentPreview, ProfilePreview } from '@/components/ExternalContentHeader';
+import { ExternalContentPreview, ProfilePreview, CommunityPreview } from '@/components/ExternalContentHeader';
 import { getParentEventId, isReplyEvent } from '@/lib/nostrEvents';
 import { EmojiPackContent } from '@/components/EmojiPackContent';
 import { CommunityContent } from '@/components/CommunityContent';
@@ -851,6 +851,21 @@ function PostDetailContent({ event }: { event: NostrEvent }) {
     return parts[1] || undefined;
   }, [event, isComment]);
 
+  // For kind 1111 comments on a community (kind 34550), extract the addr for the community preview
+  const communityRootAddr = useMemo(() => {
+    if (!isComment) return undefined;
+    const kTag = event.tags.find(([n]) => n === 'K')?.[1];
+    if (kTag !== '34550') return undefined;
+    const aTag = event.tags.find(([n]) => n === 'A')?.[1];
+    if (!aTag) return undefined;
+    const parts = aTag.split(':');
+    const kind = parseInt(parts[0], 10);
+    const pubkey = parts[1];
+    const identifier = parts.slice(2).join(':');
+    if (!pubkey || isNaN(kind)) return undefined;
+    return { kind, pubkey, identifier };
+  }, [event, isComment]);
+
   // Keep the focused post pinned to top while ancestor content loads above it.
   // A ResizeObserver on the ancestor container re-scrolls on every layout shift
   // (image loads, skeleton→content swaps) for the first few seconds.
@@ -900,13 +915,16 @@ function PostDetailContent({ event }: { event: NostrEvent }) {
 
   return (
     <div>
-      {/* Content preview for kind 1111 comments: external content or profile */}
+      {/* Content preview for kind 1111 comments: external content, profile, or community */}
       {externalIdentifier && (
         <ExternalContentPreview identifier={externalIdentifier} />
       )}
       {profileRootPubkey && (
         <ProfilePreview pubkey={profileRootPubkey} />
       )}
+      {communityRootAddr && (
+        <CommunityPreview addr={communityRootAddr} />
+      )}
 
       {/* Ancestor thread chain if this is a reply */}
       {parentEventId && (