feat: collapsible event references in chat

src/element/collapsible.tsx

@@ -1,7 +1,16 @@
 import "./collapsible.css";
-import * as Dialog from "@radix-ui/react-dialog";
 import type { ReactNode } from "react";
+import { useState } from "react";
+
+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 "element/mention";
+import { NostrEvent, EventIcon } from "element/Event";
 import { ExternalLink } from "element/external-link";
+import { useEvent } from "hooks/event";
 
 interface MediaURLProps {
   url: URL;
@@ -30,3 +39,41 @@ export function MediaURL({ url, children }: MediaURLProps) {
     </Dialog.Root>
   );
 }
+
+export function CollapsibleEvent({ link }: { link: NostrLink }) {
+  const event = useEvent(link);
+  const [open, setOpen] = useState(false);
+  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>
+        <Collapsible.Trigger asChild>
+          <button
+            className={`${
+              open ? "btn btn-small delete-button" : "btn btn-small"
+            }`}
+          >
+            {open ? "Hide" : "Show"}
+          </button>
+        </Collapsible.Trigger>
+      </div>
+      <Collapsible.Content>
+        {open && event && (
+          <div className="expanded-event">
+            {" "}
+            <NostrEvent ev={event} />
+          </div>
+        )}
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+}