add share button to stream view

.changeset/fifty-falcons-join.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add share button to stream view

src/components/note/components/quote-repost-button.tsx

@@ -1,12 +1,12 @@
 import { useContext } from "react";
-import { ButtonProps, IconButton, IconButtonProps } from "@chakra-ui/react";
+import { ButtonProps, IconButton } from "@chakra-ui/react";
 import { Kind } from "nostr-tools";
 import dayjs from "dayjs";
 
 import { NostrEvent } from "../../../types/nostr-event";
 import { QuoteRepostIcon } from "../../icons";
 import { PostModalContext } from "../../../providers/post-modal-provider";
-import { getSharableNoteId } from "../../../helpers/nip19";
+import { getSharableEventAddress } from "../../../helpers/nip19";
 
 export type QuoteRepostButtonProps = Omit<ButtonProps, "children" | "onClick"> & {
   event: NostrEvent;
@@ -14,24 +14,30 @@ export type QuoteRepostButtonProps = Omit<ButtonProps, "children" | "onClick"> &
 
 export function QuoteRepostButton({
   event,
-  "aria-label": ariaLabel = "Quote repost",
+  "aria-label": ariaLabel,
   title = "Quote repost",
   ...props
 }: QuoteRepostButtonProps) {
   const { openModal } = useContext(PostModalContext);
 
   const handleClick = () => {
-    const nevent = getSharableNoteId(event.id);
+    const nevent = getSharableEventAddress(event);
     const draft = {
       kind: Kind.Text,
       tags: [],
-      content: "nostr:" + nevent,
+      content: "\nnostr:" + nevent,
       created_at: dayjs().unix(),
     };
     openModal(draft);
   };
 
   return (
-    <IconButton icon={<QuoteRepostIcon />} onClick={handleClick} aria-label={ariaLabel} title={title} {...props} />
+    <IconButton
+      icon={<QuoteRepostIcon />}
+      onClick={handleClick}
+      aria-label={ariaLabel || title}
+      title={title}
+      {...props}
+    />
   );
 }

src/views/streams/components/stream-share-button.tsx

@@ -0,0 +1,40 @@
+import { useContext } from "react";
+import { Button, ButtonProps } from "@chakra-ui/react";
+import { Kind } from "nostr-tools";
+import dayjs from "dayjs";
+
+import { getSharableEventAddress } from "../../../helpers/nip19";
+import { DraftNostrEvent } from "../../../types/nostr-event";
+import { PostModalContext } from "../../../providers/post-modal-provider";
+import { RepostIcon } from "../../../components/icons";
+import { ParsedStream } from "../../../helpers/nostr/stream";
+
+export type StreamShareButtonProps = Omit<ButtonProps, "children" | "onClick"> & {
+  stream: ParsedStream;
+};
+
+export default function StreamShareButton({
+  stream,
+  "aria-label": ariaLabel,
+  title = "Quote repost",
+  ...props
+}: StreamShareButtonProps) {
+  const { openModal } = useContext(PostModalContext);
+
+  const handleClick = () => {
+    const nevent = getSharableEventAddress(stream.event);
+    const draft: DraftNostrEvent = {
+      kind: Kind.Text,
+      tags: [],
+      content: "\nnostr:" + nevent,
+      created_at: dayjs().unix(),
+    };
+    openModal(draft);
+  };
+
+  return (
+    <Button leftIcon={<RepostIcon />} onClick={handleClick} aria-label={ariaLabel || title} title={title} {...props}>
+      Share
+    </Button>
+  );
+}

src/views/streams/stream/index.tsx

@@ -52,6 +52,7 @@ import TopZappers from "../components/top-zappers";
 import StreamHashtags from "../components/stream-hashtags";
 import StreamZapButton from "../components/stream-zap-button";
 import StreamGoal from "../components/stream-goal";
+import StreamShareButton from "../components/stream-share-button";
 
 function DesktopStreamPage({ stream }: { stream: ParsedStream }) {
   useAppTitle(stream.title);
@@ -97,6 +98,7 @@ function DesktopStreamPage({ stream }: { stream: ParsedStream }) {
         </Heading>
         <StreamStatusBadge stream={stream} fontSize="lg" />
         <Spacer />
+        <StreamShareButton stream={stream} title="Share stream" />
         <RelaySelectionButton display={{ base: "none", md: "block" }} />
         <StreamDebugButton stream={stream} variant="ghost" />
         <Button onClick={() => setShowChat((v) => !v)}>{showChat ? "Hide" : "Show"} Chat</Button>
@@ -151,6 +153,7 @@ function MobileStreamPage({ stream }: { stream: ParsedStream }) {
           Back
         </Button>
         <Spacer />
+        <StreamShareButton stream={stream} size="sm" />
         <Button onClick={showChat.onOpen} size="sm">
           Show Chat
         </Button>