rebuild stream view layout

.changeset/young-seals-love.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Rebuild stream view layout

src/components/magic-textarea.tsx

@@ -1,8 +1,9 @@
-import React from "react";
-import { Image, Textarea, TextareaProps } from "@chakra-ui/react";
+import React, { TextareaHTMLAttributes } from "react";
+import { Image, Input, InputProps, Textarea, TextareaProps } from "@chakra-ui/react";
 import ReactTextareaAutocomplete, {
   ItemComponentProps,
   TextareaProps as ReactTextareaAutocompleteProps,
+  TriggerType,
 } from "@webscopeio/react-textarea-autocomplete";
 import "@webscopeio/react-textarea-autocomplete/style.css";
 import { nip19 } from "nostr-tools";
@@ -70,35 +71,59 @@ const Loading: ReactTextareaAutocompleteProps<
   React.TextareaHTMLAttributes<HTMLTextAreaElement>
 >["loadingComponent"] = ({ data }) => <div>Loading</div>;
 
-export default function MagicTextArea({ ...props }: TextareaProps) {
+function useAutocompleteTriggers() {
   const emojis = useContextEmojis();
   const getDirectory = useUserDirectoryContext();
 
+  const triggers: TriggerType<Token> = {
+    ":": {
+      dataProvider: (token: string) => {
+        return matchSorter(emojis, token.trim(), { keys: ["keywords"] }).slice(0, 10);
+      },
+      component: Item,
+      output,
+    },
+    "@": {
+      dataProvider: async (token: string) => {
+        const dir = getUsersFromDirectory(await getDirectory());
+        return matchSorter(dir, token.trim(), { keys: ["names"] }).slice(0, 10);
+      },
+      component: Item,
+      output,
+    },
+  };
+
+  return triggers;
+}
+
+export function MagicInput({ ...props }: InputProps) {
+  const triggers = useAutocompleteTriggers();
+
   return (
-    <Textarea
+    // @ts-ignore
+    <ReactTextareaAutocomplete<Token, InputProps>
+      textAreaComponent={Input}
       {...props}
-      as={ReactTextareaAutocomplete<Token>}
       loadingComponent={Loading}
       renderToBody
       minChar={0}
-      trigger={{
-        ":": {
-          dataProvider: (token: string) => {
-            return matchSorter(emojis, token.trim(), { keys: ["keywords"] }).slice(0, 10);
-          },
-          component: Item,
-          output,
-        },
-        "@": {
-          dataProvider: async (token: string) => {
-            console.log("Getting user directory");
-            const dir = getUsersFromDirectory(await getDirectory());
-            return matchSorter(dir, token.trim(), { keys: ["names"] }).slice(0, 10);
-          },
-          component: Item,
-          output,
-        },
-      }}
+      trigger={triggers}
+    />
+  );
+}
+
+export default function MagicTextArea({ ...props }: TextareaProps) {
+  const triggers = useAutocompleteTriggers();
+
+  return (
+    // @ts-ignore
+    <ReactTextareaAutocomplete<Token, TextareaProps>
+      {...props}
+      textAreaComponent={Textarea}
+      loadingComponent={Loading}
+      renderToBody
+      minChar={0}
+      trigger={triggers}
     />
   );
 }

src/components/zap-modal.tsx

@@ -190,7 +190,7 @@ export default function ZapModal({
                 />
               )}
 
-              <ButtonGroup size="sm" alignItems="center" flexWrap="wrap">
+              <Flex gap="2" alignItems="center" wrap="wrap">
                 {customZapAmounts
                   .split(",")
                   .map((v) => parseInt(v))
@@ -202,11 +202,12 @@ export default function ZapModal({
                       }}
                       leftIcon={<LightningIcon color="yellow.400" />}
                       variant="solid"
+                      size="sm"
                     >
                       {amount}
                     </Button>
                   ))}
-              </ButtonGroup>
+              </Flex>
 
               <Flex gap="2">
                 <Input

src/views/goals/components/goal-card.tsx

@@ -1,6 +1,6 @@
 import { memo, useRef } from "react";
 import { Link as RouterLink } from "react-router-dom";
-import { ButtonGroup, Card, CardBody, CardHeader, CardProps, Heading, Link, Text } from "@chakra-ui/react";
+import { ButtonGroup, Card, CardBody, CardHeader, CardProps, Flex, Heading, Link, Text } from "@chakra-ui/react";
 
 import { UserAvatarLink } from "../../../components/user-avatar-link";
 import { UserLink } from "../../../components/user-link";
@@ -13,6 +13,8 @@ import GoalMenu from "./goal-menu";
 import GoalProgress from "./goal-progress";
 import GoalContents from "./goal-contents";
 import dayjs from "dayjs";
+import GoalZapButton from "./goal-zap-button";
+import GoalTopZappers from "./goal-top-zappers";
 
 function GoalCard({ goal, ...props }: Omit<CardProps, "children"> & { goal: NostrEvent }) {
   const nevent = getSharableEventAddress(goal);
@@ -38,10 +40,14 @@ function GoalCard({ goal, ...props }: Omit<CardProps, "children"> & { goal: Nost
           <GoalMenu goal={goal} aria-label="emoji pack menu" />
         </ButtonGroup>
       </CardHeader>
-      <CardBody p="2" display="flex" gap="4" flexDirection="column">
+      <CardBody p="2" display="flex" gap="2" flexDirection="column">
         {closed && <Text>Ends: {dayjs.unix(closed).fromNow()}</Text>}
         <GoalProgress goal={goal} />
         <GoalContents goal={goal} />
+        <Flex gap="2" alignItems="flex-end" flex={1}>
+          <GoalTopZappers goal={goal} flex={1} overflow="hidden" max={4} />
+          <GoalZapButton goal={goal} size="sm" ml="auto" />
+        </Flex>
       </CardBody>
     </Card>
   );

src/views/goals/components/goal-top-zappers.tsx

@@ -0,0 +1,46 @@
+import { Box, Flex, FlexProps, Text } from "@chakra-ui/react";
+
+import { getEventUID } from "../../../helpers/nostr/events";
+import { getGoalRelays } from "../../../helpers/nostr/goal";
+import useEventZaps from "../../../hooks/use-event-zaps";
+import { NostrEvent } from "../../../types/nostr-event";
+import { UserAvatarLink } from "../../../components/user-avatar-link";
+import { UserLink } from "../../../components/user-link";
+import { readablizeSats } from "../../../helpers/bolt11";
+import { LightningIcon } from "../../../components/icons";
+
+export default function GoalTopZappers({
+  goal,
+  max,
+  ...props
+}: Omit<FlexProps, "children"> & { goal: NostrEvent; max?: number }) {
+  const zaps = useEventZaps(getEventUID(goal), getGoalRelays(goal), true);
+
+  const totals: Record<string, number> = {};
+  for (const zap of zaps) {
+    const p = zap.request.pubkey;
+    if (zap.payment.amount) {
+      totals[p] = (totals[p] || 0) + zap.payment.amount;
+    }
+  }
+
+  const sortedTotals = Array.from(Object.entries(totals)).sort((a, b) => b[1] - a[1]);
+  if (max !== undefined) {
+    sortedTotals.length = max;
+  }
+
+  return (
+    <Flex gap="2" {...props}>
+      {sortedTotals.map(([pubkey, amount]) => (
+        <Flex key={pubkey} gap="2">
+          <UserAvatarLink pubkey={pubkey} size="sm" />
+          <Box whiteSpace="pre" isTruncated>
+            <UserLink fontSize="lg" fontWeight="bold" pubkey={pubkey} mr="2" />
+            <br />
+            <LightningIcon /> {readablizeSats(amount / 1000)}
+          </Box>
+        </Flex>
+      ))}
+    </Flex>
+  );
+}

src/views/goals/components/goal-zap-list.tsx

@@ -11,7 +11,6 @@ import dayjs from "dayjs";
 
 export default function GoalZapList({ goal }: { goal: NostrEvent }) {
   const zaps = useEventZaps(getEventUID(goal), getGoalRelays(goal), true);
-
   const sorted = Array.from(zaps).sort((a, b) => b.event.created_at - a.event.created_at);
 
   return (

src/views/goals/goal-details.tsx

@@ -34,7 +34,7 @@ export default function GoalDetailsView() {
   if (!goal) return <Spinner />;
 
   return (
-    <Flex direction="column" px="2" pt="2" pb="8" overflowY="auto" overflowX="hidden" h="full" gap="2">
+    <Flex direction="column" px="2" pt="2" pb="8" overflow="hidden" h="full" gap="2">
       <Flex gap="2" alignItems="center">
         <Button onClick={() => navigate(-1)} leftIcon={<ArrowLeftSIcon />}>
           Back

src/views/lists/list-details.tsx

@@ -52,7 +52,7 @@ export default function ListDetailsView() {
   const notes = getEventsFromList(event);
 
   return (
-    <Flex direction="column" px="2" pt="2" pb="8" overflowY="auto" overflowX="hidden" h="full" gap="2">
+    <Flex direction="column" px="2" pt="2" pb="8" overflow="hidden" h="full" gap="2">
       <Flex gap="2" alignItems="center">
         <Button onClick={() => navigate(-1)} leftIcon={<ArrowLeftSIcon />}>
           Back

src/views/streams/components/stream-card.tsx

@@ -1,6 +1,6 @@
 import { memo, useRef } from "react";
 import dayjs from "dayjs";
-import { Box, Card, CardBody, CardProps, Flex, Heading, LinkBox, LinkOverlay, Tag, Text } from "@chakra-ui/react";
+import { Box, Card, CardBody, CardProps, Flex, Heading, LinkBox, LinkOverlay, Text } from "@chakra-ui/react";
 
 import { ParsedStream } from "../../../helpers/nostr/stream";
 import { Link as RouterLink } from "react-router-dom";
@@ -10,6 +10,7 @@ import StreamStatusBadge from "./status-badge";
 import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
 import useEventNaddr from "../../../hooks/use-event-naddr";
 import { getEventUID } from "../../../helpers/nostr/events";
+import StreamHashtags from "./stream-hashtags";
 
 function StreamCard({ stream, ...props }: CardProps & { stream: ParsedStream }) {
   const { title, image } = stream;
@@ -45,9 +46,7 @@ function StreamCard({ stream, ...props }: CardProps & { stream: ParsedStream })
         </Heading>
         {stream.tags.length > 0 && (
           <Flex gap="2" wrap="wrap">
-            {stream.tags.map((tag) => (
-              <Tag key={tag}>{tag}</Tag>
-            ))}
+            <StreamHashtags stream={stream} />
           </Flex>
         )}
         {stream.starts && <Text>Started: {dayjs.unix(stream.starts).fromNow()}</Text>}

src/views/streams/components/stream-goal.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { Link as RouterLink } from "react-router-dom";
+import { Card, CardBody, CardHeader, CardProps, Flex, Heading, Link } from "@chakra-ui/react";
+
+import { ParsedStream, getATag } from "../../../helpers/nostr/stream";
+import { NostrEvent } from "../../../types/nostr-event";
+import { NostrRequest } from "../../../classes/nostr-request";
+import { useReadRelayUrls } from "../../../hooks/use-client-relays";
+import { GOAL_KIND, getGoalName } from "../../../helpers/nostr/goal";
+import GoalProgress from "../../goals/components/goal-progress";
+import { getSharableEventAddress } from "../../../helpers/nip19";
+import GoalTopZappers from "../../goals/components/goal-top-zappers";
+import GoalZapButton from "../../goals/components/goal-zap-button";
+
+export default function StreamGoal({ stream, ...props }: Omit<CardProps, "children"> & { stream: ParsedStream }) {
+  const [goal, setGoal] = useState<NostrEvent>();
+  const relays = useReadRelayUrls(stream.relays);
+
+  useEffect(() => {
+    const request = new NostrRequest(relays);
+    request.onEvent.subscribe((event) => {
+      setGoal(event);
+    });
+    request.start({ "#a": [getATag(stream)], kinds: [GOAL_KIND] });
+  }, [stream.identifier, relays.join("|")]);
+
+  if (!goal) return null;
+  const nevent = getSharableEventAddress(goal);
+  return (
+    <Card direction="column" gap="1" {...props}>
+      <CardHeader px="2" pt="2" pb="0">
+        <Heading size="md">
+          <Link as={RouterLink} to={`/goals/${nevent}`}>
+            {getGoalName(goal)}
+          </Link>
+        </Heading>
+      </CardHeader>
+      <CardBody p="2" display="flex" gap="2" flexDirection="column">
+        <GoalProgress goal={goal} />
+        <Flex gap="2" alignItems="flex-end">
+          <GoalTopZappers goal={goal} overflow="hidden" />
+          <GoalZapButton goal={goal} flexShrink={0} />
+        </Flex>
+      </CardBody>
+    </Card>
+  );
+}

src/views/streams/components/stream-hashtags.tsx

@@ -0,0 +1,12 @@
+import { Tag } from "@chakra-ui/react";
+import { ParsedStream } from "../../../helpers/nostr/stream";
+
+export default function StreamHashtags({ stream }: { stream: ParsedStream }) {
+  return (
+    <>
+      {stream.tags.map((tag) => (
+        <Tag key={tag}>{tag}</Tag>
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,60 @@
+import { Button, IconButton, useDisclosure } from "@chakra-ui/react";
+import { ParsedStream } from "../../../helpers/nostr/stream";
+import { LightningIcon } from "../../../components/icons";
+import { useInvoiceModalContext } from "../../../providers/invoice-modal";
+import useUserLNURLMetadata from "../../../hooks/use-user-lnurl-metadata";
+import ZapModal from "../../../components/zap-modal";
+import { useRelaySelectionRelays } from "../../../providers/relay-selection-provider";
+
+export default function StreamZapButton({
+  stream,
+  initComment,
+  onZap,
+  label,
+}: {
+  stream: ParsedStream;
+  initComment?: string;
+  onZap?: () => void;
+  label?: string;
+}) {
+  const zapModal = useDisclosure();
+  const { requestPay } = useInvoiceModalContext();
+  const zapMetadata = useUserLNURLMetadata(stream.host);
+  const relays = useRelaySelectionRelays();
+
+  const commonProps = {
+    "aria-label": "Zap stream",
+    borderColor: "yellow.400",
+    variant: "outline",
+    onClick: zapModal.onOpen,
+    isDisabled: !zapMetadata.metadata?.allowsNostr,
+  };
+
+  return (
+    <>
+      {label ? (
+        <Button leftIcon={<LightningIcon color="yellow.400" />} {...commonProps}>
+          {label}
+        </Button>
+      ) : (
+        <IconButton icon={<LightningIcon color="yellow.400" />} {...commonProps} />
+      )}
+
+      {zapModal.isOpen && (
+        <ZapModal
+          isOpen
+          event={stream.event}
+          pubkey={stream.host}
+          onInvoice={async (invoice) => {
+            if (onZap) onZap();
+            zapModal.onClose();
+            await requestPay(invoice);
+          }}
+          onClose={zapModal.onClose}
+          initialComment={initComment}
+          additionalRelays={relays}
+        />
+      )}
+    </>
+  );
+}

src/views/streams/components/streamer-cards.tsx

@@ -1,5 +1,16 @@
 import { useMemo } from "react";
-import { Card, CardBody, CardHeader, CardProps, Flex, Heading, Image, LinkBox, LinkOverlay } from "@chakra-ui/react";
+import {
+  Box,
+  Card,
+  CardBody,
+  CardHeader,
+  CardProps,
+  Flex,
+  Heading,
+  Image,
+  LinkBox,
+  LinkOverlay,
+} from "@chakra-ui/react";
 
 import { useReadRelayUrls } from "../../../hooks/use-client-relays";
 import { useRelaySelectionRelays } from "../../../providers/relay-selection-provider";
@@ -8,6 +19,7 @@ import useSubject from "../../../hooks/use-subject";
 import { NoteContents } from "../../../components/note/note-contents";
 import { isATag } from "../../../types/nostr-event";
 import useReplaceableEvent from "../../../hooks/use-replaceable-event";
+import OpenGraphCard from "../../../components/open-graph-card";
 
 export const STREAMER_CARDS_TYPE = 17777;
 export const STREAMER_CARD_TYPE = 37777;
@@ -33,6 +45,10 @@ function StreamerCard({ cord, relay, ...props }: { cord: string; relay?: string
   const image = card.tags.find((t) => t[0] === "image")?.[1];
   const link = card.tags.find((t) => t[0] === "r")?.[1];
 
+  if (!card.content && !image && link) {
+    return <OpenGraphCard url={new URL(link)} />;
+  }
+
   return (
     <Card as={LinkBox} variant="outline" {...props}>
       {image && <Image src={image} />}
@@ -41,29 +57,31 @@ function StreamerCard({ cord, relay, ...props }: { cord: string; relay?: string
           <Heading size="md">{title}</Heading>
         </CardHeader>
       )}
-      <CardBody p="2">
-        <NoteContents event={card} />
-        {link && (
-          <LinkOverlay isExternal href={link} color="blue.500">
-            {!image && link}
-          </LinkOverlay>
-        )}
-      </CardBody>
+      {card.content && (
+        <CardBody p="2">
+          <NoteContents event={card} />
+        </CardBody>
+      )}
+      {link && (
+        <LinkOverlay isExternal href={link} color="blue.500">
+          {!image && link}
+        </LinkOverlay>
+      )}
     </Card>
   );
 }
 
-export default function StreamerCards({ pubkey }: { pubkey: string }) {
+export default function StreamerCards({ pubkey, ...props }: Omit<CardProps, "children"> & { pubkey: string }) {
   const contextRelays = useRelaySelectionRelays();
   const readRelays = useReadRelayUrls(contextRelays);
 
   const cardCords = useStreamerCardsCords(pubkey, readRelays);
 
   return (
-    <Flex wrap="wrap" gap="2">
+    <>
       {cardCords.map(([_, cord, relay]) => (
-        <StreamerCard key={cord} cord={cord} relay={relay} maxW="lg" />
+        <StreamerCard key={cord} cord={cord} relay={relay} {...props} />
       ))}
-    </Flex>
+    </>
   );
 }

src/views/streams/components/top-zappers.tsx

@@ -0,0 +1,51 @@
+import { useMemo } from "react";
+import { Flex, FlexProps, Text } from "@chakra-ui/react";
+
+import { parseZapEvent } from "../../../helpers/zaps";
+import { UserLink } from "../../../components/user-link";
+import { LightningIcon } from "../../../components/icons";
+import { readablizeSats } from "../../../helpers/bolt11";
+import useStreamChatTimeline from "../stream/stream-chat/use-stream-chat-timeline";
+import { ParsedStream } from "../../../helpers/nostr/stream";
+import useSubject from "../../../hooks/use-subject";
+import { UserAvatarLink } from "../../../components/user-avatar-link";
+
+export default function TopZappers({ stream, ...props }: FlexProps & { stream: ParsedStream }) {
+  const timeline = useStreamChatTimeline(stream);
+  const events = useSubject(timeline.timeline);
+  const zaps = useMemo(() => {
+    const parsed = [];
+    for (const event of events) {
+      try {
+        parsed.push(parseZapEvent(event));
+      } catch (e) {}
+    }
+    return parsed;
+  }, [events]);
+
+  const totals: Record<string, number> = {};
+  for (const zap of zaps) {
+    const p = zap.request.pubkey;
+    if (zap.payment.amount) {
+      totals[p] = (totals[p] || 0) + zap.payment.amount;
+    }
+  }
+
+  const sortedTotals = Array.from(Object.entries(totals)).sort((a, b) => b[1] - a[1]);
+
+  return (
+    <Flex overflowX="auto" overflowY="hidden" gap="4" {...props}>
+      {sortedTotals.map(([pubkey, total]) => (
+        <Flex key={pubkey} gap="2" alignItems="center" maxW="2xs">
+          <UserAvatarLink pubkey={pubkey} size="sm" noProxy />
+          <Text whiteSpace="nowrap" isTruncated>
+            <UserLink pubkey={pubkey} fontWeight="bold" />
+            <br />
+            <LightningIcon />
+            {readablizeSats(total / 1000)}
+          </Text>
+        </Flex>
+      ))}
+    </Flex>
+  );
+}

src/views/streams/stream/index.tsx

@@ -4,13 +4,20 @@ import {
   Box,
   Button,
   ButtonGroup,
+  Divider,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
   Flex,
   Heading,
   Spacer,
   Spinner,
   Tag,
-  Text,
   useBreakpointValue,
+  useDisclosure,
 } from "@chakra-ui/react";
 import { useParams, Navigate, useSearchParams, useNavigate } from "react-router-dom";
 import { nip19 } from "nostr-tools";
@@ -24,7 +31,7 @@ import StreamChat, { ChatDisplayMode } from "./stream-chat";
 import { UserAvatarLink } from "../../../components/user-avatar-link";
 import { UserLink } from "../../../components/user-link";
 import StreamSummaryContent from "../components/stream-summary-content";
-import { ArrowDownSIcon, ArrowUpSIcon, ExternalLinkIcon } from "../../../components/icons";
+import { ArrowLeftSIcon, ExternalLinkIcon } from "../../../components/icons";
 import useSetColorMode from "../../../hooks/use-set-color-mode";
 import { CopyIconButton } from "../../../components/copy-icon-button";
 import StreamDebugButton from "../components/stream-debug-button";
@@ -36,41 +43,31 @@ import StreamerCards from "../components/streamer-cards";
 import { useAppTitle } from "../../../hooks/use-app-title";
 import StreamSatsPerMinute from "../components/stream-sats-per-minute";
 import { UserEmojiProvider } from "../../../providers/emoji-provider";
+import StreamStatusBadge from "../components/status-badge";
+import ChatMessageForm from "./stream-chat/stream-chat-form";
+import useStreamChatTimeline from "./stream-chat/use-stream-chat-timeline";
+import UserDirectoryProvider from "../../../providers/user-directory-provider";
+import StreamChatLog from "./stream-chat/chat-log";
+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";
 
-function StreamPage({ stream, displayMode }: { stream: ParsedStream; displayMode?: ChatDisplayMode }) {
+function DesktopStreamPage({ stream }: { stream: ParsedStream }) {
   useAppTitle(stream.title);
-  const vertical = useBreakpointValue({ base: true, lg: false });
-  const scrollBox = useRef<HTMLDivElement | null>(null);
-  const scrollState = useScroll(scrollBox);
   const navigate = useNavigate();
 
-  const renderActions = () => {
-    const toggleButton =
-      scrollState.y === 0 ? (
-        <Button
-          size="sm"
-          onClick={() => scrollBox.current?.scroll(0, scrollBox.current.scrollHeight)}
-          leftIcon={<ArrowDownSIcon />}
-        >
-          View Chat
-        </Button>
-      ) : (
-        <Button size="sm" onClick={() => scrollBox.current?.scroll(0, 0)} leftIcon={<ArrowUpSIcon />}>
-          View Stream
-        </Button>
-      );
+  const [showChat, setShowChat] = useState(true);
 
+  const renderActions = () => {
     return (
       <ButtonGroup>
-        {vertical && toggleButton}
-        {!vertical && (
-          <CopyIconButton
-            text={location.href + "?displayMode=log&colorMode=dark"}
-            aria-label="Copy chat log URL"
-            title="Copy chat log URL"
-            size="sm"
-          />
-        )}
+        <CopyIconButton
+          text={location.href + "?displayMode=log&colorMode=dark"}
+          aria-label="Copy chat log URL"
+          title="Copy chat log URL"
+          size="sm"
+        />
         <Button
           rightIcon={<ExternalLinkIcon />}
           size="sm"
@@ -89,71 +86,154 @@ function StreamPage({ stream, displayMode }: { stream: ParsedStream; displayMode
   };
 
   return (
-    <Flex
-      h="full"
-      overflowX="hidden"
-      overflowY="auto"
-      direction={vertical ? "column" : "row"}
-      p={vertical || !!displayMode ? 0 : "2"}
-      gap={vertical ? 0 : "4"}
-      ref={scrollBox}
-    >
-      {displayMode && (
-        <Global
-          styles={css`
-            body {
-              background: transparent;
-            }
-          `}
+    <Flex direction="column" gap="2" p="2" pb="10">
+      <Flex gap="2" alignItems="center">
+        <Button onClick={() => navigate(-1)} leftIcon={<ArrowLeftSIcon />}>
+          Back
+        </Button>
+        <UserAvatarLink pubkey={stream.host} size="sm" display={{ base: "none", md: "block" }} />
+        <Heading size="md" isTruncated display={{ base: "none", md: "initial" }}>
+          {stream.title}
+        </Heading>
+        <StreamStatusBadge stream={stream} fontSize="lg" />
+        <Spacer />
+        <RelaySelectionButton display={{ base: "none", md: "block" }} />
+        <StreamDebugButton stream={stream} variant="ghost" />
+        <Button onClick={() => setShowChat((v) => !v)}>{showChat ? "Hide" : "Show"} Chat</Button>
+      </Flex>
+      <Flex gap="2" maxH="calc(100vh - 4rem)">
+        <LiveVideoPlayer
+          stream={stream.streaming || stream.recording}
+          autoPlay={!!stream.streaming}
+          poster={stream.image}
+          flexGrow={1}
+          mx="auto"
         />
-      )}
-      {!displayMode && (
-        <Flex gap={vertical ? "2" : "4"} direction="column" flexGrow={vertical ? 0 : 1} pb="4">
-          <LiveVideoPlayer
-            stream={stream.streaming || stream.recording}
-            autoPlay={!!stream.streaming}
-            poster={stream.image}
-            maxH="100vh"
-          />
-          <Flex gap={vertical ? "2" : "4"} alignItems="center" p={vertical ? "2" : 0}>
-            <UserAvatarLink pubkey={stream.host} noProxy />
-            <Box>
-              <Heading size="md">
-                <UserLink pubkey={stream.host} />
-              </Heading>
-              <Text>{stream.title}</Text>
-            </Box>
-            <Spacer />
-            {!!window.webln && <StreamSatsPerMinute pubkey={stream.host} />}
-            <StreamDebugButton stream={stream} variant="ghost" />
-            <RelaySelectionButton />
-            <Button onClick={() => navigate(-1)}>Back</Button>
+        {showChat && (
+          <Flex direction="column" gap="2" flexGrow={1} maxW="lg" flexShrink={0}>
+            <StreamGoal stream={stream} />
+            <StreamChat stream={stream} actions={renderActions()} flex={1} />
           </Flex>
-          <StreamSummaryContent stream={stream} px={vertical ? "2" : 0} />
-          {stream.tags.length > 0 && (
-            <Flex gap="2" wrap="wrap">
-              {stream.tags.map((tag) => (
-                <Tag key={tag}>{tag}</Tag>
-              ))}
-            </Flex>
-          )}
-          {!vertical && <StreamerCards pubkey={stream.host} />}
+        )}
+      </Flex>
+      <Flex gap="2" alignItems="center">
+        <UserAvatarLink pubkey={stream.host} noProxy />
+        <Box>
+          <Heading size="md">{stream.title}</Heading>
+          <UserLink pubkey={stream.host} />
+        </Box>
+        <Spacer />
+        {!!window.webln && <StreamSatsPerMinute pubkey={stream.host} />}
+      </Flex>
+      <StreamSummaryContent stream={stream} />
+      {stream.tags.length > 0 && (
+        <Flex gap="2" wrap="wrap">
+          <StreamHashtags stream={stream} />
         </Flex>
       )}
-      <StreamChat
-        stream={stream}
-        flexGrow={1}
-        maxW={vertical || !!displayMode ? undefined : "lg"}
-        maxH="100vh"
-        minH={vertical ? "100vh" : undefined}
-        flexShrink={0}
-        actions={renderActions()}
-        displayMode={displayMode}
-      />
+
+      <Flex gap="2" wrap="wrap">
+        <StreamerCards pubkey={stream.host} maxW="lg" minW="md" />
+      </Flex>
     </Flex>
   );
 }
 
+function MobileStreamPage({ stream }: { stream: ParsedStream }) {
+  useAppTitle(stream.title);
+  const navigate = useNavigate();
+  const showChat = useDisclosure();
+
+  return (
+    <Flex direction="column" gap="2" overflow="hidden" py="2">
+      <Flex gap="2" alignItems="center" px="2" flexShrink={0}>
+        <Button onClick={() => navigate(-1)} leftIcon={<ArrowLeftSIcon />} size="sm">
+          Back
+        </Button>
+        <Spacer />
+        <Button onClick={showChat.onOpen} size="sm">
+          Show Chat
+        </Button>
+      </Flex>
+      <LiveVideoPlayer
+        stream={stream.streaming || stream.recording}
+        autoPlay={!!stream.streaming}
+        poster={stream.image}
+      />
+      <Flex direction="column" gap="2" overflow="hidden" px="2">
+        <Flex gap="2">
+          <UserAvatarLink pubkey={stream.host} noProxy />
+          <Box>
+            <Heading size="md">{stream.title}</Heading>
+            <UserLink pubkey={stream.host} />
+          </Box>
+        </Flex>
+        <StreamSummaryContent stream={stream} />
+        {stream.tags.length > 0 && (
+          <Flex gap="2" wrap="wrap">
+            <StreamHashtags stream={stream} />
+          </Flex>
+        )}
+        <StreamZapButton stream={stream} label="Zap Stream" />
+        <Heading size="sm">Stream goal</Heading>
+        <Divider />
+        <StreamGoal stream={stream} />
+        <StreamerCards pubkey={stream.host} />
+      </Flex>
+      <Drawer onClose={showChat.onClose} isOpen={showChat.isOpen} size="full" isFullHeight>
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader px="4" pb="0">
+            Stream Chat
+          </DrawerHeader>
+          <DrawerBody p={0} overflow="hidden" display="flex" gap="2" flexDirection="column">
+            <TopZappers stream={stream} px="2" />
+            <StreamChatLog stream={stream} flex={1} px="2" />
+            <ChatMessageForm stream={stream} />
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </Flex>
+  );
+}
+
+function StreamPage({ stream }: { stream: ParsedStream }) {
+  const isMobile = useBreakpointValue({ base: true, lg: false });
+  const Layout = isMobile ? MobileStreamPage : DesktopStreamPage;
+
+  const chatTimeline = useStreamChatTimeline(stream);
+  const chatLog = useSubject(chatTimeline.timeline);
+  const pubkeysInChat = useMemo(() => {
+    const set = new Set<string>();
+    for (const event of chatLog) {
+      set.add(event.pubkey);
+    }
+    return Array.from(set);
+  }, [chatLog]);
+
+  return (
+    <UserDirectoryProvider getDirectory={() => pubkeysInChat}>
+      <Layout stream={stream} />
+    </UserDirectoryProvider>
+  );
+}
+
+function ChatWidget({ stream, displayMode }: { stream: ParsedStream; displayMode: ChatDisplayMode }) {
+  return (
+    <>
+      <Global
+        styles={css`
+          body {
+            background: transparent;
+          }
+        `}
+      />
+      <StreamChat stream={stream} flexGrow={1} h="100vh" w="100vw" displayMode={displayMode} />
+    </>
+  );
+}
+
 export default function StreamView() {
   const { naddr } = useParams();
   const [params] = useSearchParams();
@@ -191,12 +271,14 @@ export default function StreamView() {
     if (stream?.relays) setStreamRelays(stream.relays);
   }, [stream?.relays]);
 
+  const displayMode = (params.get("displayMode") as ChatDisplayMode) ?? undefined;
+
   if (!stream) return <Spinner />;
   return (
     // add snort and damus relays so zap.stream will always see zaps
     <RelaySelectionProvider additionalDefaults={streamRelays}>
       <UserEmojiProvider pubkey={stream.host}>
-        <StreamPage stream={stream} displayMode={(params.get("displayMode") as ChatDisplayMode) ?? undefined} />
+        {displayMode ? <ChatWidget stream={stream} displayMode={displayMode} /> : <StreamPage stream={stream} />}
       </UserEmojiProvider>
     </RelaySelectionProvider>
   );

src/views/streams/stream/stream-chat/chat-log.tsx

@@ -0,0 +1,47 @@
+import { forwardRef } from "react";
+import { Flex, FlexProps } from "@chakra-ui/react";
+import { css } from "@emotion/react";
+
+import { ParsedStream, STREAM_CHAT_MESSAGE_KIND } from "../../../../helpers/nostr/stream";
+import useSubject from "../../../../hooks/use-subject";
+import useStreamChatTimeline from "./use-stream-chat-timeline";
+import ChatMessage from "./chat-message";
+import ZapMessage from "./zap-message";
+
+const hideScrollbarCss = css`
+  scrollbar-width: 0;
+
+  ::-webkit-scrollbar {
+    width: 0;
+  }
+`;
+
+const StreamChatLog = forwardRef<
+  HTMLDivElement,
+  Omit<FlexProps, "children"> & { stream: ParsedStream; hideScrollbar?: boolean }
+>(({ stream, hideScrollbar, ...props }, ref) => {
+  const timeline = useStreamChatTimeline(stream);
+  const events = useSubject(timeline.timeline);
+
+  return (
+    <Flex
+      ref={ref}
+      overflowY="scroll"
+      overflowX="hidden"
+      direction="column-reverse"
+      gap="2"
+      css={hideScrollbar && hideScrollbarCss}
+      {...props}
+    >
+      {events.map((event) =>
+        event.kind === STREAM_CHAT_MESSAGE_KIND ? (
+          <ChatMessage key={event.id} event={event} stream={stream} />
+        ) : (
+          <ZapMessage key={event.id} zap={event} stream={stream} />
+        ),
+      )}
+    </Flex>
+  );
+});
+
+export default StreamChatLog;

src/views/streams/stream/stream-chat/index.tsx

@@ -1,33 +1,14 @@
-import { useCallback, useMemo, useRef } from "react";
-import { Card, CardBody, CardHeader, CardProps, Flex, Heading } from "@chakra-ui/react";
-import { css } from "@emotion/react";
-import { Kind } from "nostr-tools";
+import { useRef } from "react";
+import { Card, CardBody, CardHeader, CardProps, Heading } from "@chakra-ui/react";
 
-import { ParsedStream, STREAM_CHAT_MESSAGE_KIND, getATag } from "../../../../helpers/nostr/stream";
-import ChatMessage from "./chat-message";
-import ZapMessage from "./zap-message";
+import { ParsedStream } from "../../../../helpers/nostr/stream";
 import { LightboxProvider } from "../../../../components/lightbox-provider";
 import IntersectionObserverProvider from "../../../../providers/intersection-observer";
 import { useTimelineCurserIntersectionCallback } from "../../../../hooks/use-timeline-cursor-intersection-callback";
-import useSubject from "../../../../hooks/use-subject";
-import useTimelineLoader from "../../../../hooks/use-timeline-loader";
-import { truncatedId } from "../../../../helpers/nostr/events";
-import TopZappers from "./top-zappers";
-import { parseZapEvent } from "../../../../helpers/zaps";
-import { useRelaySelectionRelays } from "../../../../providers/relay-selection-provider";
-import useUserMuteList from "../../../../hooks/use-user-mute-list";
-import { NostrEvent, isPTag } from "../../../../types/nostr-event";
-import { useCurrentAccount } from "../../../../hooks/use-current-account";
-import ChatMessageForm from "./chat-message-form";
-import UserDirectoryProvider from "../../../../providers/user-directory-provider";
-
-const hideScrollbar = css`
-  scrollbar-width: 0;
-
-  ::-webkit-scrollbar {
-    width: 0;
-  }
-`;
+import TopZappers from "../../components/top-zappers";
+import ChatMessageForm from "./stream-chat-form";
+import useStreamChatTimeline from "./use-stream-chat-timeline";
+import StreamChatLog from "./chat-log";
 
 export type ChatDisplayMode = "log" | "popup";
 
@@ -37,45 +18,7 @@ export default function StreamChat({
   displayMode,
   ...props
 }: CardProps & { stream: ParsedStream; actions?: React.ReactNode; displayMode?: ChatDisplayMode }) {
-  const account = useCurrentAccount();
-  const streamRelays = useRelaySelectionRelays();
-
-  const hostMuteList = useUserMuteList(stream.host);
-  const muteList = useUserMuteList(account?.pubkey);
-  const mutedPubkeys = useMemo(
-    () => [...(hostMuteList?.tags ?? []), ...(muteList?.tags ?? [])].filter(isPTag).map((t) => t[1] as string),
-    [hostMuteList, muteList],
-  );
-  const eventFilter = useCallback((event: NostrEvent) => !mutedPubkeys.includes(event.pubkey), [mutedPubkeys]);
-
-  const timeline = useTimelineLoader(
-    `${truncatedId(stream.identifier)}-chat`,
-    streamRelays,
-    {
-      "#a": [getATag(stream)],
-      kinds: [STREAM_CHAT_MESSAGE_KIND, Kind.Zap],
-    },
-    { eventFilter },
-  );
-
-  const events = useSubject(timeline.timeline).sort((a, b) => b.created_at - a.created_at);
-  const pubkeysInChat = useMemo(() => {
-    const set = new Set<string>();
-    for (const event of events) {
-      set.add(event.pubkey);
-    }
-    return Array.from(set);
-  }, [events]);
-
-  const zaps = useMemo(() => {
-    const parsed = [];
-    for (const event of events) {
-      try {
-        parsed.push(parseZapEvent(event));
-      } catch (e) {}
-    }
-    return parsed;
-  }, [events]);
+  const timeline = useStreamChatTimeline(stream);
 
   const scrollBox = useRef<HTMLDivElement | null>(null);
   const callback = useTimelineCurserIntersectionCallback(timeline);
@@ -85,42 +28,21 @@ export default function StreamChat({
 
   return (
     <IntersectionObserverProvider callback={callback} root={scrollBox}>
-      <UserDirectoryProvider getDirectory={() => pubkeysInChat}>
-        <LightboxProvider>
-          <Card {...props} overflow="hidden" background={isChatLog ? "transparent" : undefined}>
-            {!isPopup && (
-              <CardHeader py="3" display="flex" justifyContent="space-between" alignItems="center">
-                <Heading size="md">Stream Chat</Heading>
-                {actions}
-              </CardHeader>
-            )}
-            <CardBody display="flex" flexDirection="column" overflow="hidden" p={0}>
-              <TopZappers zaps={zaps} pt={!isPopup ? 0 : undefined} />
-              <Flex
-                overflowY="scroll"
-                overflowX="hidden"
-                ref={scrollBox}
-                direction="column-reverse"
-                flex={1}
-                px="4"
-                py="2"
-                mb="2"
-                gap="2"
-                css={isChatLog && hideScrollbar}
-              >
-                {events.map((event) =>
-                  event.kind === STREAM_CHAT_MESSAGE_KIND ? (
-                    <ChatMessage key={event.id} event={event} stream={stream} />
-                  ) : (
-                    <ZapMessage key={event.id} zap={event} stream={stream} />
-                  ),
-                )}
-              </Flex>
-              {!isChatLog && <ChatMessageForm stream={stream} />}
-            </CardBody>
-          </Card>
-        </LightboxProvider>
-      </UserDirectoryProvider>
+      <LightboxProvider>
+        <Card {...props} overflow="hidden" background={isChatLog ? "transparent" : undefined}>
+          {!isPopup && (
+            <CardHeader py="3" display="flex" justifyContent="space-between" alignItems="center">
+              <Heading size="md">Stream Chat</Heading>
+              {actions}
+            </CardHeader>
+          )}
+          <CardBody display="flex" flexDirection="column" overflow="hidden" p={0}>
+            <TopZappers stream={stream} py="2" px="4" pt={!isPopup ? 0 : undefined} />
+            <StreamChatLog ref={scrollBox} stream={stream} flex={1} px="4" py="2" mb="2" />
+            {!isChatLog && <ChatMessageForm stream={stream} />}
+          </CardBody>
+        </Card>
+      </LightboxProvider>
     </IntersectionObserverProvider>
   );
 }

src/views/streams/stream/stream-chat/stream-chat-form.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Box, Button, IconButton, useDisclosure, useToast } from "@chakra-ui/react";
+import { Box, Button, useToast } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 
 import { ParsedStream, buildChatMessage } from "../../../../helpers/nostr/stream";
@@ -7,15 +7,12 @@ import { useRelaySelectionRelays } from "../../../../providers/relay-selection-p
 import { useUserRelays } from "../../../../hooks/use-user-relays";
 import { RelayMode } from "../../../../classes/relay";
 import { unique } from "../../../../helpers/array";
-import { LightningIcon } from "../../../../components/icons";
-import useUserLNURLMetadata from "../../../../hooks/use-user-lnurl-metadata";
-import ZapModal from "../../../../components/zap-modal";
-import { useInvoiceModalContext } from "../../../../providers/invoice-modal";
 import { useSigningContext } from "../../../../providers/signing-provider";
 import NostrPublishAction from "../../../../classes/nostr-publish-action";
 import { createEmojiTags, ensureNotifyContentMentions } from "../../../../helpers/nostr/post";
 import { useContextEmojis } from "../../../../providers/emoji-provider";
-import MagicTextArea from "../../../../components/magic-textarea";
+import { MagicInput } from "../../../../components/magic-textarea";
+import StreamZapButton from "../../components/stream-zap-button";
 
 export default function ChatMessageForm({ stream }: { stream: ParsedStream }) {
   const toast = useToast();
@@ -44,52 +41,23 @@ export default function ChatMessageForm({ stream }: { stream: ParsedStream }) {
     }
   });
 
-  const { requestPay } = useInvoiceModalContext();
-  const zapModal = useDisclosure();
-  const zapMetadata = useUserLNURLMetadata(stream.host);
-
   watch("content");
 
   return (
     <>
       <Box as="form" borderRadius="md" flexShrink={0} display="flex" gap="2" px="2" pb="2" onSubmit={sendMessage}>
-        <MagicTextArea
+        <MagicInput
           placeholder="Message"
           autoComplete="off"
           isRequired
           value={getValues().content}
           onChange={(e) => setValue("content", e.target.value)}
-          rows={1}
         />
         <Button colorScheme="brand" type="submit" isLoading={formState.isSubmitting}>
           Send
         </Button>
-        {zapMetadata.metadata?.allowsNostr && (
-          <IconButton
-            icon={<LightningIcon color="yellow.400" />}
-            aria-label="Zap stream"
-            borderColor="yellow.400"
-            variant="outline"
-            onClick={zapModal.onOpen}
-          />
-        )}
+        <StreamZapButton stream={stream} onZap={reset} initComment={getValues().content} />
       </Box>
-
-      {zapModal.isOpen && (
-        <ZapModal
-          isOpen
-          event={stream.event}
-          pubkey={stream.host}
-          onInvoice={async (invoice) => {
-            reset();
-            zapModal.onClose();
-            await requestPay(invoice);
-          }}
-          onClose={zapModal.onClose}
-          initialComment={getValues().content}
-          additionalRelays={relays}
-        />
-      )}
     </>
   );
 }

src/views/streams/stream/stream-chat/top-zappers.tsx

@@ -1,35 +0,0 @@
-import { Box, Flex, FlexProps, Text } from "@chakra-ui/react";
-
-import { ParsedZap } from "../../../../helpers/zaps";
-import { UserAvatar } from "../../../../components/user-avatar";
-import { UserLink } from "../../../../components/user-link";
-import { LightningIcon } from "../../../../components/icons";
-import { readablizeSats } from "../../../../helpers/bolt11";
-
-export default function TopZappers({ zaps, ...props }: FlexProps & { zaps: ParsedZap[] }) {
-  const totals: Record<string, number> = {};
-  for (const zap of zaps) {
-    const p = zap.request.pubkey;
-    if (zap.payment.amount) {
-      totals[p] = (totals[p] || 0) + zap.payment.amount;
-    }
-  }
-
-  const sortedTotals = Array.from(Object.entries(totals)).sort((a, b) => b[1] - a[1]);
-
-  return (
-    <Flex overflowX="auto" overflowY="hidden" gap="4" py="2" px="4" {...props}>
-      {sortedTotals.map(([pubkey, total]) => (
-        <Flex key={pubkey} gap="2" alignItems="center" maxW="2xs">
-          <UserAvatar pubkey={pubkey} size="sm" noProxy />
-          <Text whiteSpace="nowrap" isTruncated>
-            <UserLink pubkey={pubkey} fontWeight="bold" />
-            <br />
-            <LightningIcon />
-            {readablizeSats(total / 1000)}
-          </Text>
-        </Flex>
-      ))}
-    </Flex>
-  );
-}

src/views/streams/stream/stream-chat/use-stream-chat-timeline.ts

@@ -0,0 +1,33 @@
+import { useCallback, useMemo } from "react";
+import { Kind } from "nostr-tools";
+
+import { getEventUID } from "../../../../helpers/nostr/events";
+import { ParsedStream, STREAM_CHAT_MESSAGE_KIND, getATag } from "../../../../helpers/nostr/stream";
+import useTimelineLoader from "../../../../hooks/use-timeline-loader";
+import { NostrEvent, isPTag } from "../../../../types/nostr-event";
+import useUserMuteList from "../../../../hooks/use-user-mute-list";
+import { useRelaySelectionRelays } from "../../../../providers/relay-selection-provider";
+import { useCurrentAccount } from "../../../../hooks/use-current-account";
+
+export default function useStreamChatTimeline(stream: ParsedStream) {
+  const account = useCurrentAccount();
+  const streamRelays = useRelaySelectionRelays();
+
+  const hostMuteList = useUserMuteList(stream.host);
+  const muteList = useUserMuteList(account?.pubkey);
+  const mutedPubkeys = useMemo(
+    () => [...(hostMuteList?.tags ?? []), ...(muteList?.tags ?? [])].filter(isPTag).map((t) => t[1] as string),
+    [hostMuteList, muteList],
+  );
+
+  const eventFilter = useCallback((event: NostrEvent) => !mutedPubkeys.includes(event.pubkey), [mutedPubkeys]);
+  return useTimelineLoader(
+    `${getEventUID(stream.event)}-chat`,
+    streamRelays,
+    {
+      "#a": [getATag(stream)],
+      kinds: [STREAM_CHAT_MESSAGE_KIND, Kind.Zap],
+    },
+    { eventFilter },
+  );
+}