feat: render pubkey list mentions

packages/app/src/Element/FollowListBase.tsx

@@ -13,8 +13,9 @@ export interface FollowListBaseProps {
   title?: ReactNode | string;
   showFollowAll?: boolean;
   showAbout?: boolean;
+  className?: string;
 }
-export default function FollowListBase({ pubkeys, title, showFollowAll, showAbout }: FollowListBaseProps) {
+export default function FollowListBase({ pubkeys, title, showFollowAll, showAbout, className }: FollowListBaseProps) {
   const publisher = useEventPublisher();
   const { follows, relays } = useLogin();
 
@@ -26,7 +27,7 @@ export default function FollowListBase({ pubkeys, title, showFollowAll, showAbou
   }
 
   return (
-    <>
+    <div className={className}>
       {(showFollowAll ?? true) && (
         <div className="flex mt10 mb10">
           <div className="f-grow bold">{title}</div>
@@ -38,6 +39,6 @@ export default function FollowListBase({ pubkeys, title, showFollowAll, showAbou
       {pubkeys?.map(a => (
         <ProfilePreview pubkey={a} key={a} options={{ about: showAbout }} />
       ))}
-    </>
+    </div>
   );
 }

packages/app/src/Element/Note.css

@@ -59,6 +59,8 @@
 
 .note-quote {
   border: 1px solid var(--gray);
+  border-radius: 10px;
+  padding: 5px;
 }
 
 .note-quote.note > .body {

packages/app/src/Element/Note.tsx

@@ -31,6 +31,7 @@ import useLogin from "Hooks/useLogin";
 import { setBookmarked, setPinned } from "Login";
 import { NostrFileElement } from "Element/NostrFileHeader";
 import ZapstrEmbed from "Element/ZapstrEmbed";
+import PubkeyList from "Element/PubkeyList";
 
 import messages from "./messages";
 
@@ -74,14 +75,19 @@ const HiddenNote = ({ children }: { children: React.ReactNode }) => {
 };
 
 export default function Note(props: NoteProps) {
-  const { data: ev, related, highlight, options: opt, ignoreModeration = false } = props;
+  const { data: ev, related, highlight, options: opt, ignoreModeration = false, className } = props;
 
   if (ev.kind === EventKind.FileHeader) {
     return <NostrFileElement ev={ev} />;
   }
-  if (ev.kind === 31337) {
+  if (ev.kind === EventKind.ZapstrTrack) {
     return <ZapstrEmbed ev={ev} />;
   }
+  if (ev.kind === EventKind.PubkeyLists) {
+    return <PubkeyList ev={ev} className={className} />;
+  }
+
+  const baseClassName = `note card${className ? ` ${className}` : ""}`;
   const navigate = useNavigate();
   const [showReactions, setShowReactions] = useState(false);
   const deletions = useMemo(() => getReactions(related, ev.id, EventKind.Deletion), [related]);
@@ -90,7 +96,6 @@ export default function Note(props: NoteProps) {
   const { ref, inView, entry } = useInView({ triggerOnce: true });
   const [extendable, setExtendable] = useState<boolean>(false);
   const [showMore, setShowMore] = useState<boolean>(false);
-  const baseClassName = `note card ${props.className ? props.className : ""}`;
   const login = useLogin();
   const { pinned, bookmarked } = login;
   const publisher = useEventPublisher();

packages/app/src/Element/PubkeyList.tsx

@@ -0,0 +1,8 @@
+import { RawEvent } from "@snort/nostr";
+import { dedupe } from "Util";
+import FollowListBase from "./FollowListBase";
+
+export default function PubkeyList({ ev, className }: { ev: RawEvent; className?: string }) {
+  const ids = dedupe(ev.tags.filter(a => a[0] === "p").map(a => a[1]));
+  return <FollowListBase pubkeys={ids} showAbout={true} className={className} />;
+}

packages/nostr/src/legacy/EventKind.ts

@@ -20,6 +20,7 @@ enum EventKind {
   TagLists = 30002, // NIP-51c
   Badge = 30009, // NIP-58
   ProfileBadges = 30008, // NIP-58
+  ZapstrTrack = 31337,
   ZapRequest = 9734, // NIP 57
   ZapReceipt = 9735, // NIP 57
   HttpAuthentication = 27235, // NIP XX - HTTP Authentication