gui fixes to nostr post rendering, added nostr-tools lib for primal compatibility

13 files changed, 201 insertions, 117 deletions

diff --git a/gui/src/components/feed/PostList.tsx b/gui/src/components/feed/PostList.tsx
index 0d01bd2..12b58b4 100644
--- a/gui/src/components/feed/PostList.tsx
+++ b/gui/src/components/feed/PostList.tsx
@@ -1,10 +1,12 @@
 import TrillPost from "@/components/post/Post";
 import type { FC } from "@/types/trill";
+import useLocalState from "@/state/state";
 // import { useEffect } from "react";
 // import { useQueryClient } from "@tanstack/react-query";
 // import { toFull } from "../thread/helpers";
 
 function TrillFeed({ data, refetch }: { data: FC; refetch: Function }) {
+  const { profiles } = useLocalState((s) => ({ profiles: s.profiles }));
   // const qc = useQueryClient();
   // useEffect(() => {
   //   Object.values(data.feed).forEach((poast) => {
@@ -25,9 +27,18 @@ function TrillFeed({ data, refetch }: { data: FC; refetch: Function }) {
         .sort()
         .reverse()
         .slice(0, 50)
-        .map((i) => (
-          <TrillPost key={i} poast={data.feed[i]} refetch={refetch} />
-        ))}
+        .map((i) => {
+          const poast = data.feed[i];
+          const profile = profiles.get(poast.author);
+          return (
+            <TrillPost
+              key={i}
+              poast={poast}
+              profile={profile}
+              refetch={refetch}
+            />
+          );
+        })}
     </>
   );
 }
diff --git a/gui/src/components/nostr/Feed.tsx b/gui/src/components/nostr/Feed.tsx
new file mode 100644
index 0000000..0e74cea
--- /dev/null
+++ b/gui/src/components/nostr/Feed.tsx
@@ -0,0 +1,115 @@
+import PostList from "@/components/feed/PostList";
+import useLocalState from "@/state/state";
+import spinner from "@/assets/triangles.svg";
+import { useState } from "react";
+import { eventsToFc } from "@/logic/nostrill";
+import Icon from "@/components/Icon";
+import toast from "react-hot-toast";
+
+export default function Nostr() {
+  const { nostrFeed, api, relays } = useLocalState((s) => ({
+    nostrFeed: s.nostrFeed,
+    api: s.api,
+    relays: s.relays,
+  }));
+  console.log({ relays });
+  const [isSyncing, setIsSyncing] = useState(false);
+  const feed = eventsToFc(nostrFeed);
+  console.log({ feed });
+  const refetch = () => feed;
+
+  const handleResync = async () => {
+    if (!api) return;
+
+    setIsSyncing(true);
+    try {
+      await api.syncRelays();
+      toast.success("Nostr feed sync initiated");
+    } catch (error) {
+      toast.error("Failed to sync Nostr feed");
+      console.error("Sync error:", error);
+    } finally {
+      setIsSyncing(false);
+    }
+  };
+
+  if (Object.keys(relays).length === 0)
+    return (
+      <div className="nostr-empty-state">
+        <div className="empty-content">
+          <Icon name="nostr" size={48} color="textMuted" />
+          <h3>No Nostr Relays Set Up</h3>
+          <p>
+            You haven't set any Nostr Relays to sync data from. You can do so in
+            the Settings page.
+          </p>
+          <p>
+            If you don't know of any, we recommend the following public relays:
+          </p>
+          <ul>
+            <li>wss://nos.lol</li>
+            <li>wss://relay.damus.io</li>
+          </ul>
+        </div>
+      </div>
+    );
+  // Show empty state with resync option when no feed data
+  if (!feed || !feed.feed || Object.keys(feed.feed).length === 0) {
+    return (
+      <div className="nostr-empty-state">
+        <div className="empty-content">
+          <Icon name="nostr" size={48} color="textMuted" />
+          <h3>No Nostr Posts</h3>
+          <p>
+            Your Nostr feed appears to be empty. Try syncing with your relays to
+            fetch the latest posts.
+          </p>
+          <button
+            onClick={handleResync}
+            disabled={isSyncing}
+            className="resync-btn"
+          >
+            {isSyncing ? (
+              <>
+                <img src={spinner} alt="Loading" className="btn-spinner" />
+                Syncing...
+              </>
+            ) : (
+              <>
+                <Icon name="settings" size={16} />
+                Sync Relays
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Show feed with resync button in header
+  return (
+    <div className="nostr-feed">
+      <div className="nostr-header">
+        <div className="feed-info">
+          <h4>Nostr Feed</h4>
+          <span className="post-count">
+            {Object.keys(feed.feed).length} posts
+          </span>
+        </div>
+        <button
+          onClick={handleResync}
+          disabled={isSyncing}
+          className="resync-btn-small"
+          title="Sync with Nostr relays"
+        >
+          {isSyncing ? (
+            <img src={spinner} alt="Loading" className="btn-spinner-small" />
+          ) : (
+            <Icon name="settings" size={16} />
+          )}
+        </button>
+      </div>
+      <PostList data={feed} refetch={refetch} />
+    </div>
+  );
+}
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
diff --git a/gui/src/logic/nostr.ts b/gui/src/logic/nostr.ts
new file mode 100644
index 0000000..b85047f
--- /dev/null
+++ b/gui/src/logic/nostr.ts
@@ -0,0 +1,33 @@
+// import { generateSecretKey, getPublicKey } from "nostr-tools/pure";
+import * as nip19 from "nostr-tools/nip19";
+import type { Event } from "@/types/nostr";
+
+export function generateNevent(event: Event) {
+  const evp: nip19.EventPointer = {
+    id: event.id,
+    author: event.pubkey,
+    kind: event.kind,
+  };
+  const nev = nip19.neventEncode(evp);
+  return nev;
+}
+
+// let sk = generateSecretKey()
+// let nsec = nip19.nsecEncode(sk)
+// let { type, data } = nip19.decode(nsec)
+// assert(type === 'nsec')
+// assert(data === sk)
+
+// let pk = getPublicKey(generateSecretKey())
+// let npub = nip19.npubEncode(pk)
+// let { type, data } = nip19.decode(npub)
+// assert(type === 'npub')
+// assert(data === pk)
+
+// let pk = getPublicKey(generateSecretKey())
+// let relays = ['wss://relay.nostr.example.mydomain.example.com', 'wss://nostr.banana.com']
+// let nprofile = nip19.nprofileEncode({ pubkey: pk, relays })
+// let { type, data } = nip19.decode(nprofile)
+// assert(type === 'nprofile')
+// assert(data.pubkey === pk)
+// assert(data.relays.length === 2)
diff --git a/gui/src/logic/nostrill.ts b/gui/src/logic/nostrill.ts
index bd5fc9c..97d2156 100644
--- a/gui/src/logic/nostrill.ts
+++ b/gui/src/logic/nostrill.ts
@@ -36,12 +36,13 @@ export function eventToPoast(event: Event): Poast | null {
     time: ts,
     engagement: engagementBunt,
     children: [],
+    event,
   };
   for (const tag of event.tags) {
     const f = tag[0];
     if (!f) continue;
     const ff = f.toLowerCase();
-    console.log("tag", ff);
+    // console.log("tag", ff);
     if (ff === "e") {
       const [, eventId, _relayURL, marker, _pubkey, ..._] = tag;
       // TODO
diff --git a/gui/src/pages/Feed.tsx b/gui/src/pages/Feed.tsx
index ac596dd..02f7b1a 100644
--- a/gui/src/pages/Feed.tsx
+++ b/gui/src/pages/Feed.tsx
@@ -8,10 +8,8 @@ import { useParams } from "wouter";
 import spinner from "@/assets/triangles.svg";
 import { useState } from "react";
 import Composer from "@/components/composer/Composer";
-import Icon from "@/components/Icon";
-import toast from "react-hot-toast";
-import { eventsToFc } from "@/logic/nostrill";
 import { ErrorPage } from "@/Router";
+import NostrFeed from "@/components/nostr/Feed";
 
 type FeedType = "global" | "following" | "nostr";
 function Loader() {
@@ -59,7 +57,7 @@ function FeedPage({ t }: { t: FeedType }) {
         ) : active === "following" ? (
           <Following />
         ) : active === "nostr" ? (
-          <Nostr />
+          <NostrFeed />
         ) : null}
       </div>
     </main>
@@ -102,91 +100,6 @@ function Following() {
     </div>
   );
 }
-function Nostr() {
-  const { nostrFeed, api } = useLocalState((s) => ({
-    nostrFeed: s.nostrFeed,
-    api: s.api,
-  }));
-  const [isSyncing, setIsSyncing] = useState(false);
-  const feed = eventsToFc(nostrFeed);
-  console.log({ feed });
-  const refetch = () => feed;
-
-  const handleResync = async () => {
-    if (!api) return;
-
-    setIsSyncing(true);
-    try {
-      await api.syncRelays();
-      toast.success("Nostr feed sync initiated");
-    } catch (error) {
-      toast.error("Failed to sync Nostr feed");
-      console.error("Sync error:", error);
-    } finally {
-      setIsSyncing(false);
-    }
-  };
-
-  // Show empty state with resync option when no feed data
-  if (!feed || !feed.feed || Object.keys(feed.feed).length === 0) {
-    return (
-      <div className="nostr-empty-state">
-        <div className="empty-content">
-          <Icon name="nostr" size={48} color="textMuted" />
-          <h3>No Nostr Posts</h3>
-          <p>
-            Your Nostr feed appears to be empty. Try syncing with your relays to
-            fetch the latest posts.
-          </p>
-          <button
-            onClick={handleResync}
-            disabled={isSyncing}
-            className="resync-btn"
-          >
-            {isSyncing ? (
-              <>
-                <img src={spinner} alt="Loading" className="btn-spinner" />
-                Syncing...
-              </>
-            ) : (
-              <>
-                <Icon name="settings" size={16} />
-                Sync Relays
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  // Show feed with resync button in header
-  return (
-    <div className="nostr-feed">
-      <div className="nostr-header">
-        <div className="feed-info">
-          <h4>Nostr Feed</h4>
-          <span className="post-count">
-            {Object.keys(feed.feed).length} posts
-          </span>
-        </div>
-        <button
-          onClick={handleResync}
-          disabled={isSyncing}
-          className="resync-btn-small"
-          title="Sync with Nostr relays"
-        >
-          {isSyncing ? (
-            <img src={spinner} alt="Loading" className="btn-spinner-small" />
-          ) : (
-            <Icon name="settings" size={16} />
-          )}
-        </button>
-      </div>
-      <PostList data={feed} refetch={refetch} />
-    </div>
-  );
-}
 
 export default Loader;
 // TODO
diff --git a/gui/src/state/state.ts b/gui/src/state/state.ts
index 9bd5e0e..7d433f4 100644
--- a/gui/src/state/state.ts
+++ b/gui/src/state/state.ts
@@ -90,6 +90,9 @@ export const useStore = creator((set, get) => ({
             set({ following });
           }
         }
+        if ("nostr" in data.fact) {
+          set({ nostrFeed: data.fact.nostr });
+        }
       }
     });
     set({ api });
diff --git a/gui/src/styles/styles.css b/gui/src/styles/styles.css
index c105656..ac3c71b 100644
--- a/gui/src/styles/styles.css
+++ b/gui/src/styles/styles.css
@@ -555,6 +555,13 @@ h6 {
       & .author {
         flex: unset;
         gap: 0;
+        margin: 0.7rem 0.3rem;
+        font-weight: 700;
+        flex-grow: 1;
+
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
 
         & .name {
           display: flex;
@@ -566,6 +573,11 @@ h6 {
         }
       }
 
+      post-body {
+        max-height: 300px;
+        overflow-y: auto;
+      }
+
       & .date {
         color: grey;
       }
diff --git a/gui/src/styles/trill.css b/gui/src/styles/trill.css
index 0a21ed5..0b1650c 100644
--- a/gui/src/styles/trill.css
+++ b/gui/src/styles/trill.css
@@ -25,10 +25,6 @@
   /* min-height: 150px; */
 }
 
-.trill-post .author {
-  flex: 1 0 auto;
-}
-
 .trill-reply-thread {
   border-top: 1px solid var(--text-color);
 }
@@ -74,14 +70,6 @@
   font-size: 1rem;
 }
 
-.trill-post .p-only {
-  margin: 0.7rem 0.3rem;
-  font-weight: 700;
-}
-
-.trill-post .p {
-  /* margin-top: -5px; */
-}
 
 .trill-post a {
   text-decoration: 0;
diff --git a/gui/src/types/trill.ts b/gui/src/types/trill.ts
index 984b1f3..a2fccc2 100644
--- a/gui/src/types/trill.ts
+++ b/gui/src/types/trill.ts
@@ -1,3 +1,4 @@
+import type { Event } from "./nostr";
 import type { Ship } from "./urbit";
 
 export type SortugRef = {
@@ -48,6 +49,7 @@ export type Poast = {
   engagement: Engagement;
   tlonRumor?: boolean;
   json?: { origin: ExternalApp; content: string }; // for rumor quoting
+  event?: Event; // for Nostr posts
 };
 export type FullNode = Omit<Poast, "children"> & {
   children: FullFeed;