diff --git a/package.json b/package.json index 1372d70..1c2916b 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-tabs": "^1.0.4", "@react-hook/resize-observer": "^1.2.6", - "@snort/system-react": "^1.0.10", + "@snort/system-react": "^1.0.11", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", @@ -25,6 +25,7 @@ "react-dom": "^18.2.0", "react-intersection-observer": "^9.5.1", "react-router-dom": "^6.13.0", + "react-tag-input-component": "^2.0.2", "semantic-sdp": "^3.26.2", "usehooks-ts": "^2.9.1", "web-vitals": "^2.1.0", diff --git a/public/tag_suggestions.json b/public/tag_suggestions.json new file mode 100644 index 0000000..eb259b4 --- /dev/null +++ b/public/tag_suggestions.json @@ -0,0 +1,3 @@ +[ + { "id": "nsfw", "text": "NSFW" } +] \ No newline at end of file diff --git a/src/element/live-chat.css b/src/element/live-chat.css index 6c0f4f1..46165bc 100644 --- a/src/element/live-chat.css +++ b/src/element/live-chat.css @@ -94,7 +94,6 @@ .live-chat .write-message input { background: unset; border: unset; - outline: unset; color: inherit; font: inherit; flex-grow: 1; diff --git a/src/element/new-stream.css b/src/element/new-stream.css index b46fd51..b512d6a 100644 --- a/src/element/new-stream.css +++ b/src/element/new-stream.css @@ -27,7 +27,7 @@ .new-stream div.paper { background: #262626; - height: 32px; + padding: 12px 16px; } .new-stream .btn:disabled { diff --git a/src/element/stream-editor.css b/src/element/stream-editor.css new file mode 100644 index 0000000..97a44cd --- /dev/null +++ b/src/element/stream-editor.css @@ -0,0 +1,14 @@ +.rti--container { + background-color: unset !important; + border: 0 !important; + border-radius: 0 !important; + padding: 0 !important; + box-shadow: unset !important; +} + +.rti--tag { + color: black !important; + padding: 4px 10px !important; + border-radius: 12px !important; + display: unset !important; +} \ No newline at end of file diff --git a/src/element/stream-editor.tsx b/src/element/stream-editor.tsx index 0d1b305..c8eb883 100644 --- a/src/element/stream-editor.tsx +++ b/src/element/stream-editor.tsx @@ -1,10 +1,12 @@ +import "./stream-editor.css"; import { useEffect, useState, useCallback } from "react"; import { EventPublisher, NostrEvent } from "@snort/system"; import { unixNow } from "@snort/shared"; +import { TagsInput } from "react-tag-input-component"; import AsyncButton from "./async-button"; -import { StreamState, System } from "index"; -import { findTag } from "utils"; +import { StreamState } from "../index"; +import { findTag } from "../utils"; export interface StreamEditorProps { ev?: NostrEvent; @@ -27,6 +29,9 @@ export function StreamEditor({ ev, onFinish, options }: StreamEditorProps) { findTag(ev, "status") ?? StreamState.Live ); const [start, setStart] = useState(findTag(ev, "starts")); + const [tags, setTags] = useState( + ev?.tags.filter(a => a[0] === "t").map(a => a[1]) ?? [] + ); const [isValid, setIsValid] = useState(false); const validate = useCallback(() => { @@ -65,6 +70,9 @@ export function StreamEditor({ ev, onFinish, options }: StreamEditorProps) { if (status === StreamState.Ended) { eb.tag(["ends", ends]); } + for (const tx of tags) { + eb.tag(["t", tx.trim()]); + } return eb; }); console.debug(evNew); @@ -151,6 +159,18 @@ export function StreamEditor({ ev, onFinish, options }: StreamEditorProps) { )}>} +
Tags
+