refactor: refresh

src/element/collapsible.tsx

@@ -1,18 +1,14 @@
 import "./collapsible.css";
 import type { ReactNode } from "react";
 import { useState } from "react";
-
 import { FormattedMessage } from "react-intl";
-import * as Dialog from "@radix-ui/react-dialog";
-import * as Collapsible from "@radix-ui/react-collapsible";
-
 import type { NostrLink } from "@snort/system";
-
 import { Mention } from "./mention";
 import { EventIcon, NostrEvent } from "./Event";
 import { ExternalLink } from "./external-link";
-import AsyncButton from "./async-button";
 import { useEventFeed } from "@snort/system-react";
+import Modal from "./modal";
+import { DefaultButton } from "./buttons";
 
 interface MediaURLProps {
   url: URL;
@@ -20,25 +16,14 @@ interface MediaURLProps {
 }
 
 export function MediaURL({ url, children }: MediaURLProps) {
-  const preview = <span className="url-preview">{url.toString()}</span>;
-  return (
-    <Dialog.Root>
-      <Dialog.Trigger asChild>{preview}</Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay className="dialog-overlay" />
-        <Dialog.Content className="dialog-content">
-          <div className="collapsible-media">
-            <ExternalLink href={url.toString()}>{url.toString()}</ExternalLink>
-            {children}
-          </div>
-          <Dialog.Close asChild>
-            <AsyncButton className="btn delete-button" aria-label="Close">
-              <FormattedMessage defaultMessage="Close" id="rbrahO" />
-            </AsyncButton>
-          </Dialog.Close>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
+  const [open, setOpen] = useState(false);
+  return (<>
+    <span onClick={() => setOpen(true)}>{url.toString()}</span>
+    {open && <Modal id="media-preview" onClose={() => setOpen(false)}>
+      <ExternalLink href={url.toString()}>{url.toString()}</ExternalLink>
+      {children}
+    </Modal>}
+  </>
   );
 }
 
@@ -48,23 +33,19 @@ export function CollapsibleEvent({ link }: { link: NostrLink }) {
   const author = event?.pubkey || link.author;
 
   return (
-    <Collapsible.Root className="collapsible" open={open} onOpenChange={setOpen}>
-      <div className="collapsed-event">
-        <div className="collapsed-event-header">
-          {event && <EventIcon kind={event.kind} />}
-          {author && <Mention pubkey={author} />}
+    <>
+      <div className="flex justify-between">
+        <div className="flex gap-2">
+          <EventIcon kind={event?.kind} />
+          <FormattedMessage defaultMessage="Note by {name}" id="ALdW69" values={{
+            name: <Mention pubkey={author ?? ""} />
+          }} />
         </div>
-        <Collapsible.Trigger asChild>
-          <AsyncButton className={`${open ? "btn btn-small delete-button" : "btn btn-small"}`}>
-            {open ? (
-              <FormattedMessage defaultMessage="Hide" id="VA/Z1S" />
-            ) : (
-              <FormattedMessage defaultMessage="Show" id="K7AkdL" />
-            )}
-          </AsyncButton>
-        </Collapsible.Trigger>
+        <DefaultButton onClick={() => setOpen(s => !s)}>
+          {open ? <FormattedMessage defaultMessage="Hide" id="VA/Z1S" /> : <FormattedMessage defaultMessage="Show" id="K7AkdL" />}
+        </DefaultButton>
       </div>
-      <Collapsible.Content>{open && event && <NostrEvent ev={event} />}</Collapsible.Content>
-    </Collapsible.Root>
+      {open && event && <NostrEvent ev={event} />}
+    </>
   );
 }