Merge pull request 'feat: mobile and tablet styles' (#4) from verbiricha/stream:feat/mobile-layout into main

Reviewed-on: Kieran/stream#4

package.json

@@ -3,6 +3,8 @@
   "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",

src/element/live-chat.css

@@ -1,11 +1,50 @@
 .live-chat {
-  height: calc(100vh - 72px - 96px);
+  grid-area: chat;
   display: flex;
   flex-direction: column;
+  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 {
@@ -15,7 +54,6 @@
 }
 
 .live-chat>.messages {
-  flex-grow: 1;
   display: flex;
   gap: 12px;
   flex-direction: column-reverse;
@@ -23,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) {
@@ -42,6 +90,10 @@
   flex-grow: 1;
 }
 
+.live-chat .message {
+  word-wrap: break-word;
+}
+
 .live-chat .message .profile {
   gap: 8px;
   font-weight: 600;
@@ -69,6 +121,10 @@
   color: white;
 }
 
+.live-chat .messages .pill:hover {
+  cursor: default;
+}
+
 .live-chat .zap {
   display: flex;
   align-items: center;
@@ -83,13 +139,26 @@
 }
 
 .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;
-  justify-content: space-between;
     padding-top: 12px;
     padding-bottom: 20px;
     border-bottom: 1px solid var(--border, #171717);
-  overflow-y: scroll;
+  }
 }
 
 .top-zapper {
@@ -114,6 +183,6 @@
   margin: 0;
 }
 
-.top-zapper-icon {
+.zap-icon {
   color: #FFCB44;
 }

src/element/live-chat.tsx

@@ -47,7 +47,7 @@ function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
   const sortedZappers = useMemo(() => {
     const sorted = [...new Set([...zappers])];
     sorted.sort((a, b) => totalZapped(b, zaps) - totalZapped(a, zaps));
-    return sorted;
+    return sorted.slice(0, 3);
   }, [zaps, zappers]);
 
   return (
@@ -63,7 +63,7 @@ function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
               ) : (
                 <Profile pubkey={pk} options={{ showName: false }} />
               )}
-              <Icon name="zap" className="top-zapper-icon" />
+              <Icon name="zap" className="zap-icon" />
               <p className="top-zapper-amount">{formatSats(total)}</p>
             </div>
           );
@@ -76,9 +76,11 @@ function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
 export function LiveChat({
   link,
   options,
+  height,
 }: {
   link: NostrLink;
   options?: LiveChatOptions;
+  height?: number;
 }) {
   const messages = useLiveChatFeed(link);
   const login = useLogin();
@@ -88,7 +90,7 @@ export function LiveChat({
     .map((ev) => parseZap(ev, System.ProfileLoader.Cache))
     .filter((z) => z && z.valid);
   return (
-    <div className="live-chat">
+    <div className="live-chat" style={height ? { height: `${height}px` } : {}}>
       {(options?.showHeader ?? true) && (
         <div className="header">Stream Chat</div>
       )}
@@ -157,7 +159,7 @@ function ChatZap({ ev }: { ev: TaggedRawEvent }) {
   return (
     <div className="pill">
       <div className="zap">
-        <Icon name="zap" />
+        <Icon name="zap" className="zap-icon" />
         <Profile
           pubkey={parsed.anonZap ? "" : parsed.sender ?? ""}
           options={{
@@ -165,7 +167,6 @@ function ChatZap({ ev }: { ev: TaggedRawEvent }) {
             overrideName: parsed.anonZap ? "Anon" : undefined,
           }}
         />
-        zapped &nbsp;
         {formatSats(parsed.amount)}
         &nbsp; sats
       </div>

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>
-      <video ref={video} {...props} controls={status === VideoStatus.Online} />
       </div>
+      <video ref={video} {...props} controls={status === VideoStatus.Online} />
+    </>
   );
 }

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;
-}

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>
-  );
-}

src/element/new-stream.css

@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: column;
     gap: 24px;
-    width: inherit;
 }
 
 .new-stream h3 {

src/element/new-stream.tsx

@@ -1,11 +1,13 @@
 import "./new-stream.css";
+import * as Dialog from "@radix-ui/react-dialog";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { EventPublisher, NostrEvent } from "@snort/system";
 import { unixNow } from "@snort/shared";
 
 import AsyncButton from "./async-button";
 import { StreamState, System } from "index";
+import { Icon } from "element/icon";
 import { findTag } from "utils";
 
 export function NewStream({
@@ -13,17 +15,19 @@ export function NewStream({
   onFinish,
 }: {
   ev?: NostrEvent;
-  onFinish: (ev: NostrEvent) => void;
+  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 [status, setStatus] = useState(
+    findTag(ev, "status") ?? StreamState.Live
+  );
   const [start, setStart] = useState(findTag(ev, "starts"));
   const [isValid, setIsValid] = useState(false);
 
-  function validate() {
+  const validate = useCallback(() => {
     if (title.length < 2) {
       return false;
     }
@@ -34,11 +38,11 @@ export function NewStream({
       return false;
     }
     return true;
-  }
+  }, [title, image, stream]);
 
   useEffect(() => {
     setIsValid(validate());
-  }, [title, summary, image, stream]);
+  }, [validate, title, summary, image, stream]);
 
   async function publishStream() {
     const pub = await EventPublisher.nip7();
@@ -48,8 +52,7 @@ export function NewStream({
         const dTag = findTag(ev, "d") ?? now.toString();
         const starts = start ?? now.toString();
         const ends = findTag(ev, "ends") ?? now.toString();
-        eb
+        eb.kind(30_311)
-          .kind(30_311)
           .tag(["d", dTag])
           .tag(["title", title])
           .tag(["summary", summary])
@@ -64,16 +67,16 @@ export function NewStream({
       });
       console.debug(evNew);
       System.BroadcastEvent(evNew);
-      onFinish(evNew);
+      onFinish && onFinish(evNew);
     }
   }
 
   function toDateTimeString(n: number) {
-    return new Date(n * 1000).toISOString().substring(0, -1)
+    return new Date(n * 1000).toISOString().substring(0, -1);
   }
 
   function fromDateTimeString(s: string) {
-    return Math.floor(new Date(s).getTime() / 1000)
+    return Math.floor(new Date(s).getTime() / 1000);
   }
 
   return (
@@ -127,17 +130,32 @@ export function NewStream({
       <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)}>
+          {[StreamState.Live, StreamState.Planned, StreamState.Ended].map(
+            (v) => (
+              <span
+                className={`pill${status === v ? " active" : ""}`}
+                onClick={() => setStatus(v)}
+              >
                 {v}
-          </span>)}
+              </span>
+            )
+          )}
         </div>
       </div>
-      {status === StreamState.Planned && <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())} />
+            <input
+              type="datetime-local"
+              value={toDateTimeString(Number(start ?? "0"))}
+              onChange={(e) =>
+                setStart(fromDateTimeString(e.target.value).toString())
+              }
+            />
           </div>
-      </div>}
+        </div>
+      )}
       <div>
         <AsyncButton
           type="button"
@@ -151,3 +169,39 @@ export function NewStream({
     </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>
+  );
+}

src/element/profile.tsx

@@ -24,16 +24,24 @@ export function getName(pk: string, user?: UserMetadata) {
 
 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?.showAvatar ?? true) && (
+        <img
+          alt={profile?.name || pubkey}
+          className={avatarClassname ? avatarClassname : ""}
+          src={profile?.picture ?? ""}
+        />
+      )}
       {(options?.showName ?? true) &&
         (options?.overrideName ?? getName(pubkey, profile))}
     </div>

src/element/send-zap.css

@@ -1,5 +1,4 @@
 .send-zap {
-    width: inherit;
     display: flex;
     gap: 24px;
     flex-direction: column;

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,15 +10,20 @@ 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 }) {
+interface SendZapsProps {
+  lnurl: string;
+  ev?: NostrEvent;
+  targetName?: string;
+  onFinish: () => void;
+}
+
+function SendZaps({ lnurl, ev, targetName, onFinish }: SendZapsProps) {
   const UsdRate = 30_000;
 
   const satsAmounts = [
-        100, 1_000, 5_000, 10_000, 50_000, 100_000, 500_000, 1_000_000
+    100, 1_000, 5_000, 10_000, 50_000, 100_000, 500_000, 1_000_000,
   ];
-    const usdAmounts = [
+  const usdAmounts = [0.05, 0.5, 2, 5, 10, 50, 100, 200];
-        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]);
@@ -45,9 +51,16 @@ export function SendZaps({ lnurl, ev, targetName, onFinish }: { lnurl: string, e
     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 => {
+      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;
@@ -63,30 +76,50 @@ export function SendZaps({ lnurl, ev, targetName, onFinish }: { lnurl: string, e
 
   function input() {
     if (invoice) return;
-        return <>
+    return (
+      <>
         <div className="flex g12">
-                <span className={`pill${isFiat ? "" : " active"}`} onClick={() => { setIsFiat(false); setAmount(satsAmounts[0]) }}>
+          <span
+            className={`pill${isFiat ? "" : " active"}`}
+            onClick={() => {
+              setIsFiat(false);
+              setAmount(satsAmounts[0]);
+            }}
+          >
             SATS
           </span>
-                <span className={`pill${isFiat ? " active" : ""}`} onClick={() => { setIsFiat(true); setAmount(usdAmounts[0]) }}>
+          <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 =>
+            {(isFiat ? usdAmounts : satsAmounts).map((a) => (
-                        <span key={a} className={`pill${a === amount ? " active" : ""}`} onClick={() => setAmount(a)}>
+              <span
+                key={a}
+                className={`pill${a === amount ? " active" : ""}`}
+                onClick={() => setAmount(a)}
+              >
                 {isFiat ? `$${a.toLocaleString()}` : formatSats(a)}
-                        </span>)}
+              </span>
+            ))}
           </div>
         </div>
         <div>
-                <small>
+          <small>Your comment for {name}</small>
-                    Your comment for {name}
-                </small>
           <div className="input">
-                    <textarea placeholder="Nice!" value={comment} onChange={e => setComment(e.target.value)} />
+            <textarea
+              placeholder="Nice!"
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+            />
           </div>
         </div>
         <div>
@@ -95,16 +128,18 @@ export function SendZaps({ lnurl, ev, targetName, onFinish }: { lnurl: string, e
           </AsyncButton>
         </div>
       </>
+    );
   }
 
   function payInvoice() {
     if (!invoice) return;
 
     const link = `lightning:${invoice}`;
-        return <QrCode data={link} link={link} />
+    return <QrCode data={link} link={link} />;
   }
 
-    return <div className="send-zap">
+  return (
+    <div className="send-zap">
       <h3>
         Zap {name}
         <Icon name="zap" />
@@ -112,4 +147,34 @@ export function SendZaps({ lnurl, ev, targetName, onFinish }: { lnurl: string, e
       {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>
+  );
 }

src/element/textarea.css

@@ -1,3 +1,7 @@
+.rta__textarea {
+  resize: none;
+}
+
 .rta__list {
   border: none;
 }

src/hooks/event-feed.ts

@@ -1,5 +1,10 @@
 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";
@@ -8,8 +13,8 @@ export default function useEventFeed(link: NostrLink, leaveOpen = false) {
   const sub = useMemo(() => {
     const b = new RequestBuilder(`event:${link.id.slice(0, 12)}`);
     b.withOptions({
-      leaveOpen
+      leaveOpen,
-    })
+    });
     if (link.type === NostrPrefix.Address) {
       const f = b.withFilter().tag("d", [link.id]);
       if (link.author) {
@@ -21,14 +26,18 @@ export default function useEventFeed(link: NostrLink, leaveOpen = false) {
     } 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
+  );
 }

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;

src/pages/chat-popout.tsx

@@ -7,10 +7,15 @@ export function ChatPopout() {
   const params = useParams();
   const link = parseNostrLink(params.id!);
 
-    return <div className="popout-chat">
+  return (
-        <LiveChat link={link} options={{
+    <div className="popout-chat">
+      <LiveChat
+        link={link}
+        options={{
           canWrite: false,
-            showHeader: false
+          showHeader: false,
-        }} />
+        }}
+      />
     </div>
+  );
 }

src/pages/layout.css

@@ -1,12 +1,92 @@
-header {
+.page {
   display: grid;
-    grid-template-columns: min-content min-content auto;
+  gap: 0;
-    gap: 24px;
+  grid-template-areas:
-    align-items: center;
+    "header"
-    padding: 24px 40px 0 40px;
+    "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;
@@ -45,3 +125,66 @@ 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;
+}

src/pages/layout.tsx

@@ -6,19 +6,17 @@ import {
   encodeTLV,
   NostrPrefix,
 } from "@snort/system";
-import { Outlet, useNavigate } from "react-router-dom";
+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 { NewStreamDialog } from "element/new-stream";
-import { NewStream } from "element/new-stream";
-import { useState } from "react";
 
 export function LayoutPage() {
   const navigate = useNavigate();
   const login = useLogin();
-  const [newStream, setNewStream] = useState(false);
+  const location = useLocation();
 
   async function doLogin() {
     const pub = await EventPublisher.nip7();
@@ -32,15 +30,9 @@ export function LayoutPage() {
 
     return (
       <>
-        <button
+        <NewStreamDialog btnClassName="btn btn-primary" onFinish={goToStream} />
-          type="button"
-          className="btn btn-primary"
-          onClick={() => setNewStream(true)}
-        >
-          New Stream
-          <Icon name="signal" />
-        </button>
         <Profile
+          avatarClassname="mb-squared"
           pubkey={login.pubkey}
           options={{
             showName: false,
@@ -73,28 +65,32 @@ export function LayoutPage() {
       ev.pubkey
     );
     navigate(`/live/${naddr}`);
-    setNewStream(false);
   }
 
   return (
-    <>
+    <div
+      className={
+        location.pathname === "/"
+          ? "page home"
+          : location.pathname.startsWith("/chat/")
+          ? "page chat"
+          : "page"
+      }
+    >
       <header>
-        <div onClick={() => navigate("/")}>S</div>
+        <div className="logo" onClick={() => navigate("/")}>
+          S
+        </div>
         <div className="input">
-          <input type="text" placeholder="Search" />
+          <input className="search-input" type="text" placeholder="Search" />
           <Icon name="search" size={15} />
         </div>
-        <div>
+        <div className="header-right">
           {loggedIn()}
           {loggedOut()}
         </div>
       </header>
       <Outlet />
-      {newStream && (
+    </div>
-        <Modal onClose={() => setNewStream(false)}>
-          <NewStream onFinish={goToStream} />
-        </Modal>
-      )}
-    </>
   );
 }

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);
@@ -17,8 +35,12 @@
     }
 }
 
-.homepage h2 {
+.homepage {
+  width: 100%;
+  grid-area: main-content;
+}
 
+.homepage h2 {
     background: #171717;
     padding: 40px;
 }

src/pages/stream-page.css

@@ -1,90 +1,152 @@
-.live-page {
+.video-content {
-  display: grid;
+  grid-area: main-content;
-  height: calc(100vh - 72px - 32px - 32px);
-  padding: 32px 40px;
-  grid-template-columns: auto 376px;
-  gap: 32px;
 }
 
-@media (min-width: 2000px) {
+
-  .live-page {
+.video-content video {
-    grid-template-columns: auto 450px;
+  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) {
+.pill {
-  overflow-y: auto;
-}
-
-.live-page video {
-  width: 100%;
-  aspect-ratio: 16/9;
-}
-
-.live-page .pill {
   font-weight: 700;
   font-size: 14px;
   line-height: 18px;
   color: #A7A7A7;
-  text-transform: uppercase;
 }
 
-.live-page .pill.live {
+.pill.live {
   color: inherit;
 }
 
-.live-page .info {
+@media (min-width: 1020px) {
-  margin-top: 32px;
+  .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;
 }

src/pages/stream-page.tsx

@@ -1,5 +1,5 @@
 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";
@@ -10,31 +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 { StreamState, System } from "index";
-import Modal from "element/modal";
+import { SendZapsDialog } from "element/send-zap";
-import { SendZaps } 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() {
+function ProfileInfo({ link }: { link: NostrLink }) {
-  const params = useParams();
-  const link = parseNostrLink(params.id!);
   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();
@@ -47,16 +40,18 @@ export function StreamPage() {
   }
 
   return (
-    <div className="live-page">
+    <>
-      <div>
-        <LiveVideoPlayer stream={stream} autoPlay={true} poster={image} />
       <div className="flex info">
-          <div className="f-grow">
+        <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>}
+            {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])
@@ -68,13 +63,9 @@ export function StreamPage() {
           </div>
           {isMine && (
             <div className="actions">
-                <button
+              {thisEvent.data && (
-                  type="button"
+                <NewStreamDialog text="Edit" ev={thisEvent.data} />
-                  className="btn"
+              )}
-                  onClick={() => setEdit(true)}
-                >
-                  Edit
-                </button>
               <AsyncButton
                 type="button"
                 className="btn btn-red"
@@ -85,39 +76,44 @@ export function StreamPage() {
             </div>
           )}
         </div>
-          <div>
+        <div className="profile-info flex g24">
-            <div className="flex g24">
           <Profile pubkey={thisEvent.data?.pubkey ?? ""} />
-              <button
+          {zapTarget && thisEvent.data && (
-                onClick={() => setZap(true)}
+            <SendZapsDialog
-                className="btn btn-primary zap"
-              >
-                Zap
-                <Icon name="zap" size={16} />
-              </button>
-            </div>
-          </div>
-        </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={() => setEdit(false)}
-          />
-        </Modal>
           )}
         </div>
+      </div>
+    </>
+  );
+}
+
+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} />
+    </>
   );
 }

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"
@@ -2767,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"
@@ -3865,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"
@@ -4848,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"
@@ -5294,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"
@@ -6405,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==
@@ -7816,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"
@@ -7886,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"
@@ -8922,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"
@@ -9085,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"