From 7706acaafa89691dba33c216e6287a8405c4c302 Mon Sep 17 00:00:00 2001
From: polwex <polwex@sortug.com>
Date: Tue, 18 Nov 2025 08:32:45 +0700
Subject: gui fixes to nostr post rendering, added nostr-tools lib for primal
 compatibility

---
 gui/src/components/post/Footer.tsx             |  1 -
 gui/src/components/post/Header.tsx             | 10 +++-------
 gui/src/components/post/Post.tsx               |  4 ++--
 gui/src/components/post/wrappers/NostrIcon.tsx | 15 +++++++++++++--
 4 files changed, 18 insertions(+), 12 deletions(-)

(limited to 'gui/src/components/post')

diff --git a/gui/src/components/post/Footer.tsx b/gui/src/components/post/Footer.tsx
index 87f45f3..41752fc 100644
--- a/gui/src/components/post/Footer.tsx
+++ b/gui/src/components/post/Footer.tsx
@@ -41,7 +41,6 @@ function Footer({ poast, refetch }: PostProps) {
     // Scroll to top where composer is located
     window.scrollTo({ top: 0, behavior: "smooth" });
   }
-  console.log({ poast });
   const childrenCount = poast.children
     ? poast.children.length
       ? poast.children.length
diff --git a/gui/src/components/post/Header.tsx b/gui/src/components/post/Header.tsx
index 0dfd5e4..b0822b4 100644
--- a/gui/src/components/post/Header.tsx
+++ b/gui/src/components/post/Header.tsx
@@ -1,11 +1,9 @@
 import { date_diff } from "@/logic/utils";
 import type { PostProps } from "./Post";
 import { useLocation } from "wouter";
-import useLocalState from "@/state/state";
 function Header(props: PostProps) {
   const [_, navigate] = useLocation();
-  const profiles = useLocalState((s) => s.profiles);
-  const profile = profiles.get(props.poast.author);
+  const { profile } = props;
   // console.log("profile", profile);
   // console.log(props.poast.author.length, "length");
   function go(e: React.MouseEvent) {
@@ -21,13 +19,11 @@ function Header(props: PostProps) {
   const name = profile ? (
     profile.name
   ) : (
-    <div className="name cp">
-      <p className="p-only">{poast.author}</p>
-    </div>
+    <p className="p-only">{poast.author}</p>
   );
   return (
     <header>
-      <div className="author flex-align" role="link" onMouseUp={go}>
+      <div className="cp author flex-align name" role="link" onMouseUp={go}>
         {name}
       </div>
       <div role="link" onMouseUp={openThread} className="date">
diff --git a/gui/src/components/post/Post.tsx b/gui/src/components/post/Post.tsx
index 2965040..2d9a09a 100644
--- a/gui/src/components/post/Post.tsx
+++ b/gui/src/components/post/Post.tsx
@@ -22,7 +22,7 @@ export interface PostProps {
   profile?: UserProfile;
 }
 function Post(props: PostProps) {
-  console.log("post", props);
+  // console.log("post", props);
   const { poast } = props;
   if (!poast || poast.contents === null) {
     return null;
@@ -60,7 +60,7 @@ function TrillPost(props: PostProps) {
     setModal(<ShipModal ship={poast.author} />);
   }
   const avatar = profile ? (
-    <div className="avatar cp" role="link" onMouseUp={openModal}>
+    <div className="avatar sigil cp" role="link" onMouseUp={openModal}>
       <img src={profile.picture} />
     </div>
   ) : (
diff --git a/gui/src/components/post/wrappers/NostrIcon.tsx b/gui/src/components/post/wrappers/NostrIcon.tsx
index 30fbfe9..f39d689 100644
--- a/gui/src/components/post/wrappers/NostrIcon.tsx
+++ b/gui/src/components/post/wrappers/NostrIcon.tsx
@@ -2,14 +2,23 @@ import Icon from "@/components/Icon";
 import useLocalState from "@/state/state";
 import toast from "react-hot-toast";
 import type { Poast } from "@/types/trill";
+import { generateNevent } from "@/logic/nostr";
 export default function ({ poast }: { poast: Poast }) {
   const { relays, api } = useLocalState((s) => ({
     relays: s.relays,
     api: s.api,
   }));
 
-  async function sendToRelay(e: React.MouseEvent) {
+  async function handleClick(e: React.MouseEvent) {
     e.stopPropagation();
+    if (poast.event) {
+      const nevent = generateNevent(poast.event);
+      console.log({ nevent });
+      const href = `https://primal.net/e/${nevent}`;
+      window.open(href, "_blank");
+    } else sendToRelay(e);
+  }
+  async function sendToRelay(e: React.MouseEvent) {
     //
     const urls = Object.keys(relays);
     await api!.relayPost(poast.host, poast.id, urls);
@@ -18,8 +27,10 @@ export default function ({ poast }: { poast: Poast }) {
   // TODO round up all helpers
 
   return (
-    <div className="icon" role="link" onMouseUp={sendToRelay}>
+    <div className="icon" role="link" onMouseUp={handleClick}>
       <Icon name="nostr" size={20} title="relay to nostr" />
     </div>
   );
 }
+
+// npub1w8k2hk9kkv653cr4luqmx9tglldpn59vy7yqvlvex2xxmeygt96s4dlh8p
-- 
cgit v1.2.3