feat: zap styles

fix: don't add duplicate emoji tags
feat: mentions
2023-06-28 11:38:59 +02:00 · 2023-06-28 11:14:12 +02:00 · 2023-06-28 10:53:16 +02:00 · 2023-06-28 08:56:16 +02:00 · 2023-06-28 08:54:11 +02:00 · 2023-06-28 08:43:50 +02:00
39 changed files with 2060 additions and 568 deletions
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1 @@
+{}
--- a/package.json
+++ b/package.json
@ -3,11 +3,17 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@react-hook/resize-observer": "^1.2.6",
    "@snort/system-react": "^1.0.8",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
+    "@types/webscopeio__react-textarea-autocomplete": "^4.7.2",
+    "@webscopeio/react-textarea-autocomplete": "^4.9.2",
    "hls.js": "^1.4.6",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.4",
    "qr-code-styling": "^1.6.0-rc.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
@ -43,7 +49,9 @@
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/lodash": "^4.14.195",
    "@webbtc/webln-types": "^1.0.12",
+    "prettier": "^2.8.8",
    "typescript": "^5.1.3"
  }
 }
--- a/src/element/avatar.tsx
+++ b/src/element/avatar.tsx
@ -0,0 +1,17 @@
+import { MetadataCache } from "@snort/system";
+
+export function Avatar({
+  user,
+  avatarClassname,
+}: {
+  user: MetadataCache;
+  avatarClassname: string;
+}) {
+  return (
+    <img
+      className={avatarClassname}
+      alt={user?.name || user?.pubkey}
+      src={user?.picture ?? ""}
+    />
+  );
+}
--- a/src/element/emoji.css
+++ b/src/element/emoji.css
@ -0,0 +1,6 @@
+.emoji {
+  width: 21px;
+  height: 21px;
+  display: inline-block;
+  margin-bottom: -5px;
+}
--- a/src/element/emoji.tsx
+++ b/src/element/emoji.tsx
@ -0,0 +1,33 @@
+import "./emoji.css";
+import { useMemo } from "react";
+
+export type EmojiProps = {
+  name: string;
+  url: string;
+};
+
+export function Emoji({ name, url }: EmojiProps) {
+  return <img alt={name} src={url} className="emoji" />;
+}
+
+export type EmojiTag = ["emoji", string, string];
+
+export function Emojify({
+  content,
+  emoji,
+}: {
+  content: string;
+  emoji: EmojiTag[];
+}) {
+  const emojified = useMemo(() => {
+    return content.split(/:(\w+):/g).map((i) => {
+      const t = emoji.find((t) => t[1] === i);
+      if (t) {
+        return <Emoji name={t[1]} url={t[2]} />;
+      } else {
+        return i;
+      }
+    });
+  }, [content, emoji]);
+  return <>{emojified}</>;
+}
--- a/src/element/hypertext.tsx
+++ b/src/element/hypertext.tsx
@ -0,0 +1,25 @@
+import { NostrLink } from "./nostr-link";
+
+interface HyperTextProps {
+  link: string;
+}
+
+export function HyperText({ link }: HyperTextProps) {
+  try {
+    const url = new URL(link);
+    if (url.protocol === "nostr:" || url.protocol === "web+nostr:") {
+      return <NostrLink link={link} />;
+    } else {
+      <a href={link} target="_blank" rel="noreferrer">
+        {link}
+      </a>;
+    }
+  } catch {
+    // Ignore the error.
+  }
+  return (
+    <a href={link} target="_blank" rel="noreferrer">
+      {link}
+    </a>
+  );
+}
--- a/src/element/live-chat.css
+++ b/src/element/live-chat.css
@ -1,22 +1,59 @@
 .live-chat {
-  height: calc(100vh - 72px - 96px);
+  grid-area: chat;
  display: flex;
  flex-direction: column;
-  padding: 24px 16px 8px 24px;
-  border: 1px solid #171717;
-  border-radius: 24px;
-  gap: 16px;
+  padding: 8px 16px;
+  border: none;
+  height: calc(100vh - 56px - 64px - 56px - 230px);
+}
+
+@media (min-width: 768px) {
+  .profile-info {
+    width: calc(100vw - 600px - 16px);
+  }
+
+  .live-chat {
+    width:  calc(100vw - 600px - 16px);
+    height: calc(100vh - 56px - 64px - 16px);
+  }
+
+  .video-content video {
+    width: 100%;
+  }
+}
+
+@media (min-width: 1020px)  {
+  .profile-info {
+    width: unset;
+    padding: 0;
+  }
+
+  .live-chat {
+    height: calc(100vh - 72px - 96px);
+    padding: 24px 16px 8px 24px;
+    border: 1px solid #171717;
+    border-radius: 24px;
+    gap: 16px;
+  }
+
+  .live-chat {
+    width:  320px;
+  }
+}
+
+@media (min-width: 2000px) {
+  .live-chat {
+    height: calc(100vh - 72px - 96px - 120px - 56px);
+  }
 }

 .live-chat>.header {
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
-  padding: 0px 0px 16px;
 }

 .live-chat>.messages {
-  flex-grow: 1;
  display: flex;
  gap: 12px;
  flex-direction: column-reverse;
@ -24,9 +61,19 @@
  overflow-x: hidden;
 }

+@media (min-width: 1020px){
+  .live-chat > .messages {
+    flex-grow: 1;
+  }
+}
+
 .live-chat>.write-message {
  display: flex;
  gap: 8px;
+  margin-top: auto;
+
+  padding-top: 8px;
+  border-top: 1px solid var(--border, #171717);
 }

 .live-chat>.write-message>div:nth-child(1) {
@ -43,6 +90,10 @@
  flex-grow: 1;
 }

+.live-chat .message {
+  word-wrap: break-word;
+}
+
 .live-chat .message .profile {
  gap: 8px;
  font-weight: 600;
@ -50,10 +101,18 @@
  float: left;
 }

+.live-chat .message .profile {
+  color: #34D2FE;
+}
+
 .live-chat .message.streamer .profile {
  color: #F838D9;
 }

+.live-chat .message a {
+  color: #F838D9;
+}
+
 .live-chat .profile img {
  width: 24px;
  height: 24px;
@ -66,7 +125,7 @@
  margin-left: 8px;
 }

-.live-chat .messages .pill {
+.live-chat .messages {
  color: white;
 }

@ -74,4 +133,91 @@
  display: flex;
  align-items: center;
  gap: 8px;
-}
+}
+
+.top-zappers h3 {
+  margin: 0;
+  font-size: 16px;
+  font-family: Outfit;
+  font-weight: 600;
+}
+
+.top-zappers-container {
+  display: flex;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.top-zappers-container::-webkit-scrollbar {
+  display: none;
+}
+
+@media (min-width: 1020px) {
+  .top-zappers-container {
+    display: flex;
+    gap: 8px;
+    padding-top: 12px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid var(--border, #171717);
+  }
+}
+
+.top-zapper {
+  display: flex;
+  padding: 4px 8px 4px 4px;
+  align-items: center;
+  gap: 8px;
+  border-radius: 49px;
+  border: 1px solid var(--border, #171717);
+}
+
+.top-zapper .top-zapper-amount {
+  font-size: 15px;
+  font-family: Outfit;
+  font-weight: 700;
+  line-height: 22px;
+  margin: 0;
+}
+
+.top-zapper .top-zapper-name {
+  font-size: 14px;
+  margin: 0;
+}
+
+.zap-icon {
+  color: #FFCB44;
+}
+
+.zap-container {
+  position: relative;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  background: black;
+  background-clip: padding-box;
+  padding: 8px 12px;
+}
+
+.zap-container:before {
+  content: '';
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  z-index: -1;
+  margin: -1px;
+  background: linear-gradient(to bottom right, #FF902B, #F83838);
+  border-radius: inherit;
+}
+
+.zap-container .profile {
+  color: #FFCB44;
+}
+
+.zap-container .zap-amount {
+  color: #FFCB44;
+}
+
+.zap-content {
+  margin-top: 8px;
+}
--- a/src/element/live-chat.tsx
+++ b/src/element/live-chat.tsx
@ -1,36 +1,214 @@
 import "./live-chat.css";
-import { EventKind, NostrLink, TaggedRawEvent, EventPublisher, parseZap } from "@snort/system";
-import { useState } from "react";
+import {
+  EventKind,
+  NostrLink,
+  TaggedRawEvent,
+  EventPublisher,
+  ParsedZap,
+  parseZap,
+} from "@snort/system";
+import {
+  useState,
+  useMemo,
+  useEffect,
+  type KeyboardEvent,
+  type ChangeEvent,
+} from "react";

+import useEmoji from "hooks/emoji";
 import { System } from "index";
 import { useLiveChatFeed } from "hooks/live-chat";
 import AsyncButton from "./async-button";
 import { Profile } from "./profile";
 import { Icon } from "./icon";
+import { Text } from "./text";
+import { Textarea } from "./textarea";
 import Spinner from "./spinner";
 import { useLogin } from "hooks/login";
 import { useUserProfile } from "@snort/system-react";
-import { formatSats, formatShort } from "number";
+import { formatSats } from "number";

 export interface LiveChatOptions {
-  canWrite?: boolean,
-  showHeader?: boolean
+  canWrite?: boolean;
+  showHeader?: boolean;
 }

-export function LiveChat({ link, options }: { link: NostrLink, options?: LiveChatOptions }) {
-  const [chat, setChat] = useState("");
+function totalZapped(pubkey: string, zaps: ParsedZap[]) {
+  return zaps
+    .filter((z) => (z.anonZap ? pubkey === "anon" : z.sender === pubkey))
+    .reduce((acc, z) => acc + z.amount, 0);
+}
+
+function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
+  const zappers = zaps
+    .map((z) => (z.anonZap ? "anon" : z.sender))
+    .map((p) => p as string);
+
+  const sortedZappers = useMemo(() => {
+    const sorted = [...new Set([...zappers])];
+    sorted.sort((a, b) => totalZapped(b, zaps) - totalZapped(a, zaps));
+    return sorted.slice(0, 3);
+  }, [zaps, zappers]);
+
+  return (
+    <>
+      <h3>Top zappers</h3>
+      <div className="top-zappers-container">
+        {sortedZappers.map((pk, idx) => {
+          const total = totalZapped(pk, zaps);
+          return (
+            <div className="top-zapper" key={pk}>
+              {pk === "anon" ? (
+                <p className="top-zapper-name">Anon</p>
+              ) : (
+                <Profile pubkey={pk} options={{ showName: false }} />
+              )}
+              <Icon name="zap" className="zap-icon" />
+              <p className="top-zapper-amount">{formatSats(total)}</p>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
+export function LiveChat({
+  link,
+  options,
+  height,
+}: {
+  link: NostrLink;
+  options?: LiveChatOptions;
+  height?: number;
+}) {
  const messages = useLiveChatFeed(link);
  const login = useLogin();
+  const events = messages.data ?? [];
+  const zaps = events
+    .filter((ev) => ev.kind === EventKind.ZapReceipt)
+    .map((ev) => parseZap(ev, System.ProfileLoader.Cache))
+    .filter((z) => z && z.valid);
+  return (
+    <div className="live-chat" style={height ? { height: `${height}px` } : {}}>
+      {(options?.showHeader ?? true) && (
+        <div className="header">Stream Chat</div>
+      )}
+      {zaps.length > 0 && (
+        <div className="top-zappers">
+          <TopZappers zaps={zaps} />
+        </div>
+      )}
+      <div className="messages">
+        {[...(messages.data ?? [])]
+          .sort((a, b) => b.created_at - a.created_at)
+          .map((a) => {
+            switch (a.kind) {
+              case 1311: {
+                return <ChatMessage ev={a} link={link} key={a.id} />;
+              }
+              case EventKind.ZapReceipt: {
+                return <ChatZap ev={a} key={a.id} />;
+              }
+            }
+            return null;
+          })}
+        {messages.data === undefined && <Spinner />}
+      </div>
+      {(options?.canWrite ?? true) && (
+        <div className="write-message">
+          {login ? (
+            <WriteMessage link={link} />
+          ) : (
+            <p>Please login to write messages!</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ChatMessage({ ev, link }: { ev: TaggedRawEvent; link: NostrLink }) {
+  return (
+    <div className={`message${link.author === ev.pubkey ? " streamer" : ""}`}>
+      <Profile pubkey={ev.pubkey} />
+      <Text ev={ev} />
+    </div>
+  );
+}
+
+function ChatZap({ ev }: { ev: TaggedRawEvent }) {
+  const parsed = parseZap(ev, System.ProfileLoader.Cache);
+  useUserProfile(System, parsed.anonZap ? undefined : parsed.sender);
+
+  useEffect(() => {
+    if (
+      !parsed.valid &&
+      parsed.errors.includes("zap service pubkey doesn't match") &&
+      parsed.sender
+    ) {
+      System.ProfileLoader.TrackMetadata(parsed.sender);
+      return () =>
+        System.ProfileLoader.UntrackMetadata(parsed.sender as string);
+    }
+  }, [parsed]);
+
+  if (!parsed.valid) {
+    return null;
+  }
+  return (
+    <div className="zap-container">
+      <div className="zap">
+        <Icon name="zap" className="zap-icon" />
+        <Profile
+          pubkey={parsed.anonZap ? "" : parsed.sender ?? ""}
+          options={{
+            showAvatar: !parsed.anonZap,
+            overrideName: parsed.anonZap ? "Anon" : undefined,
+          }}
+        />
+        zapped you
+        <span className="zap-amount">{formatSats(parsed.amount)}</span>
+        sats
+      </div>
+      {parsed.content && <div className="zap-content">{parsed.content}</div>}
+    </div>
+  );
+}
+
+function WriteMessage({ link }: { link: NostrLink }) {
+  const [chat, setChat] = useState("");
+  const login = useLogin();
+  const userEmojis = useEmoji(login!.pubkey);
+  const channelEmojis = useEmoji(link.author!);
+  const emojis = userEmojis.concat(channelEmojis);
+  const names = emojis.map((t) => t.at(1));

  async function sendChatMessage() {
    const pub = await EventPublisher.nip7();
    if (chat.length > 1) {
-      const reply = await pub?.generic(eb => {
-        return eb
-          .kind(1311 as EventKind)
+      let emojiNames = new Set();
+
+      for (const name of names) {
+        if (chat.includes(`:${name}:`)) {
+          emojiNames.add(name);
+        }
+      }
+
+      const reply = await pub?.generic((eb) => {
+        const emoji = [...emojiNames].map((name) =>
+          emojis.find((e) => e.at(1) === name)
+        );
+        eb.kind(1311 as EventKind)
          .content(chat)
          .tag(["a", `${link.kind}:${link.author}:${link.id}`, "", "root"])
          .processContent();
+        for (const e of emoji) {
+          if (e) {
+            eb.tag(e);
+          }
+        }
+        return eb;
      });
      if (reply) {
        console.debug(reply);
@ -40,21 +218,26 @@ export function LiveChat({ link, options }: { link: NostrLink, options?: LiveCha
    }
  }

-  function writeMessage() {
-    return <>
+  async function onKeyDown(e: KeyboardEvent) {
+    if (e.code === "Enter") {
+      e.preventDefault();
+      await sendChatMessage();
+    }
+  }
+
+  async function onChange(e: ChangeEvent) {
+    // @ts-expect-error
+    setChat(e.target.value);
+  }
+
+  return (
+    <>
      <div className="input">
-        <input
-          type="text"
-          autoFocus={false}
-          onChange={v => setChat(v.target.value)}
+        <Textarea
+          emojis={emojis}
          value={chat}
-          placeholder="Message"
-          onKeyDown={async e => {
-            if (e.code === "Enter") {
-              e.preventDefault();
-              await sendChatMessage();
-            }
-          }}
+          onKeyDown={onKeyDown}
+          onChange={onChange}
        />
        <Icon name="message" size={15} />
      </div>
@ -62,71 +245,5 @@ export function LiveChat({ link, options }: { link: NostrLink, options?: LiveCha
        Send
      </AsyncButton>
    </>
-  }
-
-  return (
-    <div className="live-chat">
-      {(options?.showHeader ?? true) && <div className="header">
-        Stream Chat
-      </div>}
-      <div className="messages">
-        {[...(messages.data ?? [])]
-          .sort((a, b) => b.created_at - a.created_at)
-          .map(a => {
-            switch (a.kind) {
-              case 1311: {
-                return <ChatMessage ev={a} link={link} key={a.id} />;
-              }
-              case EventKind.ZapReceipt: {
-                return <ChatZap ev={a} key={a.id} />
-              }
-            }
-            return null;
-          })}
-        {messages.data === undefined && <Spinner />}
-      </div>
-      {(options?.canWrite ?? true) && <div className="write-message">
-        {login ? writeMessage() : <p>Please login to write messages!</p>}
-      </div>}
-    </div>
  );
 }
-
-function ChatMessage({ ev, link }: { ev: TaggedRawEvent, link: NostrLink }) {
-  return (
-    <div className={`message${link.author === ev.pubkey ? " streamer" : ""}`}>
-      <Profile pubkey={ev.pubkey} />
-      <span>
-        {ev.content}
-      </span>
-    </div>
-  );
-}
-
-function ChatZap({ ev }: { ev: TaggedRawEvent }) {
-  const parsed = parseZap(ev, System.ProfileLoader.Cache);
-  useUserProfile(System, parsed.anonZap ? undefined : parsed.sender);
-
-  if (!parsed.valid) {
-    return null;
-  }
-  return (
-    <div className="pill">
-      <div className="zap">
-        <Icon name="zap" />
-        <Profile pubkey={parsed.anonZap ? "" : (parsed.sender ?? "")} options={{
-          showAvatar: !parsed.anonZap,
-          overrideName: parsed.anonZap ? "Anonymous" : undefined
-        }} />
-        zapped
-        &nbsp;
-        {formatSats(parsed.amount)}
-        &nbsp;
-        sats
-      </div>
-      {parsed.content && <p>
-        {parsed.content}
-      </p>}
-    </div>
-  );
-}
--- a/src/element/live-video-player.tsx
+++ b/src/element/live-video-player.tsx
@ -3,16 +3,23 @@ import { HTMLProps, useEffect, useMemo, useRef, useState } from "react";

 export enum VideoStatus {
  Online = "online",
-  Offline = "offline"
+  Offline = "offline",
 }

-export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?: string }) {
+export function LiveVideoPlayer(
+  props: HTMLProps<HTMLVideoElement> & { stream?: string }
+) {
  const video = useRef<HTMLVideoElement>(null);
  const streamCached = useMemo(() => props.stream, [props.stream]);
  const [status, setStatus] = useState<VideoStatus>();

  useEffect(() => {
-    if (streamCached && video.current && !video.current.src && Hls.isSupported()) {
+    if (
+      streamCached &&
+      video.current &&
+      !video.current.src &&
+      Hls.isSupported()
+    ) {
      try {
        const hls = new Hls();
        hls.loadSource(streamCached);
@ -20,15 +27,15 @@ export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?:
        hls.on(Hls.Events.ERROR, (event, data) => {
          console.debug(event, data);
          const errorType = data.type;
-          if (errorType === Hls.ErrorTypes.NETWORK_ERROR) {
+          if (errorType === Hls.ErrorTypes.NETWORK_ERROR && data.fatal) {
            hls.stopLoad();
            hls.detachMedia();
            setStatus(VideoStatus.Offline);
          }
-        })
+        });
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          setStatus(VideoStatus.Online);
-        })
+        });
        return () => hls.destroy();
      } catch (e) {
        console.error(e);
@ -37,9 +44,11 @@ export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?:
    }
  }, [video, streamCached]);
  return (
-    <div className={status}>
-      <div>{status}</div>
+    <>
+      <div className={status}>
+        <div>{status}</div>
+      </div>
      <video ref={video} {...props} controls={status === VideoStatus.Online} />
-    </div>
+    </>
  );
 }
--- a/src/element/mention.tsx
+++ b/src/element/mention.tsx
@ -0,0 +1,20 @@
+import { useUserProfile } from "@snort/system-react";
+import { System } from "index";
+
+interface MentionProps {
+  pubkey: string;
+  relays?: string[];
+}
+
+export function Mention({ pubkey, relays }: MentionProps) {
+  const user = useUserProfile(System, pubkey);
+  return (
+    <a
+      href={`https://snort.social/p/${pubkey}`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {user?.name || pubkey}
+    </a>
+  );
+}
--- a/src/element/modal.css
+++ b/src/element/modal.css
@ -1,22 +0,0 @@
-.modal {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.8);
-  display: flex;
-  justify-content: center;
-  z-index: 42;
-  overflow-y: auto;
-}
-
-.modal-body {
-  display: flex;
-  width: 430px;
-  padding: 32px;
-  margin-top: auto;
-  margin-bottom: auto;
-  border-radius: 32px;
-  background: #171717;
-}
--- a/src/element/modal.tsx
+++ b/src/element/modal.tsx
@ -1,26 +0,0 @@
-import "./modal.css";
-import { useEffect, MouseEventHandler, ReactNode } from "react";
-
-export interface ModalProps {
-  className?: string;
-  onClose?: MouseEventHandler;
-  children: ReactNode;
-}
-
-export default function Modal(props: ModalProps) {
-  const onClose = props.onClose || (() => undefined);
-  const className = props.className || "";
-
-  useEffect(() => {
-    document.body.classList.add("scroll-lock");
-    return () => document.body.classList.remove("scroll-lock");
-  }, []);
-
-  return (
-    <div className={`modal ${className}`} onClick={onClose}>
-      <div className="modal-body" onClick={e => e.stopPropagation()}>
-        {props.children}
-      </div>
-    </div>
-  );
-}
--- a/src/element/new-stream.css
+++ b/src/element/new-stream.css
@ -2,7 +2,6 @@
    display: flex;
    flex-direction: column;
    gap: 24px;
-    width: inherit;
 }

 .new-stream h3 {
@ -36,4 +35,17 @@

 .new-stream .btn:disabled {
    opacity: 0.3;
-}
+}
+
+.new-stream .pill {
+    border-radius: 16px;
+    background: #262626;
+    padding: 8px 12px;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.new-stream .pill.active {
+    color: inherit;
+    background: #353535;
+}
--- a/src/element/new-stream.tsx
+++ b/src/element/new-stream.tsx
@ -1,98 +1,207 @@
-import { useEffect, useState } from "react";
+import "./new-stream.css";
+import * as Dialog from "@radix-ui/react-dialog";
+
+import { useEffect, useState, useCallback } from "react";
 import { EventPublisher, NostrEvent } from "@snort/system";
 import { unixNow } from "@snort/shared";
-import "./new-stream.css";
+
 import AsyncButton from "./async-button";
-import { System } from "index";
+import { StreamState, System } from "index";
+import { Icon } from "element/icon";
 import { findTag } from "utils";

-export function NewStream({ ev, onFinish }: { ev?: NostrEvent, onFinish: () => void }) {
-    const [title, setTitle] = useState(findTag(ev, "title") ?? "");
-    const [summary, setSummary] = useState(findTag(ev, "summary") ?? "");
-    const [image, setImage] = useState(findTag(ev, "image") ?? "");
-    const [stream, setStream] = useState(findTag(ev, "streaming") ?? "");
-    const [isValid, setIsValid] = useState(false);
+export function NewStream({
+  ev,
+  onFinish,
+}: {
+  ev?: NostrEvent;
+  onFinish?: (ev: NostrEvent) => void;
+}) {
+  const [title, setTitle] = useState(findTag(ev, "title") ?? "");
+  const [summary, setSummary] = useState(findTag(ev, "summary") ?? "");
+  const [image, setImage] = useState(findTag(ev, "image") ?? "");
+  const [stream, setStream] = useState(findTag(ev, "streaming") ?? "");
+  const [status, setStatus] = useState(
+    findTag(ev, "status") ?? StreamState.Live
+  );
+  const [start, setStart] = useState(findTag(ev, "starts"));
+  const [isValid, setIsValid] = useState(false);

-    function validate() {
-        if (title.length < 2) {
-            return false;
-        }
-        if (stream.length < 5 || !stream.match(/^https?:\/\/.*\.m3u8?$/i)) {
-            return false;
-        }
-        if (image.length > 0 && !image.match(/^https?:\/\//i)) {
-            return false;
-        }
-        return true;
+  const validate = useCallback(() => {
+    if (title.length < 2) {
+      return false;
    }
-
-    useEffect(() => {
-        setIsValid(validate());
-    }, [title, summary, image, stream]);
-
-    async function publishStream() {
-        const pub = await EventPublisher.nip7();
-        if (pub) {
-            const evNew = await pub.generic(eb => {
-                const now = unixNow();
-                const dTag = findTag(ev, "d") ?? now.toString();
-                return eb.kind(30_311)
-                    .tag(["d", dTag])
-                    .tag(["title", title])
-                    .tag(["summary", summary])
-                    .tag(["image", image])
-                    .tag(["streaming", stream])
-                    .tag(["status", "live"])
-            });
-            console.debug(evNew);
-            System.BroadcastEvent(evNew);
-            onFinish();
-        }
+    if (stream.length < 5 || !stream.match(/^https?:\/\/.*\.m3u8?$/i)) {
+      return false;
    }
+    if (image.length > 0 && !image.match(/^https?:\/\//i)) {
+      return false;
+    }
+    return true;
+  }, [title, image, stream]);

-    return <div className="new-stream">
-        <h3>
-            {ev ? "Edit Stream" : "New Stream"}
-        </h3>
-        <div>
-            <p>
-                Title
-            </p>
-            <div className="input">
-                <input type="text" placeholder="What are we steaming today?" value={title} onChange={e => setTitle(e.target.value)} />
-            </div>
+  useEffect(() => {
+    setIsValid(validate());
+  }, [validate, title, summary, image, stream]);
+
+  async function publishStream() {
+    const pub = await EventPublisher.nip7();
+    if (pub) {
+      const evNew = await pub.generic((eb) => {
+        const now = unixNow();
+        const dTag = findTag(ev, "d") ?? now.toString();
+        const starts = start ?? now.toString();
+        const ends = findTag(ev, "ends") ?? now.toString();
+        eb.kind(30_311)
+          .tag(["d", dTag])
+          .tag(["title", title])
+          .tag(["summary", summary])
+          .tag(["image", image])
+          .tag(["streaming", stream])
+          .tag(["status", status])
+          .tag(["starts", starts]);
+        if (status === StreamState.Ended) {
+          eb.tag(["ends", ends]);
+        }
+        return eb;
+      });
+      console.debug(evNew);
+      System.BroadcastEvent(evNew);
+      onFinish && onFinish(evNew);
+    }
+  }
+
+  function toDateTimeString(n: number) {
+    return new Date(n * 1000).toISOString().substring(0, -1);
+  }
+
+  function fromDateTimeString(s: string) {
+    return Math.floor(new Date(s).getTime() / 1000);
+  }
+
+  return (
+    <div className="new-stream">
+      <h3>{ev ? "Edit Stream" : "New Stream"}</h3>
+      <div>
+        <p>Title</p>
+        <div className="input">
+          <input
+            type="text"
+            placeholder="What are we steaming today?"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
        </div>
-        <div>
-            <p>
-                Summary
-            </p>
-            <div className="input">
-                <input type="text" placeholder="A short description of the content" value={summary} onChange={e => setSummary(e.target.value)} />
-            </div>
+      </div>
+      <div>
+        <p>Summary</p>
+        <div className="input">
+          <input
+            type="text"
+            placeholder="A short description of the content"
+            value={summary}
+            onChange={(e) => setSummary(e.target.value)}
+          />
        </div>
-        <div>
-            <p>
-                Cover image
-            </p>
-            <div className="input">
-                <input type="text" placeholder="https://" value={image} onChange={e => setImage(e.target.value)} />
-            </div>
+      </div>
+      <div>
+        <p>Cover image</p>
+        <div className="input">
+          <input
+            type="text"
+            placeholder="https://"
+            value={image}
+            onChange={(e) => setImage(e.target.value)}
+          />
        </div>
-        <div>
-            <p>
-                Stream Url
-            </p>
-            <div className="input">
-                <input type="text" placeholder="https://" value={stream} onChange={e => setStream(e.target.value)} />
-            </div>
-            <small>
-                Stream type should be HLS
-            </small>
+      </div>
+      <div>
+        <p>Stream Url</p>
+        <div className="input">
+          <input
+            type="text"
+            placeholder="https://"
+            value={stream}
+            onChange={(e) => setStream(e.target.value)}
+          />
        </div>
-        <div>
-            <AsyncButton type="button" className="btn btn-primary" disabled={!isValid} onClick={publishStream}>
-                {ev ? "Save" : "Start Stream"}
-            </AsyncButton>
+        <small>Stream type should be HLS</small>
+      </div>
+      <div>
+        <p>Status</p>
+        <div className="flex g12">
+          {[StreamState.Live, StreamState.Planned, StreamState.Ended].map(
+            (v) => (
+              <span
+                className={`pill${status === v ? " active" : ""}`}
+                onClick={() => setStatus(v)}
+              >
+                {v}
+              </span>
+            )
+          )}
        </div>
+      </div>
+      {status === StreamState.Planned && (
+        <div>
+          <p>Start Time</p>
+          <div className="input">
+            <input
+              type="datetime-local"
+              value={toDateTimeString(Number(start ?? "0"))}
+              onChange={(e) =>
+                setStart(fromDateTimeString(e.target.value).toString())
+              }
+            />
+          </div>
+        </div>
+      )}
+      <div>
+        <AsyncButton
+          type="button"
+          className="btn btn-primary"
+          disabled={!isValid}
+          onClick={publishStream}
+        >
+          {ev ? "Save" : "Start Stream"}
+        </AsyncButton>
+      </div>
    </div>
-}
+  );
+}
+
+interface NewStreamDialogProps {
+  text?: string;
+  btnClassName?: string;
+  ev?: NostrEvent;
+  onFinish?: (e: NostrEvent) => void;
+}
+
+export function NewStreamDialog({
+  text,
+  ev,
+  onFinish,
+  btnClassName = "btn",
+}: NewStreamDialogProps) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button type="button" className={btnClassName}>
+          {text && text}
+          {!text && (
+            <>
+              <span className="hide-on-mobile">New Stream</span>
+              <Icon name="signal" />
+            </>
+          )}
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className="dialog-overlay" />
+        <Dialog.Content className="dialog-content">
+          <NewStream ev={ev} onFinish={onFinish} />
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
--- a/src/element/nostr-link.tsx
+++ b/src/element/nostr-link.tsx
@ -0,0 +1,16 @@
+import { NostrPrefix, tryParseNostrLink } from "@snort/system";
+import { Mention } from "./mention";
+
+export function NostrLink({ link }: { link: string }) {
+  const nav = tryParseNostrLink(link);
+  if (
+    nav?.type === NostrPrefix.PublicKey ||
+    nav?.type === NostrPrefix.Profile
+  ) {
+    return <Mention pubkey={nav.id} relays={nav.relays} />;
+  } else {
+    <a href={link} target="_blank" rel="noreferrer" className="ext">
+      {link}
+    </a>;
+  }
+}
--- a/src/element/profile.css
+++ b/src/element/profile.css
@ -14,4 +14,5 @@
    background: #A7A7A7;
    border: unset;
    outline: unset;
-}
+    object-fit: cover;
+}
--- a/src/element/profile.tsx
+++ b/src/element/profile.tsx
@ -5,28 +5,45 @@ import { hexToBech32 } from "@snort/shared";
 import { System } from "index";

 export interface ProfileOptions {
-    showName?: boolean
-    showAvatar?: boolean
-    suffix?: string
-    overrideName?: string
+  showName?: boolean;
+  showAvatar?: boolean;
+  suffix?: string;
+  overrideName?: string;
 }

 export function getName(pk: string, user?: UserMetadata) {
-    const shortPubkey = hexToBech32("npub", pk).slice(0, 12);
-    if ((user?.display_name?.length ?? 0) > 0) {
-        return user?.display_name;
-    }
-    if ((user?.name?.length ?? 0) > 0) {
-        return user?.name;
-    }
-    return shortPubkey;
+  const shortPubkey = hexToBech32("npub", pk).slice(0, 12);
+  if ((user?.display_name?.length ?? 0) > 0) {
+    return user?.display_name;
+  }
+  if ((user?.name?.length ?? 0) > 0) {
+    return user?.name;
+  }
+  return shortPubkey;
 }

-export function Profile({ pubkey, options }: { pubkey: string, options?: ProfileOptions }) {
-    const profile = useUserProfile(System, pubkey);
+export function Profile({
+  pubkey,
+  avatarClassname,
+  options,
+}: {
+  pubkey: string;
+  avatarClassname?: string;
+  options?: ProfileOptions;
+}) {
+  const profile = useUserProfile(System, pubkey);

-    return <div className="profile">
-        {(options?.showAvatar ?? true) && <img src={profile?.picture ?? ""} />}
-        {(options?.showName ?? true) && (options?.overrideName ?? getName(pubkey, profile))}
+  return (
+    <div className="profile">
+      {(options?.showAvatar ?? true) && (
+        <img
+          alt={profile?.name || pubkey}
+          className={avatarClassname ? avatarClassname : ""}
+          src={profile?.picture ?? ""}
+        />
+      )}
+      {(options?.showName ?? true) &&
+        (options?.overrideName ?? getName(pubkey, profile))}
    </div>
-}
+  );
+}
--- a/src/element/qr-code.tsx
+++ b/src/element/qr-code.tsx
@ -44,7 +44,12 @@ export default function QrCode(props: QrCodeProps) {
    } else if (qrRef.current) {
      qrRef.current.innerHTML = "";
    }
-  }, [props.data, props.link]);
+  }, [props.data, props.link, props.width, props.height, props.avatar]);

-  return <div className={`qr${props.className ? ` ${props.className}` : ""}`} ref={qrRef}></div>;
+  return (
+    <div
+      className={`qr${props.className ? ` ${props.className}` : ""}`}
+      ref={qrRef}
+    ></div>
+  );
 }
--- a/src/element/send-zap.css
+++ b/src/element/send-zap.css
@ -1,5 +1,4 @@
 .send-zap {
-    width: inherit;
    display: flex;
    gap: 24px;
    flex-direction: column;
@ -58,4 +57,4 @@

 .send-zap .qr {
    align-self: center;
-}
+}
--- a/src/element/send-zap.tsx
+++ b/src/element/send-zap.tsx
@ -1,4 +1,5 @@
 import "./send-zap.css";
+import * as Dialog from "@radix-ui/react-dialog";
 import { useEffect, useState } from "react";
 import { LNURL } from "@snort/shared";
 import { NostrEvent, EventPublisher } from "@snort/system";
@ -9,107 +10,171 @@ import { findTag } from "utils";
 import { Relays } from "index";
 import QrCode from "./qr-code";

-export function SendZaps({ lnurl, ev, targetName, onFinish }: { lnurl: string, ev?: NostrEvent, targetName?: string, onFinish: () => void }) {
-    const UsdRate = 30_000;
+interface SendZapsProps {
+  lnurl: string;
+  ev?: NostrEvent;
+  targetName?: string;
+  onFinish: () => void;
+}

-    const satsAmounts = [
-        100, 1_000, 5_000, 10_000, 50_000, 100_000, 500_000, 1_000_000
-    ];
-    const usdAmounts = [
-        0.05, 0.50, 2, 5, 10, 50, 100, 200
-    ]
-    const [isFiat, setIsFiat] = useState(false);
-    const [svc, setSvc] = useState<LNURL>();
-    const [amount, setAmount] = useState(satsAmounts[0]);
-    const [comment, setComment] = useState("");
-    const [invoice, setInvoice] = useState("");
+function SendZaps({ lnurl, ev, targetName, onFinish }: SendZapsProps) {
+  const UsdRate = 30_000;

-    const name = targetName ?? svc?.name;
-    async function loadService() {
-        const s = new LNURL(lnurl);
-        await s.load();
-        setSvc(s);
+  const satsAmounts = [
+    100, 1_000, 5_000, 10_000, 50_000, 100_000, 500_000, 1_000_000,
+  ];
+  const usdAmounts = [0.05, 0.5, 2, 5, 10, 50, 100, 200];
+  const [isFiat, setIsFiat] = useState(false);
+  const [svc, setSvc] = useState<LNURL>();
+  const [amount, setAmount] = useState(satsAmounts[0]);
+  const [comment, setComment] = useState("");
+  const [invoice, setInvoice] = useState("");
+
+  const name = targetName ?? svc?.name;
+  async function loadService() {
+    const s = new LNURL(lnurl);
+    await s.load();
+    setSvc(s);
+  }
+
+  useEffect(() => {
+    if (!svc) {
+      loadService().catch(console.warn);
    }
+  }, [lnurl]);

-    useEffect(() => {
-        if (!svc) {
-            loadService().catch(console.warn);
-        }
-    }, [lnurl]);
-
-    async function send() {
-        if (!svc) return;
-        const pub = await EventPublisher.nip7();
-        if (!pub) return;
-
-        const amountInSats = isFiat ? Math.floor((amount / UsdRate) * 1e8) : amount;
-        let zap: NostrEvent | undefined;
-        if (ev) {
-            zap = await pub.zap(amountInSats * 1000, ev.pubkey, Relays, undefined, comment, eb => {
-                return eb.tag(["a", `${ev.kind}:${ev.pubkey}:${findTag(ev, "d")}`]);
-            });
-        }
-        const invoice = await svc.getInvoice(amountInSats, comment, zap);
-        if (!invoice.pr) return;
-
-        if (window.webln) {
-            await window.webln.enable();
-            await window.webln.sendPayment(invoice.pr);
-            onFinish();
-        } else {
-            setInvoice(invoice.pr);
+  async function send() {
+    if (!svc) return;
+    const pub = await EventPublisher.nip7();
+    if (!pub) return;
+
+    const amountInSats = isFiat ? Math.floor((amount / UsdRate) * 1e8) : amount;
+    let zap: NostrEvent | undefined;
+    if (ev) {
+      zap = await pub.zap(
+        amountInSats * 1000,
+        ev.pubkey,
+        Relays,
+        undefined,
+        comment,
+        (eb) => {
+          return eb.tag(["a", `${ev.kind}:${ev.pubkey}:${findTag(ev, "d")}`]);
        }
+      );
    }
+    const invoice = await svc.getInvoice(amountInSats, comment, zap);
+    if (!invoice.pr) return;

-    function input() {
-        if (invoice) return;
-        return <>
-            <div className="flex g12">
-                <span className={`pill${isFiat ? "" : " active"}`} onClick={() => { setIsFiat(false); setAmount(satsAmounts[0]) }}>
-                    SATS
-                </span>
-                <span className={`pill${isFiat ? " active" : ""}`} onClick={() => { setIsFiat(true); setAmount(usdAmounts[0]) }}>
-                    USD
-                </span>
-            </div>
-            <div>
-                <small>Zap amount in {isFiat ? "USD" : "sats"}</small>
-                <div className="amounts">
-                    {(isFiat ? usdAmounts : satsAmounts).map(a =>
-                        <span key={a} className={`pill${a === amount ? " active" : ""}`} onClick={() => setAmount(a)}>
-                            {isFiat ? `$${a.toLocaleString()}` : formatSats(a)}
-                        </span>)}
-                </div>
-            </div>
-            <div>
-                <small>
-                    Your comment for {name}
-                </small>
-                <div className="input">
-                    <textarea placeholder="Nice!" value={comment} onChange={e => setComment(e.target.value)} />
-                </div>
-            </div>
-            <div>
-                <AsyncButton onClick={send} className="btn btn-primary">
-                    Zap!
-                </AsyncButton>
-            </div>
-        </>
+    if (window.webln) {
+      await window.webln.enable();
+      await window.webln.sendPayment(invoice.pr);
+      onFinish();
+    } else {
+      setInvoice(invoice.pr);
    }
+  }

-    function payInvoice() {
-        if (!invoice) return;
+  function input() {
+    if (invoice) return;
+    return (
+      <>
+        <div className="flex g12">
+          <span
+            className={`pill${isFiat ? "" : " active"}`}
+            onClick={() => {
+              setIsFiat(false);
+              setAmount(satsAmounts[0]);
+            }}
+          >
+            SATS
+          </span>
+          <span
+            className={`pill${isFiat ? " active" : ""}`}
+            onClick={() => {
+              setIsFiat(true);
+              setAmount(usdAmounts[0]);
+            }}
+          >
+            USD
+          </span>
+        </div>
+        <div>
+          <small>Zap amount in {isFiat ? "USD" : "sats"}</small>
+          <div className="amounts">
+            {(isFiat ? usdAmounts : satsAmounts).map((a) => (
+              <span
+                key={a}
+                className={`pill${a === amount ? " active" : ""}`}
+                onClick={() => setAmount(a)}
+              >
+                {isFiat ? `$${a.toLocaleString()}` : formatSats(a)}
+              </span>
+            ))}
+          </div>
+        </div>
+        <div>
+          <small>Your comment for {name}</small>
+          <div className="input">
+            <textarea
+              placeholder="Nice!"
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+            />
+          </div>
+        </div>
+        <div>
+          <AsyncButton onClick={send} className="btn btn-primary">
+            Zap!
+          </AsyncButton>
+        </div>
+      </>
+    );
+  }

-        const link = `lightning:${invoice}`;
-        return <QrCode data={link} link={link} />
-    }
+  function payInvoice() {
+    if (!invoice) return;

-    return <div className="send-zap">
-        <h3>
-            Zap {name}
-            <Icon name="zap" />
-        </h3>
-        {input()}
-        {payInvoice()}
+    const link = `lightning:${invoice}`;
+    return <QrCode data={link} link={link} />;
+  }
+
+  return (
+    <div className="send-zap">
+      <h3>
+        Zap {name}
+        <Icon name="zap" />
+      </h3>
+      {input()}
+      {payInvoice()}
    </div>
-}
+  );
+}
+
+export function SendZapsDialog({
+  lnurl,
+  ev,
+  targetName,
+}: Omit<SendZapsProps, "onFinish">) {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+      <Dialog.Trigger asChild>
+        <button className="btn btn-primary zap">
+          <span className="hide-on-mobile">Zap</span>
+          <Icon name="zap" size={16} />
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className="dialog-overlay" />
+        <Dialog.Content className="dialog-content">
+          <SendZaps
+            lnurl={lnurl}
+            ev={ev}
+            targetName={targetName}
+            onFinish={() => setIsOpen(false)}
+          />
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
--- a/src/element/text.css
+++ b/src/element/text.css
@ -0,0 +1,5 @@
+.custom-emoji {
+  width: 21px;
+  height: 21px;
+  display: inline-block;
+}
--- a/src/element/text.tsx
+++ b/src/element/text.tsx
@ -0,0 +1,84 @@
+import { useMemo, type ReactNode } from "react";
+import { TaggedRawEvent, validateNostrLink } from "@snort/system";
+import { splitByUrl } from "utils";
+import { Emoji } from "./emoji";
+import { HyperText } from "./hypertext";
+
+type Fragment = string | ReactNode;
+
+function transformText(fragments: Fragment[], tags: string[][]) {
+  return extractLinks(extractEmoji(fragments, tags));
+}
+
+function extractEmoji(fragments: Fragment[], tags: string[][]) {
+  return fragments
+    .map((f) => {
+      if (typeof f === "string") {
+        return f.split(/:([\w-]+):/g).map((i) => {
+          const t = tags.find((a) => a[0] === "emoji" && a[1] === i);
+          if (t) {
+            return <Emoji name={t[1]} url={t[2]} />;
+          } else {
+            return i;
+          }
+        });
+      }
+      return f;
+    })
+    .flat();
+}
+
+function extractLinks(fragments: Fragment[]) {
+  return fragments
+    .map((f) => {
+      if (typeof f === "string") {
+        return splitByUrl(f).map((a) => {
+          const validateLink = () => {
+            const normalizedStr = a.toLowerCase();
+
+            if (
+              normalizedStr.startsWith("web+nostr:") ||
+              normalizedStr.startsWith("nostr:")
+            ) {
+              return validateNostrLink(normalizedStr);
+            }
+
+            return (
+              normalizedStr.startsWith("http:") ||
+              normalizedStr.startsWith("https:") ||
+              normalizedStr.startsWith("magnet:")
+            );
+          };
+
+          if (validateLink()) {
+            if (!a.startsWith("nostr:")) {
+              return (
+                <a
+                  href={a}
+                  onClick={(e) => e.stopPropagation()}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="ext"
+                >
+                  {a}
+                </a>
+              );
+            }
+            return <HyperText link={a} />;
+          }
+          return a;
+        });
+      }
+      return f;
+    })
+    .flat();
+}
+
+export function Text({ ev }: { ev: TaggedRawEvent }) {
+  // todo: RTL langugage support
+  const element = useMemo(() => {
+    return <span>{transformText([ev.content], ev.tags)}</span>;
+  }, [ev]);
+
+  return <>{element}</>;
+}
--- a/src/element/textarea.css
+++ b/src/element/textarea.css
@ -0,0 +1,39 @@
+.rta__textarea {
+  resize: none;
+}
+
+.rta__list {
+  border: none;
+}
+.rta__item:not(:last-child) {
+  border: none;
+}
+.rta__entity--selected .emoji-item {
+  text-decoration: none;
+  background: #F838D9;
+}
+
+.emoji-item, .user-item {
+  color: white;
+  background: #171717;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  font-size: 16px;
+  padding: 10px;
+}
+
+.emoji-item:hover, .user-item:hover {
+  color: #171717;
+  background: white;
+}
+
+.user-image {
+  width: 21px;
+  height: 21px;
+  border-radius: 100%;
+}
+
+.user-details {
+}
--- a/src/element/textarea.tsx
+++ b/src/element/textarea.tsx
@ -0,0 +1,92 @@
+import "./textarea.css";
+import type { KeyboardEvent, ChangeEvent } from "react";
+import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
+import "@webscopeio/react-textarea-autocomplete/style.css";
+import uniqWith from "lodash/uniqWith";
+import isEqual from "lodash/isEqual";
+import { MetadataCache, NostrPrefix } from "@snort/system";
+import { System } from "index";
+import { Emoji, type EmojiTag } from "./emoji";
+import { Avatar } from "element/avatar";
+import { hexToBech32 } from "utils";
+
+interface EmojiItemProps {
+  name: string;
+  url: string;
+}
+
+const EmojiItem = ({ entity: { name, url } }: { entity: EmojiItemProps }) => {
+  return (
+    <div className="emoji-item">
+      <div className="emoji-image">
+        <Emoji name={name} url={url} />
+      </div>
+      <div className="emoji-name">{name}</div>
+    </div>
+  );
+};
+
+const UserItem = (metadata: MetadataCache) => {
+  const { pubkey, display_name, nip05, ...rest } = metadata;
+  return (
+    <div key={pubkey} className="user-item">
+      <Avatar avatarClassname="user-image" user={metadata} />
+      <div className="user-details">{display_name || rest.name}</div>
+    </div>
+  );
+};
+
+interface TextareaProps {
+  emojis: EmojiTag[];
+  value: string;
+  onChange: (e: ChangeEvent<Element>) => void;
+  onKeyDown: (e: KeyboardEvent<Element>) => void;
+}
+
+export function Textarea({ emojis, ...props }: TextareaProps) {
+  const userDataProvider = async (token: string) => {
+    // @ts-expect-error: Property 'search'
+    return System.ProfileLoader.Cache.search(token);
+  };
+
+  const emojiDataProvider = async (token: string) => {
+    const results = emojis
+      .map((t) => {
+        return {
+          name: t.at(1) || "",
+          url: t.at(2) || "",
+        };
+      })
+      .filter(({ name }) => name.toLowerCase().includes(token.toLowerCase()));
+    return uniqWith(results, isEqual).slice(0, 5);
+  };
+
+  const trigger = {
+    ":": {
+      dataProvider: emojiDataProvider,
+      component: EmojiItem,
+      output: (item: EmojiItemProps) => `:${item.name}:`,
+    },
+    "@": {
+      afterWhitespace: true,
+      dataProvider: userDataProvider,
+      component: (props: { entity: MetadataCache }) => (
+        <UserItem {...props.entity} />
+      ),
+      output: (item: { pubkey: string }) =>
+        `@${hexToBech32(NostrPrefix.PublicKey, item.pubkey)}`,
+    },
+  };
+
+  return (
+    <ReactTextareaAutocomplete
+      dir="auto"
+      loadingComponent={() => <span>Loading...</span>}
+      placeholder="Message"
+      autoFocus={false}
+      // @ts-expect-error
+      trigger={trigger}
+      {...props}
+    />
+  );
+}
--- a/src/element/video-tile.css
+++ b/src/element/video-tile.css
@ -18,4 +18,5 @@
 .video-tile .pill {
    float: right;
    margin: 16px 20px 0 0;
+    text-transform: uppercase;
 }
--- a/src/hooks/emoji.tsx
+++ b/src/hooks/emoji.tsx
@ -0,0 +1,74 @@
+import { RequestBuilder, EventKind, FlatNoteStore } from "@snort/system";
+import { useRequestBuilder } from "@snort/system-react";
+import { System } from "index";
+import { useMemo } from "react";
+import type { EmojiTag } from "../element/emoji";
+
+export default function useEmoji(pubkey: string) {
+  const sub = useMemo(() => {
+    const rb = new RequestBuilder(`emoji:${pubkey}`);
+
+    rb.withFilter()
+      .authors([pubkey])
+      .kinds([10030 as EventKind, 30030 as EventKind]);
+
+    return rb;
+  }, [pubkey]);
+
+  const { data } = useRequestBuilder<FlatNoteStore>(System, FlatNoteStore, sub);
+  const userEmoji = useMemo(() => {
+    return data ?? [];
+  }, [data]);
+
+  const related = useMemo(() => {
+    if (userEmoji) {
+      const tags = userEmoji.at(0)?.tags ?? [];
+      return tags.filter(
+        (t) => t.at(0) === "a" && t.at(1)?.startsWith(`30030:`)
+      );
+    }
+    return [];
+  }, [userEmoji]);
+
+  const subRelated = useMemo(() => {
+    const splitted = related.map((t) => t.at(1)!.split(":"));
+    const authors = splitted
+      .map((s) => s.at(1))
+      .filter((s) => s)
+      .map((s) => s as string);
+    const identifiers = splitted
+      .map((s) => s.at(2))
+      .filter((s) => s)
+      .map((s) => s as string);
+
+    const rb = new RequestBuilder(`emoji-related:${pubkey}`);
+
+    rb.withFilter()
+      .kinds([30030 as EventKind])
+      .authors(authors)
+      // @ts-expect-error
+      .tag(["d", identifiers]);
+
+    return rb;
+  }, [pubkey, related]);
+
+  const { data: relatedData } = useRequestBuilder<FlatNoteStore>(
+    System,
+    FlatNoteStore,
+    subRelated
+  );
+  const emojiPacks = useMemo(() => {
+    return relatedData ?? [];
+  }, [relatedData]);
+
+  const emojis = useMemo(() => {
+    return userEmoji
+      .concat(emojiPacks)
+      .map((ev) => {
+        return ev.tags.filter((t) => t.at(0) === "emoji");
+      })
+      .flat() as EmojiTag[];
+  }, [userEmoji, emojiPacks]);
+
+  return emojis;
+}
--- a/src/hooks/event-feed.ts
+++ b/src/hooks/event-feed.ts
@ -1,12 +1,20 @@
 import { useMemo } from "react";
-import { NostrPrefix, RequestBuilder, ReplaceableNoteStore, NostrLink } from "@snort/system";
+import {
+  NostrPrefix,
+  RequestBuilder,
+  ReplaceableNoteStore,
+  NostrLink,
+} from "@snort/system";
 import { useRequestBuilder } from "@snort/system-react";

 import { System } from "index";

-export default function useEventFeed(link: NostrLink) {
+export default function useEventFeed(link: NostrLink, leaveOpen = false) {
  const sub = useMemo(() => {
    const b = new RequestBuilder(`event:${link.id.slice(0, 12)}`);
+    b.withOptions({
+      leaveOpen,
+    });
    if (link.type === NostrPrefix.Address) {
      const f = b.withFilter().tag("d", [link.id]);
      if (link.author) {
@ -18,14 +26,18 @@ export default function useEventFeed(link: NostrLink) {
    } else {
      const f = b.withFilter().ids([link.id]);
      if (link.relays) {
-        link.relays.slice(0, 2).forEach(r => f.relay(r));
+        link.relays.slice(0, 2).forEach((r) => f.relay(r));
      }
      if (link.author) {
        f.authors([link.author]);
      }
    }
    return b;
-  }, [link]);
+  }, [link, leaveOpen]);

-  return useRequestBuilder<ReplaceableNoteStore>(System, ReplaceableNoteStore, sub);
+  return useRequestBuilder<ReplaceableNoteStore>(
+    System,
+    ReplaceableNoteStore,
+    sub
+  );
 }
--- a/src/index.css
+++ b/src/index.css
@ -83,7 +83,7 @@ a {
  gap: 8px;
 }

-input[type="text"], textarea {
+input[type="text"], textarea, input[type="datetime-local"] {
  font-family: inherit;
  border: unset;
  background-color: unset;
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,56 +1,62 @@
-import './index.css';
+import "./index.css";

-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import React from "react";
+import ReactDOM from "react-dom/client";
 import { NostrSystem } from "@snort/system";
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { RouterProvider, createBrowserRouter } from "react-router-dom";

-import { RootPage } from './pages/root';
-import { LayoutPage } from 'pages/layout';
-import { StreamPage } from 'pages/stream-page';
-import { ChatPopout } from 'pages/chat-popout';
-import { LoginStore } from 'login';
+import { RootPage } from "./pages/root";
+import { LayoutPage } from "pages/layout";
+import { StreamPage } from "pages/stream-page";
+import { ChatPopout } from "pages/chat-popout";
+import { LoginStore } from "login";

-export const System = new NostrSystem({
+export enum StreamState {
+  Live = "live",
+  Ended = "ended",
+  Planned = "planned"
+}

-});
+export const System = new NostrSystem({});
 export const Login = new LoginStore();

 export const Relays = [
  "wss://relay.snort.social",
  "wss://nos.lol",
  "wss://relay.damus.io",
-  "wss://nostr.wine"
+  "wss://nostr.wine",
 ];

-Relays.forEach(r => System.ConnectToRelay(r, { read: true, write: true }));
+Relays.forEach((r) => System.ConnectToRelay(r, { read: true, write: true }));

 const router = createBrowserRouter([
  {
    element: <LayoutPage />,
-    loader: async() => {
+    loader: async () => {
      await System.Init();
      return null;
    },
    children: [
      {
        path: "/",
-        element: <RootPage />
+        element: <RootPage />,
      },
      {
        path: "/live/:id",
-        element: <StreamPage />
-      }
-    ]
+        element: <StreamPage />,
+      },
+    ],
  },
  {
    path: "/chat/:id",
-    element: <ChatPopout />
-  }
-])
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLDivElement);
+    element: <ChatPopout />,
+  },
+]);
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLDivElement
+);
 root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
-);
+);
--- a/src/pages/chat-popout.css
+++ b/src/pages/chat-popout.css
@ -1,5 +1,13 @@
+.popout-chat {
+  grid-area: main-content;
+}
+
 .popout-chat .live-chat {
-    height: calc(100vh - 20px);
+  margin-left: 0;
+}
+
+.popout-chat .live-chat {
+    height: calc(100vh);
    padding: 10px;
    border: unset;
    border-radius: unset;
@ -7,4 +15,4 @@

 .popout-chat .live-chat .messages {
    overflow: hidden;
-}
+}
--- a/src/pages/chat-popout.tsx
+++ b/src/pages/chat-popout.tsx
@ -4,13 +4,18 @@ import { useParams } from "react-router-dom";
 import { parseNostrLink } from "@snort/system";

 export function ChatPopout() {
-    const params = useParams();
-    const link = parseNostrLink(params.id!);
+  const params = useParams();
+  const link = parseNostrLink(params.id!);

-    return <div className="popout-chat">
-        <LiveChat link={link} options={{
-            canWrite: false,
-            showHeader: false
-        }} />
+  return (
+    <div className="popout-chat">
+      <LiveChat
+        link={link}
+        options={{
+          canWrite: false,
+          showHeader: false,
+        }}
+      />
    </div>
-}
+  );
+}
--- a/src/pages/layout.css
+++ b/src/pages/layout.css
@ -1,12 +1,92 @@
-header {
-    display: grid;
-    grid-template-columns: min-content min-content auto;
-    gap: 24px;
-    align-items: center;
-    padding: 24px 40px 0 40px;
+.page {
+  display: grid;
+  gap: 0;
+  grid-template-areas:
+    "header"
+    "main-content"
+    "profile"
+    "chat";
+  grid-template-rows: 64px 230px 56px 1fr;
+  grid-template-columns: 1fr;
+  height: 100vh;
 }

-header>div:nth-child(1) {
+
+.page.home {
+  display: grid;
+  height: 100vh;
+  grid-template-areas:
+    "header"
+    "main-content";
+  grid-template-rows: 64px 1fr;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+  .page {
+    display: grid;
+    height: 100vh;
+    grid-template-areas:
+      "header header"
+      "main-content profile"
+      "main-content chat";
+    grid-template-rows: 64px min-content;
+    grid-template-columns: 600px 1fr;
+    gap: 0;
+  } 
+
+  .video-content video {
+    height: 100%;
+  }
+
+}
+
+@media (min-width: 1020px) {
+  .page {
+    display: grid;
+    height: calc(100vh - 72px);
+    padding: 0 40px;
+    grid-template-columns: auto 376px;
+    grid-template-rows: unset;
+    grid-template-areas:
+      "header header"
+      "main-content chat"
+      "profile chat";
+    gap: 0;
+  }
+
+}
+
+@media (min-width: 2000px) {
+  .page {
+    padding: 0 40px;
+    grid-template-columns: auto 450px;
+  }
+  .video-content {
+    max-height: calc(100vh - 320px);
+  }
+  .video-content video {
+    height: 100%;
+  }
+}
+
+header {
+    grid-area: header;
+    align-items: center;
+    display: grid;
+    grid-template-columns: min-content min-content auto;
+    padding: 8px 16px;
+    gap: 8px;
+}
+
+@media (min-width: 1020px) {
+  header {
+    gap: 24px;
+    padding: 24px 0 32px 0;
+  }
+}
+
+header .logo {
    background: #171717;
    border-radius: 16px;
    width: 48px;
@ -19,12 +99,12 @@ header>div:nth-child(1) {
    cursor: pointer;
 }

-header>div:nth-child(2) {
+header .input {
    min-width: 300px;
    height: 32px;
 }

-header>div:nth-child(3) {
+header .header-right {
    justify-self: end;
    display: flex;
    gap: 24px;
@ -44,4 +124,67 @@ header button {
 header .profile img {
    width: 48px;
    height: 48px;
-}
+}
+
+@media (max-width: 1020px) {
+  header .header-right {
+    gap: 8px;
+  }
+
+  header .input {
+    min-width: unset;
+  }
+
+  header .input .search-input {
+    display: none;
+  }
+
+  header .new-stream-button-text {
+    display: none;
+  }
+}
+
+button span.hide-on-mobile {
+  display: none;
+}
+
+@media (min-width: 1020px) {
+  button span.hide-on-mobile {
+    display: block;
+  }
+}
+
+.popout-chat {
+  display: grid;
+  grid-template-areas:
+    "main-content";
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  height: 100vh;
+  gap: 0;
+}
+
+.popout-chat .live-chat {
+  padding: 8px 16px;
+  height: 100vh;
+  width: 100vw; 
+}
+
+.dialog-overlay {
+  background-color: rgba(0, 0, 0, 0.8);
+  position: fixed;
+  inset: 0;
+}
+
+.dialog-content {
+  background-color: #171717;
+  border-radius: 6px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 450px;
+  max-height: 85vh;
+  padding: 25px;
+}
--- a/src/pages/layout.tsx
+++ b/src/pages/layout.tsx
@ -1,69 +1,96 @@
 import { Icon } from "element/icon";
 import "./layout.css";
-import { EventPublisher } from "@snort/system";
-import { Outlet, useNavigate } from "react-router-dom";
+import {
+  EventPublisher,
+  NostrEvent,
+  encodeTLV,
+  NostrPrefix,
+} from "@snort/system";
+import { Outlet, useNavigate, useLocation } from "react-router-dom";
 import AsyncButton from "element/async-button";
 import { Login } from "index";
 import { useLogin } from "hooks/login";
 import { Profile } from "element/profile";
-import Modal from "element/modal";
-import { NewStream } from "element/new-stream";
-import { useState } from "react";
+import { NewStreamDialog } from "element/new-stream";

 export function LayoutPage() {
-    const navigate = useNavigate();
-    const login = useLogin();
-    const [newStream, setNewStream] = useState(false);
+  const navigate = useNavigate();
+  const login = useLogin();
+  const location = useLocation();

-    async function doLogin() {
-        const pub = await EventPublisher.nip7();
-        if (pub) {
-            Login.loginWithPubkey(pub.pubKey);
-        }
+  async function doLogin() {
+    const pub = await EventPublisher.nip7();
+    if (pub) {
+      Login.loginWithPubkey(pub.pubKey);
    }
+  }

-    function loggedIn() {
-        if (!login) return;
+  function loggedIn() {
+    if (!login) return;

-        return <>
-            <button type="button" className="btn btn-primary" onClick={() => setNewStream(true)}>
-                New Stream
-                <Icon name="signal" />
-            </button>
-            <Profile pubkey={login.pubkey} options={{
-                showName: false
-            }} />
-        </>
-    }
+    return (
+      <>
+        <NewStreamDialog btnClassName="btn btn-primary" onFinish={goToStream} />
+        <Profile
+          avatarClassname="mb-squared"
+          pubkey={login.pubkey}
+          options={{
+            showName: false,
+          }}
+        />
+      </>
+    );
+  }

-    function loggedOut() {
-        if (login) return;
+  function loggedOut() {
+    if (login) return;

-        return <>
-            <AsyncButton type="button" className="btn btn-border" onClick={doLogin}>
-                Login
-                <Icon name="login" />
-            </AsyncButton>
-        </>
-    }
+    return (
+      <>
+        <AsyncButton type="button" className="btn btn-border" onClick={doLogin}>
+          Login
+          <Icon name="login" />
+        </AsyncButton>
+      </>
+    );
+  }

-    return <>
-        <header>
-            <div onClick={() => navigate("/")}>
-                S
-            </div>
-            <div className="input">
-                <input type="text" placeholder="Search" />
-                <Icon name="search" size={15} />
-            </div>
-            <div>
-                {loggedIn()}
-                {loggedOut()}
-            </div>
-        </header>
-        <Outlet />
-        {newStream && <Modal onClose={() => setNewStream(false)} >
-            <NewStream onFinish={() => navigate("/")} />
-        </Modal>}
-    </>
-}
+  function goToStream(ev: NostrEvent) {
+    const d = ev.tags.find((t) => t.at(0) === "d")?.at(1) || "";
+    const naddr = encodeTLV(
+      NostrPrefix.Address,
+      d,
+      undefined,
+      ev.kind,
+      ev.pubkey
+    );
+    navigate(`/live/${naddr}`);
+  }
+
+  return (
+    <div
+      className={
+        location.pathname === "/"
+          ? "page home"
+          : location.pathname.startsWith("/chat/")
+          ? "page chat"
+          : "page"
+      }
+    >
+      <header>
+        <div className="logo" onClick={() => navigate("/")}>
+          S
+        </div>
+        <div className="input">
+          <input className="search-input" type="text" placeholder="Search" />
+          <Icon name="search" size={15} />
+        </div>
+        <div className="header-right">
+          {loggedIn()}
+          {loggedOut()}
+        </div>
+      </header>
+      <Outlet />
+    </div>
+  );
+}
--- a/src/pages/root.css
+++ b/src/pages/root.css
@ -5,6 +5,24 @@
    padding: 40px;
 }

+@media (max-width: 1020px) {
+  .video-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+      padding: 16px;
+  }
+}
+
+@media (max-width: 720px) {
+  .video-grid {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 12px;
+      padding: 16px;
+  }
+}
+
@media(min-width: 1600px) {
    .video-grid {
        grid-template-columns: repeat(6, 1fr);
@ -15,4 +33,14 @@
    .video-grid {
        grid-template-columns: repeat(8, 1fr);
    }
-}
+}
+
+.homepage {
+  width: 100%;
+  grid-area: main-content;
+}
+
+.homepage h2 {
+    background: #171717;
+    padding: 40px;
+}
--- a/src/pages/root.tsx
+++ b/src/pages/root.tsx
@ -4,15 +4,20 @@ import { useMemo } from "react";
 import { unixNow } from "@snort/shared";
 import { EventKind, ParameterizedReplaceableNoteStore, RequestBuilder } from "@snort/system";
 import { useRequestBuilder } from "@snort/system-react";
-import { System } from "..";
+import { StreamState, System } from "..";
 import { VideoTile } from "../element/video-tile";
 import { findTag } from "utils";

 export function RootPage() {
-    const rb = new RequestBuilder("root");
-    rb.withFilter()
-        .kinds([30_311 as EventKind])
-        .since(unixNow() - 86400);
+    const rb = useMemo(() => {
+        const rb = new RequestBuilder("root");
+        rb.withOptions({
+            leaveOpen: true
+        }).withFilter()
+            .kinds([30_311 as EventKind])
+            .since(unixNow() - 86400);
+        return rb;
+    }, []);

    const feed = useRequestBuilder<ParameterizedReplaceableNoteStore>(System, ParameterizedReplaceableNoteStore, rb);
    const feedSorted = useMemo(() => {
@ -29,7 +34,21 @@ export function RootPage() {
        }
        return [];
    }, [feed.data])
-    return <div className="video-grid">
-        {feedSorted.map(e => <VideoTile ev={e} key={e.id} />)}
+
+    const live = feedSorted.filter(a => findTag(a, "status") === StreamState.Live);
+    const planned = feedSorted.filter(a => findTag(a, "status") === StreamState.Planned);
+    const ended = feedSorted.filter(a => findTag(a, "status") === StreamState.Ended);
+    return <div className="homepage">
+        <div className="video-grid">
+            {live.map(e => <VideoTile ev={e} key={e.id} />)}
+        </div>
+        {planned.length > 0 && <><h2>Planned</h2>
+        <div className="video-grid">
+            {planned.map(e => <VideoTile ev={e} key={e.id} />)}
+        </div></>}
+        {ended.length > 0 && <><h2>Ended</h2>
+        <div className="video-grid">
+            {ended.map(e => <VideoTile ev={e} key={e.id} />)}
+        </div></>}
    </div>
 }
--- a/src/pages/stream-page.css
+++ b/src/pages/stream-page.css
@ -1,89 +1,152 @@
-.live-page {
-  display: grid;
-  height: calc(100vh - 72px - 32px - 32px);
-  padding: 32px 40px;
-  grid-template-columns: auto 376px;
-  gap: 32px;
+.video-content {
+  grid-area: main-content;
 }

-@media (min-width: 2000px) {
-  .live-page {
-    grid-template-columns: auto 450px;
+
+.video-content video {
+  max-height: 230px;
+  width: 100vw;
+  max-width: 100vw;
+}
+
+.live-chat {
+  max-width: calc(100vw - 32px);
+}
+
+.profile-info {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px;
+  width: 100%;
+}
+
+@media (min-width: 768px){
+  .video-content {
+    height: calc(100vh - 64px);
+  }
+
+  .video-content video {
+    max-height: unset;
+  }
+
+  .profile-info {
+    max-height: 42px;
  }
 }

-.live-page>div:nth-child(1) {
-  overflow-y: auto;
-}
-
-.live-page video {
-  width: 100%;
-  aspect-ratio: 16/9;
-}
-
-.live-page .pill {
+.pill {
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #A7A7A7;
 }

-.live-page .pill.live {
+.pill.live {
  color: inherit;
 }

-.live-page .info {
-  margin-top: 32px;
+@media (min-width: 1020px) {
+  .info {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .video-content video {
+    width: unset;
+  }
+
+  .profile-info {
+    width: unset;
+  }
 }

-.live-page .info h1 {
+.live-chat .header {
+  display: none;
+}
+
+.stream-info {
+  display: none;
+}
+
+@media (min-width: 1020px) {
+  .live-chat .header {
+    display: block;
+  }
+
+  .stream-info {
+    display: block;
+  }
+
+  .video-content {
+    height: 100%;
+  }
+
+  .live-chat {
+    margin-left: 32px;
+  }
+}
+
+.info {
+  grid-area: profile;
+  margin-top: 8px
+}
+
+.info h1 {
  margin: 0 0 8px 0;
  font-weight: 600;
  font-size: 28px;
  line-height: 35px;
 }

-.live-page .info p {
+.info p {
  margin: 0 0 12px 0;
 }

-.live-page .tags {
+.tags {
  display: flex;
  gap: 8px;
 }

-.live-page .actions {
+.actions {
  margin: 8px 0 0 0;
  display: flex;
  gap: 12px;
 }

-.live-page .btn.zap {
+.info .btn.zap {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
 }

-.live-page .offline {
+.offline {
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
 }

-.live-page .online>div {
+.online>div {
  display: none;
 }

-.live-page .offline>div {
+.offline>div {
  position: fixed;
+  top: 5em;
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 700;
 }

-.live-page .offline>video {
+@media (min-width: 768px) {
+  .offline>div {
+    top: 10em;
+  }
+}
+
+.offline>video {
  z-index: -1;
  position: relative;
-}
+}
--- a/src/pages/stream-page.tsx
+++ b/src/pages/stream-page.tsx
@ -1,7 +1,8 @@
 import "./stream-page.css";
-import { useState } from "react";
+import { useRef } from "react";
 import { parseNostrLink, EventPublisher } from "@snort/system";
 import { useNavigate, useParams } from "react-router-dom";
+import moment from "moment";

 import useEventFeed from "hooks/event-feed";
 import { LiveVideoPlayer } from "element/live-video-player";
@ -9,30 +10,24 @@ import { findTag } from "utils";
 import { Profile, getName } from "element/profile";
 import { LiveChat } from "element/live-chat";
 import AsyncButton from "element/async-button";
-import { Icon } from "element/icon";
 import { useLogin } from "hooks/login";
-import { System } from "index";
-import Modal from "element/modal";
-import { SendZaps } from "element/send-zap";
+import { StreamState, System } from "index";
+import { SendZapsDialog } from "element/send-zap";
+import type { NostrLink } from "@snort/system";
 import { useUserProfile } from "@snort/system-react";
-import { NewStream } from "element/new-stream";
+import { NewStreamDialog } from "element/new-stream";

-export function StreamPage() {
-  const params = useParams();
-  const link = parseNostrLink(params.id!);
-  const thisEvent = useEventFeed(link);
+function ProfileInfo({ link }: { link: NostrLink }) {
+  const thisEvent = useEventFeed(link, true);
  const login = useLogin();
  const navigate = useNavigate();
-  const [zap, setZap] = useState(false);
-  const [edit, setEdit] = useState(false);
  const profile = useUserProfile(System, thisEvent.data?.pubkey);
+  const zapTarget = profile?.lud16 ?? profile?.lud06;

-  const stream = findTag(thisEvent.data, "streaming");
  const status = findTag(thisEvent.data, "status");
-  const image = findTag(thisEvent.data, "image");
+  const start = findTag(thisEvent.data, "starts");
  const isLive = status === "live";
  const isMine = link.author === login?.pubkey;
-  const zapTarget = profile?.lud16 ?? profile?.lud06;

  async function deleteStream() {
    const pub = await EventPublisher.nip7();
@ -45,59 +40,80 @@ export function StreamPage() {
  }

  return (
-    <div className="live-page">
-      <div>
-        <LiveVideoPlayer stream={stream} autoPlay={true} poster={image} />
-        <div className="flex info">
-          <div className="f-grow">
-            <h1>{findTag(thisEvent.data, "title")}</h1>
-            <p>{findTag(thisEvent.data, "summary")}</p>
-            <div className="tags">
-              <span className={`pill${isLive ? " live" : ""}`}>
-                {status}
+    <>
+      <div className="flex info">
+        <div className="f-grow stream-info">
+          <h1>{findTag(thisEvent.data, "title")}</h1>
+          <p>{findTag(thisEvent.data, "summary")}</p>
+          <div className="tags">
+            <span className={`pill${isLive ? " live" : ""}`}>{status}</span>
+            {status === StreamState.Planned && (
+              <span className="pill">
+                Starts {moment(Number(start) * 1000).fromNow()}
              </span>
-              {thisEvent.data?.tags
-                .filter(a => a[0] === "t")
-                .map(a => a[1])
-                .map(a => (
-                  <span className="pill" key={a}>
-                    {a}
-                  </span>
-                ))}
-            </div>
-            {isMine && <div className="actions">
-              <button type="button" className="btn" onClick={() => setEdit(true)}>
-                Edit
-              </button>
-              <AsyncButton type="button" className="btn btn-red" onClick={deleteStream}>
+            )}
+            {thisEvent.data?.tags
+              .filter((a) => a[0] === "t")
+              .map((a) => a[1])
+              .map((a) => (
+                <span className="pill" key={a}>
+                  {a}
+                </span>
+              ))}
+          </div>
+          {isMine && (
+            <div className="actions">
+              {thisEvent.data && (
+                <NewStreamDialog text="Edit" ev={thisEvent.data} />
+              )}
+              <AsyncButton
+                type="button"
+                className="btn btn-red"
+                onClick={deleteStream}
+              >
                Delete
              </AsyncButton>
-            </div>}
-          </div>
-          <div>
-            <div className="flex g24">
-              <Profile
-                pubkey={thisEvent.data?.pubkey ?? ""}
-              />
-              <button onClick={() => setZap(true)} className="btn btn-primary zap">
-                Zap
-                <Icon name="zap" size={16} />
-              </button>
            </div>
-          </div>
+          )}
+        </div>
+        <div className="profile-info flex g24">
+          <Profile pubkey={thisEvent.data?.pubkey ?? ""} />
+          {zapTarget && thisEvent.data && (
+            <SendZapsDialog
+              lnurl={zapTarget}
+              ev={thisEvent.data}
+              targetName={getName(thisEvent.data.pubkey, profile)}
+            />
+          )}
        </div>
      </div>
-      <LiveChat link={link} />
-      {zap && zapTarget && thisEvent.data && <Modal onClose={() => setZap(false)}>
-        <SendZaps
-          lnurl={zapTarget}
-          ev={thisEvent.data}
-          targetName={getName(thisEvent.data.pubkey, profile)}
-          onFinish={() => setZap(false)} />
-      </Modal>}
-      {edit && thisEvent.data && <Modal onClose={() => setEdit(false)}>
-        <NewStream ev={thisEvent.data} onFinish={() => window.location.reload()} />
-      </Modal>}
+    </>
+  );
+}
+
+function VideoPlayer({ link }: { link: NostrLink }) {
+  const thisEvent = useEventFeed(link);
+  const stream = findTag(thisEvent.data, "streaming");
+  const image = findTag(thisEvent.data, "image");
+
+  return (
+    <div className="video-content">
+      <LiveVideoPlayer stream={stream} autoPlay={true} poster={image} />
    </div>
  );
 }
+
+export function StreamPage() {
+  const ref = useRef(null);
+  const params = useParams();
+  const link = parseNostrLink(params.id!);
+
+  return (
+    <>
+      <div ref={ref}></div>
+      <VideoPlayer link={link} />
+      <ProfileInfo link={link} />
+      <LiveChat link={link} />
+    </>
+  );
+}
--- a/src/utils.ts
+++ b/src/utils.ts
@ -1,8 +1,42 @@
-import { NostrEvent } from "@snort/system";
+import { NostrEvent, NostrPrefix, encodeTLV } from "@snort/system";
+import * as utils from "@noble/curves/abstract/utils";
+import { bech32 } from "@scure/base";

 export function findTag(e: NostrEvent | undefined, tag: string) {
-    const maybeTag = e?.tags.find(evTag => {
-        return evTag[0] === tag;
-    });
-    return maybeTag && maybeTag[1];
-}
+  const maybeTag = e?.tags.find((evTag) => {
+    return evTag[0] === tag;
+  });
+  return maybeTag && maybeTag[1];
+}
+
+/**
+ * Convert hex to bech32
+ */
+export function hexToBech32(hrp: string, hex?: string) {
+  if (typeof hex !== "string" || hex.length === 0 || hex.length % 2 !== 0) {
+    return "";
+  }
+
+  try {
+    if (
+      hrp === NostrPrefix.Note ||
+      hrp === NostrPrefix.PrivateKey ||
+      hrp === NostrPrefix.PublicKey
+    ) {
+      const buf = utils.hexToBytes(hex);
+      return bech32.encode(hrp, bech32.toWords(buf));
+    } else {
+      return encodeTLV(hrp as NostrPrefix, hex);
+    }
+  } catch (e) {
+    console.warn("Invalid hex", hex, e);
+    return "";
+  }
+}
+
+export function splitByUrl(str: string) {
+  const urlRegex =
+    /((?:http|ftp|https|nostr|web\+nostr|magnet):\/?\/?(?:[\w+?.\w+])+(?:[a-zA-Z0-9~!@#$%^&*()_\-=+\\/?.:;',]*)?(?:[-A-Za-z0-9+&@#/%=~()_|]))/i;
+
+  return str.split(urlRegex);
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -1129,7 +1129,7 @@
  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==

-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
  version "7.22.5"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
  integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
@ -1634,6 +1634,11 @@
    "@jridgewell/resolve-uri" "3.1.0"
    "@jridgewell/sourcemap-codec" "1.4.14"

+"@juggle/resize-observer@^3.3.1":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
+  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
+
 "@leichtgewicht/ip-codec@^2.0.1":
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
@ -1694,6 +1699,167 @@
    schema-utils "^3.0.0"
    source-map "^0.7.3"

+"@radix-ui/primitive@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
+  integrity sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-compose-refs@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
+  integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-context@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
+  integrity sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-dialog@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.4.tgz#06bce6c16bb93eb36d7a8589e665a20f4c1c52c1"
+  integrity sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.4"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.3"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-portal" "1.0.3"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
+"@radix-ui/react-dismissable-layer@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz#883a48f5f938fa679427aa17fcba70c5494c6978"
+  integrity sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-escape-keydown" "1.0.3"
+
+"@radix-ui/react-focus-guards@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz#1ea7e32092216b946397866199d892f71f7f98ad"
+  integrity sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-focus-scope@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz#9c2e8d4ed1189a1d419ee61edd5c1828726472f9"
+  integrity sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-id@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0"
+  integrity sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/react-portal@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.3.tgz#ffb961244c8ed1b46f039e6c215a6c4d9989bda1"
+  integrity sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-presence@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba"
+  integrity sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/react-primitive@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
+  integrity sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.2"
+
+"@radix-ui/react-slot@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
+  integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+
+"@radix-ui/react-use-callback-ref@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
+  integrity sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-controllable-state@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
+  integrity sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-use-escape-keydown@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755"
+  integrity sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-use-layout-effect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399"
+  integrity sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@react-hook/latest@^1.0.2":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@react-hook/latest/-/latest-1.0.3.tgz#c2d1d0b0af8b69ec6e2b3a2412ba0768ac82db80"
+  integrity sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==
+
+"@react-hook/passive-layout-effect@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e"
+  integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==
+
+"@react-hook/resize-observer@^1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@react-hook/resize-observer/-/resize-observer-1.2.6.tgz#9a8cf4c5abb09becd60d1d65f6bf10eec211e291"
+  integrity sha512-DlBXtLSW0DqYYTW3Ft1/GQFZlTdKY5VAFIC4+km6IK5NiPPDFchGbEJm1j6pSgMqPRHbUQgHJX7RaR76ic1LWA==
+  dependencies:
+    "@juggle/resize-observer" "^3.3.1"
+    "@react-hook/latest" "^1.0.2"
+    "@react-hook/passive-layout-effect" "^1.2.0"
+
 "@remix-run/router@1.6.3":
  version "1.6.3"
  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.6.3.tgz#8205baf6e17ef93be35bf62c37d2d594e9be0dad"
@ -2188,6 +2354,11 @@
  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==

+"@types/lodash@^4.14.195":
+  version "4.14.195"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
+  integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
+
 "@types/mime@*":
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
@ -2318,6 +2489,13 @@
  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311"
  integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==

+"@types/webscopeio__react-textarea-autocomplete@^4.7.2":
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/@types/webscopeio__react-textarea-autocomplete/-/webscopeio__react-textarea-autocomplete-4.7.2.tgz#605e8a6b4194fb4b6e55df8a19bc8fcd56319cfa"
+  integrity sha512-e1DZGD+eH19BnllTWCGXAdrMa2kI53wEMuhn/d+wUmnu8//ZI6BiuK/EPdw07fI4+tlyo5qdPZdXdpkoXHJVOw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/ws@^8.5.5":
  version "8.5.5"
  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.5.tgz#af587964aa06682702ee6dcbc7be41a80e4b28eb"
@ -2561,6 +2739,14 @@
  resolved "https://registry.yarnpkg.com/@webbtc/webln-types/-/webln-types-1.0.12.tgz#ddb5f0dbaa0a853ef21a4f36a603199d43cc8682"
  integrity sha512-uCsJt78RaW/UYDXwAjjs6aj7fiXyozwMknWvPROCaGMx+rXoPddtDjMIMbMFLvUJVQmnyzpqGkx/0jBIvVaVvA==

+"@webscopeio/react-textarea-autocomplete@^4.9.2":
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/@webscopeio/react-textarea-autocomplete/-/react-textarea-autocomplete-4.9.2.tgz#b39e57d8048ad2e8790d70073afe63eafa877345"
+  integrity sha512-9l5lbyA709d5HHvI/COflSnblBJeYGxB2/0ghP3m3YViLzXRMzJwaXqnqz6oA96y7QdR3pQWYtVmkUKA0AUVAA==
+  dependencies:
+    custom-event "^1.0.1"
+    textarea-caret "3.0.2"
+
 "@xtuc/ieee754@^1.2.0":
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@ -2747,6 +2933,13 @@ argparse@^2.0.1:
  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==

+aria-hidden@^1.1.1:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
+  integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
+  dependencies:
+    tslib "^2.0.0"
+
 aria-query@5.1.3:
  version "5.1.3"
  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
@ -3711,6 +3904,11 @@ csstype@^3.0.2:
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==

+custom-event@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
+  integrity sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==
+
 damerau-levenshtein@^1.0.8:
  version "1.0.8"
  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@ -3840,6 +4038,11 @@ detect-newline@^3.0.0:
  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==

+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 detect-node@^2.0.4:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
@ -4823,6 +5026,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@
    has-proto "^1.0.1"
    has-symbols "^1.0.3"

+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-own-enumerable-property-symbols@^3.0.0:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
@ -5269,6 +5477,13 @@ internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
    has "^1.0.3"
    side-channel "^1.0.4"

+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ipaddr.js@1.9.1:
  version "1.9.1"
  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@ -6380,7 +6595,7 @@ lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==

-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@ -6549,6 +6764,11 @@ mkdirp@~0.5.1:
  dependencies:
    minimist "^1.2.6"

+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 ms@2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@ -7550,6 +7770,11 @@ prelude-ls@~1.1.2:
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
  integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==

+prettier@^2.8.8:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
  version "5.6.0"
  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@ -7781,6 +8006,25 @@ react-refresh@^0.11.0:
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
  integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==

+react-remove-scroll-bar@^2.3.3:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
+  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
+react-remove-scroll@2.5.5:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
+  integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-router-dom@^6.13.0:
  version "6.13.0"
  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.13.0.tgz#6651f456bb2af42ef14f6880123b1f575539e81f"
@ -7851,6 +8095,15 @@ react-scripts@5.0.1:
  optionalDependencies:
    fsevents "^2.3.2"

+react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
 react@^18.2.0:
  version "18.2.0"
  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@ -8787,6 +9040,11 @@ text-table@^0.2.0:
  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==

+textarea-caret@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/textarea-caret/-/textarea-caret-3.0.2.tgz#f360c48699aa1abf718680a43a31a850665c2caf"
+  integrity sha512-gRzeti2YS4did7UJnPQ47wrjD+vp+CJIe9zbsu0bJ987d8QVLvLNG9757rqiQTIy4hGIeFauTTJt5Xkn51UkXg==
+
 thenify-all@^1.0.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
@ -8882,6 +9140,11 @@ tslib@^1.8.1:
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

+tslib@^2.0.0, tslib@^2.1.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.0.tgz#b295854684dbda164e181d259a22cd779dcd7bc3"
+  integrity sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==
+
 tslib@^2.0.3:
  version "2.5.3"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
@ -9045,6 +9308,21 @@ url-parse@^1.5.3:
    querystringify "^2.1.1"
    requires-port "^1.0.0"

+use-callback-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
+  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+  dependencies:
+    tslib "^2.0.0"
+
+use-sidecar@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
Author	SHA1	Message	Date
Alejandro Gomez	a3d5520cf7	feat: zap styles	2023-06-28 11:38:59 +02:00
Alejandro Gomez	19f6fc8bb4	fix: don't add duplicate emoji tags	2023-06-28 11:14:12 +02:00
Alejandro Gomez	3f75705d28	feat: mentions	2023-06-28 10:53:16 +02:00
Alejandro Gomez	fb86399b6f	fix: big res adjustments	2023-06-28 08:56:16 +02:00
Alejandro Gomez	9f8c14c568	fix: new stream adjustments	2023-06-28 08:54:11 +02:00
Alejandro Gomez	e9d3a7d05e	refactor: remove modal code	2023-06-28 08:43:50 +02:00
Alejandro Gomez	713f4c3d5e	feat: responsible zap modal	2023-06-28 08:43:33 +02:00
Alejandro Gomez	391e549421	feat: responsible new stream modal	2023-06-27 23:59:37 +02:00
Alejandro Gomez	699f825270	fix: profile info tweaks	2023-06-27 18:10:18 +02:00
Alejandro Gomez	8ee39b137b	fix: popout chat	2023-06-27 18:01:05 +02:00
Alejandro Gomez	59f4fa1b81	fix: moar sizing fixes	2023-06-27 17:59:24 +02:00
Alejandro Gomez	f780f5212c	fix: tablet and mobile fixes	2023-06-27 16:49:02 +02:00
Alejandro Gomez	f17d97eca9	fml	2023-06-27 16:35:37 +02:00
Alejandro Gomez	baa20a6fd0	fix: header adjustments	2023-06-27 14:49:12 +02:00
Kieran	4309df393c	Only set stream offline when fatal error	2023-06-27 11:09:38 +01:00
Alejandro Gomez	9d3f5fc235	fix: offline placement	2023-06-26 15:50:20 +02:00
Alejandro Gomez	9f5b17ac3c	fix: popout chat	2023-06-26 15:46:48 +02:00
Alejandro Gomez	bda0d36f9a	refactor: rename grid area	2023-06-26 15:39:02 +02:00
Alejandro Gomez	ddbe0e2a92	fix: chat height with css	2023-06-26 15:35:25 +02:00
Alejandro Gomez	8bc4c1e2ce	fix: top zappers	2023-06-26 15:28:06 +02:00
Alejandro Gomez	aa66e678d1	fix: hide scrollbars	2023-06-26 15:27:56 +02:00
Alejandro Gomez	b0bf485f0a	fix: emoji margin	2023-06-26 11:27:04 +02:00
Alejandro Gomez	954a875c10	fix: video content height for tablet	2023-06-26 11:14:57 +02:00
Alejandro Gomez	803d0910af	feat: mobile and tablet styles	2023-06-26 11:06:51 +02:00
Kieran	9fd8b65bdf	Remove debug logs	2023-06-25 23:37:47 +01:00
Kieran	2afda47b0c	Close edit UI	2023-06-25 23:34:43 +01:00
Kieran	602b4c5d0d	Add planned start time	2023-06-25 23:33:34 +01:00
Kieran	ec2ef2142b	Add ends timestamp	2023-06-25 22:49:49 +01:00
Kieran	c4aaadd48a	Add starts tag	2023-06-25 22:47:33 +01:00
Kieran	1444749fbb	Merge pull request 'feat: show top zappers' (#3 ) from verbiricha/stream:top-zappers into main Reviewed-on: Kieran/stream#3	2023-06-25 21:37:41 +00:00
Kieran	93d0ead54e	feat: update stream status	2023-06-25 21:20:23 +01:00
Alejandro Gomez	efb8df5bcf	fix: type	2023-06-25 21:58:51 +02:00
Alejandro Gomez	b241738f67	fix: cleanup fn	2023-06-25 21:57:50 +02:00
Alejandro Gomez	64cf924131	fix: add missing dep to useMemo	2023-06-25 18:57:05 +02:00
Alejandro Gomez	d3917fc418	fix: load profile metadata if profile is unached	2023-06-25 18:53:41 +02:00
Alejandro Gomez	afd8313ea2	fix: filter by valid zaps	2023-06-25 18:40:58 +02:00
verbiricha	d9cf7e4236	Merge branch 'main' into top-zappers	2023-06-25 10:19:34 +00:00
Kieran	d7a17ae094	Merge pull request 'feat: emotes' (#1 ) from verbiricha/stream:emotes into main Reviewed-on: Kieran/stream#1	2023-06-25 10:06:32 +00:00
Alejandro Gomez	80e5b67495	fix: icon color	2023-06-25 07:27:28 +02:00
Alejandro Gomez	c28f927cb4	feat: add styles	2023-06-24 14:51:19 +02:00
Alejandro Gomez	018022689e	feat: add top zappers to the chat	2023-06-24 14:51:19 +02:00
Alejandro Gomez	4ecba2f0d7	Merge branch 'main' into emotes	2023-06-24 14:50:57 +02:00
Kieran	31adf40f71	Stop home page re-sub	2023-06-24 12:36:59 +01:00
Kieran	d29741e3f2	Merge pull request 'fix: redirect to stream after starting it' (#2 ) from verbiricha/stream:fix/redirect-to-stream into main Reviewed-on: Kieran/stream#2	2023-06-24 11:36:24 +00:00
Alejandro Gomez	d3b18850ad	fix: use encodeTLV	2023-06-24 13:19:11 +02:00
Alejandro Gomez	28e8b5fffa	fix: redirect to stream after starting it	2023-06-24 13:12:18 +02:00
Alejandro Gomez	c45f497d44	refactor: clean up code	2023-06-24 12:06:13 +02:00
Alejandro Gomez	1116cef30f	feat: combine user and channel emoji	2023-06-24 11:42:32 +02:00
Alejandro Gomez	4eb30813ed	feat: autocomplete custom emoji	2023-06-24 11:30:15 +02:00
Alejandro Gomez	becae9cfb4	feat: add text component	2023-06-24 07:03:49 +02:00