diff --git a/src/components/copy-icon-button.tsx b/src/components/copy-icon-button.tsx index d630c6b1a..b0bde89c0 100644 --- a/src/components/copy-icon-button.tsx +++ b/src/components/copy-icon-button.tsx @@ -3,19 +3,26 @@ import { IconButton, IconButtonProps, useToast } from "@chakra-ui/react"; import { CheckIcon, CopyToClipboardIcon } from "./icons"; -export const CopyIconButton = ({ value, ...props }: { value?: string } & Omit) => { +type CopyIconButtonProps = Omit & { + value: string | undefined | (() => string); + icon?: IconButtonProps["icon"]; +}; + +export const CopyIconButton = ({ value, icon, ...props }: CopyIconButtonProps) => { const toast = useToast(); const [copied, setCopied] = useState(false); return ( : } + icon={copied ? : icon || } onClick={() => { - if (value && navigator.clipboard && !copied) { - navigator.clipboard.writeText(value); + const v: string | undefined = typeof value === "function" ? value() : value; + + if (v && navigator.clipboard && !copied) { + navigator.clipboard.writeText(v); setCopied(true); setTimeout(() => setCopied(false), 2000); - } else toast({ description: value, isClosable: true, duration: null }); + } else toast({ description: v, isClosable: true, duration: null }); }} {...props} /> diff --git a/src/components/embed-event/event-types/embedded-article.tsx b/src/components/embed-event/event-types/embedded-article.tsx index b8f437f6f..dcf70491d 100644 --- a/src/components/embed-event/event-types/embedded-article.tsx +++ b/src/components/embed-event/event-types/embedded-article.tsx @@ -1,17 +1,5 @@ import { useContext } from "react"; -import { - Box, - Card, - CardBody, - CardProps, - Flex, - Heading, - Image, - LinkBox, - LinkOverlay, - Tag, - Text, -} from "@chakra-ui/react"; +import { Box, Card, CardBody, CardProps, Flex, Heading, Image, LinkBox, Tag, Text, useToast } from "@chakra-ui/react"; import { getArticleImage, @@ -27,15 +15,21 @@ import Timestamp from "../../timestamp"; import { AppHandlerContext } from "../../../providers/route/app-handler-provider"; export default function EmbeddedArticle({ article, ...props }: Omit & { article: NostrEvent }) { + const toast = useToast(); const title = getArticleTitle(article); const image = getArticleImage(article); const summary = getArticleSummary(article); - const naddr = getSharableEventAddress(article); const { openAddress } = useContext(AppHandlerContext); + const open = () => { + const naddr = getSharableEventAddress(article); + if (naddr) openAddress(naddr); + else toast({ status: "error", description: "Failed to get address" }); + }; + return ( - naddr && openAddress(naddr)} cursor="pointer" {...props}> + {image && ( { return ( @@ -47,16 +50,27 @@ const EventTimeline = memo(({ events }: { events: NostrEvent[] }) => { }); export default function EventConsoleView() { + const [params, setParams] = useSearchParams(); const historyDrawer = useDisclosure(); const [history, setHistory] = useLocalStorage("console-history", []); const helpModal = useDisclosure(); - const queryRelay = useDisclosure(); - const [relayURL, setRelayURL] = useState(""); + const queryRelay = useDisclosure({ defaultIsOpen: params.has("relay") }); + const [relayURL, setRelayURL] = useState(params.get("relay") || ""); const [relay, setRelay] = useState(null); const [sub, setSub] = useState(null); - const [query, setQuery] = useState(() => history?.[0] || JSON.stringify({ kinds: [1], limit: 20 }, null, 2)); + const [query, setQuery] = useState(() => { + if (params.has("filter")) { + const str = params.get("filter"); + if (str) { + const f = safeJson(str, null); + if (f) return JSON.stringify(f, null, 2); + } + } + if (history?.[0]) return history?.[0]; + return JSON.stringify({ kinds: [1], limit: 20 }, null, 2); + }); const [error, setError] = useState(""); const [loading, setLoading] = useState(false); @@ -122,6 +136,13 @@ export default function EventConsoleView() { window.open(url, "_blank"); }; + const updateSharedURL = () => { + const p = new URLSearchParams(params); + p.set("filter", query); + p.set("relay", relayURL); + setParams(p, { replace: true }); + }; + return ( @@ -141,6 +162,9 @@ export default function EventConsoleView() { )} } aria-label="Help" title="Help" size="sm" onClick={helpModal.onOpen} /> + {queryRelay.isOpen && ( + } aria-label="Share" size="sm" onClick={updateSharedURL} /> + )} } aria-label="History"