feat: responsible new stream modal

src/element/new-stream.tsx

@@ -1,4 +1,5 @@
 import "./new-stream.css";
+import * as Dialog from "@radix-ui/react-dialog";
 
 import { useEffect, useState } from "react";
 import { EventPublisher, NostrEvent } from "@snort/system";
@@ -6,6 +7,7 @@ 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({
@@ -19,7 +21,9 @@ export function NewStream({
   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);
 
@@ -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
-          .kind(30_311)
+        eb.kind(30_311)
           .tag(["d", dTag])
           .tag(["title", title])
           .tag(["summary", summary])
@@ -69,11 +72,11 @@ export function NewStream({
   }
 
   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)}>
-            {v}
-          </span>)}
+          {[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())} />
+      {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>}
+      )}
       <div>
         <AsyncButton
           type="button"
@@ -151,3 +169,34 @@ export function NewStream({
     </div>
   );
 }
+
+interface NewStreamDialogProps {
+  text?: string;
+  btnClassName?: string;
+  ev?: NostrEvent;
+  onFinish: (e: NostrEvent) => void;
+}
+
+export function NewStreamDialog({
+  text = "New Stream",
+  ev,
+  onFinish,
+  btnClassName = "btn",
+}: NewStreamDialogProps) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button type="button" className={btnClassName}>
+          <span className="hide-on-mobile">{text}</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>
+  );
+}