update event menu

src/components/icons.tsx

@@ -1,4 +1,4 @@
-import { createIcon } from "@chakra-ui/icons";
+import { createIcon, IconProps } from "@chakra-ui/icons";
 
 import astralIcon from "./icons/astral.png";
 import nostrGuruIcon from "./icons/nostr-guru.jpg";
@@ -10,52 +10,64 @@ export const IMAGE_ICONS = {
   brbIcon,
 };
 
+const defaultProps: IconProps = { fontSize: "1.2em" };
+
 export const GlobalIcon = createIcon({
   displayName: "global-line",
   d: "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.008 8.008 0 0 0 5.648 6.667zM10.03 13c.151 2.439.848 4.73 1.97 6.752A15.905 15.905 0 0 0 13.97 13h-3.94zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.008 8.008 0 0 0 19.938 13zM4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333 8.008 8.008 0 0 0 4.062 11zm5.969 0h3.938A15.905 15.905 0 0 0 12 4.248 15.905 15.905 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.008 8.008 0 0 0-5.648-6.667z",
+  defaultProps,
 });
 
 export const HomeIcon = createIcon({
   displayName: "home-line",
   d: "M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .386-.79l8-6.222a1 1 0 0 1 1.228 0l8 6.222a1 1 0 0 1 .386.79V20zm-2-1V9.978l-7-5.444-7 5.444V19h14z",
+  defaultProps,
 });
 
 export const MoreIcon = createIcon({
   displayName: "more-line",
   d: "M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z",
+  defaultProps,
 });
 
 export const CodeIcon = createIcon({
   displayName: "code-line",
   d: `M23 12l-7.071 7.071-1.414-1.414L20.172 12l-5.657-5.657 1.414-1.414L23 12zM3.828 12l5.657 5.657-1.414 1.414L1 12l7.071-7.071 1.414 1.414L3.828 12z`,
+  defaultProps,
 });
 
 export const SettingsIcon = createIcon({
   displayName: "settings-2-line",
   d: "M8.686 4l2.607-2.607a1 1 0 0 1 1.414 0L15.314 4H19a1 1 0 0 1 1 1v3.686l2.607 2.607a1 1 0 0 1 0 1.414L20 15.314V19a1 1 0 0 1-1 1h-3.686l-2.607 2.607a1 1 0 0 1-1.414 0L8.686 20H5a1 1 0 0 1-1-1v-3.686l-2.607-2.607a1 1 0 0 1 0-1.414L4 8.686V5a1 1 0 0 1 1-1h3.686zM6 6v3.515L3.515 12 6 14.485V18h3.515L12 20.485 14.485 18H18v-3.515L20.485 12 18 9.515V6h-3.515L12 3.515 9.515 6H6zm6 10a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
+  defaultProps,
 });
 
 export const LogoutIcon = createIcon({
   displayName: "logout-box-line",
   d: "M4 18h2v2h12V4H6v2H4V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3zm2-7h7v2H6v3l-5-4 5-4v3z",
+  defaultProps,
 });
 
 export const ProfileIcon = createIcon({
   displayName: "user-line",
   d: "M4 22a8 8 0 1 1 16 0h-2a6 6 0 1 0-12 0H4zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z",
+  defaultProps,
 });
 
 export const ClipboardIcon = createIcon({
   displayName: "clipboard-line",
   d: "M7 4V2h10v2h3.007c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.994.994 0 0 1 3 21.007V4.993C3 4.445 3.445 4 3.993 4H7zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z",
+  defaultProps,
 });
 
 export const TrashIcon = createIcon({
   displayName: "delete-bin-line",
   d: "M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zm-9 3h2v6H9v-6zm4 0h2v6h-2v-6zM9 4v2h6V4H9z",
+  defaultProps,
 });
 
 export const AddIcon = createIcon({
   displayName: "delete-bin-line",
   d: "M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z",
+  defaultProps,
 });

src/components/post/post-menu.tsx

@@ -1,55 +1,78 @@
-import { Avatar, MenuItem } from "@chakra-ui/react";
+import {
+  Avatar,
+  MenuItem,
+  useDisclosure,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+} from "@chakra-ui/react";
 import { useCopyToClipboard } from "react-use";
 
 import { Bech32Prefix, normalizeToBech32 } from "../../helpers/nip-19";
 import { NostrEvent } from "../../types/nostr-event";
 import { MenuIconButton } from "../menu-icon-button";
-import { truncatedId } from "../../helpers/nostr-event";
 
-import { IMAGE_ICONS } from "../icons";
+import { ClipboardIcon, CodeIcon, IMAGE_ICONS } from "../icons";
 
 export const PostMenu = ({ event }: { event: NostrEvent }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const [_clipboardState, copyToClipboard] = useCopyToClipboard();
+  const noteId = normalizeToBech32(event.id, Bech32Prefix.Note);
 
   return (
-    <MenuIconButton>
-      <MenuItem
-        as="a"
-        icon={<Avatar src={IMAGE_ICONS.nostrGuruIcon} size="xs" />}
-        href={`https://www.nostr.guru/e/${event.id}`}
-        target="_blank"
-      >
-        Open in Nostr.guru
-      </MenuItem>
-      <MenuItem
-        as="a"
-        icon={<Avatar src={IMAGE_ICONS.astralIcon} size="xs" />}
-        href={`https://astral.ninja/${normalizeToBech32(
-          event.id,
-          Bech32Prefix.Note
-        )}`}
-        target="_blank"
-      >
-        Open in astral
-      </MenuItem>
-      <MenuItem
-        as="a"
-        icon={<Avatar src={IMAGE_ICONS.brbIcon} size="xs" />}
-        href={`https://brb.io/n/${event.id}`}
-        target="_blank"
-      >
-        Open in BRB
-      </MenuItem>
-      <MenuItem
-        as="a"
-        href={`https://snort.social/e/${event.id}`}
-        target="_blank"
-      >
-        Open in snort.social
-      </MenuItem>
-      <MenuItem onClick={() => copyToClipboard(event.id)}>
-        Copy {truncatedId(event.id)}
-      </MenuItem>
-    </MenuIconButton>
+    <>
+      <MenuIconButton>
+        <MenuItem
+          as="a"
+          icon={<Avatar src={IMAGE_ICONS.nostrGuruIcon} size="xs" />}
+          href={`https://www.nostr.guru/e/${event.id}`}
+          target="_blank"
+        >
+          Open in Nostr.guru
+        </MenuItem>
+        <MenuItem
+          as="a"
+          icon={<Avatar src={IMAGE_ICONS.astralIcon} size="xs" />}
+          href={`https://astral.ninja/${noteId}`}
+          target="_blank"
+        >
+          Open in astral
+        </MenuItem>
+        <MenuItem
+          as="a"
+          icon={<Avatar src={IMAGE_ICONS.brbIcon} size="xs" />}
+          href={`https://brb.io/n/${noteId}`}
+          target="_blank"
+        >
+          Open in BRB
+        </MenuItem>
+        <MenuItem as="a" href={`https://snort.social/e/${noteId}`} target="_blank">
+          Open in snort.social
+        </MenuItem>
+        {noteId && (
+          <MenuItem onClick={() => copyToClipboard(noteId)} icon={<ClipboardIcon />}>
+            Copy Note ID
+          </MenuItem>
+        )}
+        <MenuItem onClick={onOpen} icon={<CodeIcon />}>
+          View Raw
+        </MenuItem>
+      </MenuIconButton>
+      {isOpen && (
+        <Modal isOpen={isOpen} onClose={onClose} size="6xl">
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader>Raw Event</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody overflow="auto">
+              <pre>{JSON.stringify(event, null, 2)}</pre>
+            </ModalBody>
+          </ModalContent>
+        </Modal>
+      )}
+    </>
   );
 };