From aa871b32472d4ecb8c4284603ff61a04263419e6 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Wed, 5 Jul 2023 21:45:23 +0200
Subject: [PATCH] feat: popout chat link

---
 public/icons.svg          |  4 ++
 src/element/icon.tsx      |  9 ++++-
 src/element/live-chat.css | 16 ++++++--
 src/element/live-chat.tsx | 80 +++++++++++++++++++++++++++------------
 4 files changed, 80 insertions(+), 29 deletions(-)

diff --git a/public/icons.svg b/public/icons.svg
index d8f8556..1e2f16a 100644
--- a/public/icons.svg
+++ b/public/icons.svg
@@ -24,5 +24,9 @@
     <symbol id="face" viewBox="0 0 24 24" fill="none">
       <path d="M15 9H15.01M9 9H9.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM15.5 9C15.5 9.27614 15.2761 9.5 15 9.5C14.7239 9.5 14.5 9.27614 14.5 9C14.5 8.72386 14.7239 8.5 15 8.5C15.2761 8.5 15.5 8.72386 15.5 9ZM9.5 9C9.5 9.27614 9.27614 9.5 9 9.5C8.72386 9.5 8.5 9.27614 8.5 9C8.5 8.72386 8.72386 8.5 9 8.5C9.27614 8.5 9.5 8.72386 9.5 9ZM12 17.5C14.5005 17.5 16.5 15.667 16.5 14H7.5C7.5 15.667 9.4995 17.5 12 17.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     </symbol>
+    <symbol id="link" viewBox="0 0 32 32" fill="none">
+      <path d="M22 14L22 10M22 10H18M22 10L16 16M14.6667 10H13.2C12.0799 10 11.5198 10 11.092 10.218C10.7157 10.4097 10.4097 10.7157 10.218 11.092C10 11.5198 10 12.0799 10 13.2V18.8C10 19.9201 10 20.4802 10.218 20.908C10.4097 21.2843 10.7157 21.5903 11.092 21.782C11.5198 22 12.0799 22 13.2 22H18.8C19.9201 22 20.4802 22 20.908 21.782C21.2843 21.5903 21.5903 21.2843 21.782 20.908C22 20.4802 22 19.9201 22 18.8V17.3333" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+    </symbol>
   </defs>
 </svg>
diff --git a/src/element/icon.tsx b/src/element/icon.tsx
index bf3473c..54d4a1d 100644
--- a/src/element/icon.tsx
+++ b/src/element/icon.tsx
@@ -12,8 +12,13 @@ export function Icon(props: Props) {
   const href = `/icons.svg#` + props.name;
 
   return (
-    <svg width={size} height={size} className={props.className} onClick={props.onClick}>
+    <svg
+      width={size}
+      height={size}
+      className={props.className}
+      onClick={props.onClick}
+    >
       <use href={href} />
     </svg>
   );
-};
+}
diff --git a/src/element/live-chat.css b/src/element/live-chat.css
index 1481a6f..6c0f4f1 100644
--- a/src/element/live-chat.css
+++ b/src/element/live-chat.css
@@ -47,10 +47,20 @@
   }
 }
 
-.live-chat>.header {
-  font-weight: 600;
+.live-chat > .header {
+  display: flex;
+  justify-content: space-between
+}
+
+.live-chat .header .title {
   font-size: 24px;
-  line-height: 30px;
+  font-weight: 600;
+  line-height: normal;
+  margin: 0;
+}
+
+.live-chat .header .popout-link {
+  color: #FFFFFF80;
 }
 
 .live-chat>.messages {
diff --git a/src/element/live-chat.tsx b/src/element/live-chat.tsx
index 0cc061b..b35ceca 100644
--- a/src/element/live-chat.tsx
+++ b/src/element/live-chat.tsx
@@ -1,14 +1,13 @@
 import "./live-chat.css";
 import {
   EventKind,
+  NostrPrefix,
   NostrLink,
   ParsedZap,
   parseZap,
+  encodeTLV,
 } from "@snort/system";
-import {
-  useEffect,
-  useMemo,
-} from "react";
+import { useEffect, useMemo } from "react";
 
 import { System } from "../index";
 import { useLiveChatFeed } from "../hooks/live-chat";
@@ -54,11 +53,21 @@ function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
   );
 }
 
-export function LiveChat({ link, options, height, }: { link: NostrLink, options?: LiveChatOptions, height?: number }) {
+export function LiveChat({
+  link,
+  options,
+  height,
+}: {
+  link: NostrLink;
+  options?: LiveChatOptions;
+  height?: number;
+}) {
   const feed = useLiveChatFeed(link);
   const login = useLogin();
   useEffect(() => {
-    const pubkeys = [...new Set(feed.zaps.flatMap(a => [a.pubkey, findTag(a, "p")!]))];
+    const pubkeys = [
+      ...new Set(feed.zaps.flatMap((a) => [a.pubkey, findTag(a, "p")!])),
+    ];
     System.ProfileLoader.TrackMetadata(pubkeys);
     return () => System.ProfileLoader.UntrackMetadata(pubkeys);
   }, [feed.zaps]);
@@ -73,11 +82,30 @@ export function LiveChat({ link, options, height, }: { link: NostrLink, options?
   }, [feed.messages, feed.zaps]);
   const { data: ev } = useEventFeed(link);
   const streamer = getHost(ev);
+  const naddr = useMemo(() => {
+    return encodeTLV(
+      NostrPrefix.Address,
+      link.id,
+      undefined,
+      link.kind,
+      link.author
+    );
+  }, [link]);
 
   return (
     <div className="live-chat" style={height ? { height: `${height}px` } : {}}>
       {(options?.showHeader ?? true) && (
-        <div className="header">Stream Chat</div>
+        <div className="header">
+          <h2 className="title">Stream Chat</h2>
+          <a
+            href={`/chat/${naddr}`}
+            className="popout-link"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Icon name="link" size={32} />
+          </a>
+        </div>
       )}
       {zaps.length > 0 && (
         <div className="top-zappers">
@@ -98,7 +126,9 @@ export function LiveChat({ link, options, height, }: { link: NostrLink, options?
               );
             }
             case EventKind.ZapReceipt: {
-              const zap = zaps.find(b => b.id === a.id && b.receiver === streamer);
+              const zap = zaps.find(
+                (b) => b.id === a.id && b.receiver === streamer
+              );
               if (zap) {
                 return <ChatZap zap={zap} key={a.id} />;
               }
@@ -126,20 +156,22 @@ function ChatZap({ zap }: { zap: ParsedZap }) {
     return null;
   }
 
-  return <div className="zap-container">
-    <div className="zap">
-      <Icon name="zap-filled" className="zap-icon" />
-      <Profile
-        pubkey={zap.anonZap ? "anon" : zap.sender ?? "anon"}
-        options={{
-          showAvatar: !zap.anonZap,
-          overrideName: zap.anonZap ? "Anon" : undefined,
-        }}
-      />
-      zapped
-      <span className="zap-amount">{formatSats(zap.amount)}</span>
-      sats
+  return (
+    <div className="zap-container">
+      <div className="zap">
+        <Icon name="zap-filled" className="zap-icon" />
+        <Profile
+          pubkey={zap.anonZap ? "anon" : zap.sender ?? "anon"}
+          options={{
+            showAvatar: !zap.anonZap,
+            overrideName: zap.anonZap ? "Anon" : undefined,
+          }}
+        />
+        zapped
+        <span className="zap-amount">{formatSats(zap.amount)}</span>
+        sats
+      </div>
+      {zap.content && <div className="zap-content">{zap.content}</div>}
     </div>
-    {zap.content && <div className="zap-content">{zap.content}</div>}
-  </div>
-}
\ No newline at end of file
+  );
+}