diff --git a/components/CardOptionsDropdown.tsx b/components/CardOptionsDropdown.tsx new file mode 100644 index 0000000..3b9a9e8 --- /dev/null +++ b/components/CardOptionsDropdown.tsx @@ -0,0 +1,148 @@ +import React, { useMemo } from 'react'; +import { Button } from "@/components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { + Drawer, + DrawerClose, + DrawerContent, + DrawerDescription, + DrawerFooter, + DrawerHeader, + DrawerTitle, + DrawerTrigger, +} from "@/components/ui/drawer"; +import { Textarea } from "./ui/textarea"; +import { DotsVerticalIcon, CodeIcon, Share1Icon } from "@radix-ui/react-icons"; +import { Input } from "./ui/input"; +import { useRef, useState } from 'react'; +import { useToast } from "./ui/use-toast"; +import { Event as NostrEvent, nip19 } from "nostr-tools"; + +interface CardOptionsDropdownProps { + event: NostrEvent; +} + +export default function CardOptionsDropdown({ event }: CardOptionsDropdownProps) { + const jsonEvent = useMemo(() => JSON.stringify(event, null, 2), [event]); + const inputRef = useRef(null); + const inputRefID = useRef(null); + const { toast } = useToast(); + const [dropdownOpen, setDropdownOpen] = useState(false); + const [shareDrawerOpen, setShareDrawerOpen] = useState(false); + const [rawDrawerOpen, setRawDrawerOpen] = useState(false); + + const handleCopyLink = async () => { + try { + await navigator.clipboard.writeText(window.location.href); + toast({ + description: 'URL copied to clipboard', + title: 'Copied' + }); + } catch (err) { + toast({ + description: 'Error copying URL to clipboard', + title: 'Error', + variant: 'destructive' + }); + } + }; + + const handleCopyNoteId = async () => { + try { + await navigator.clipboard.writeText(nip19.noteEncode(event.id)); + toast({ + description: 'Note ID copied to clipboard', + title: 'Copied' + }); + } catch (err) { + toast({ + description: 'Error copying Note ID to clipboard', + title: 'Error', + variant: 'destructive' + }); + } + }; + + return ( + <> + + + + + + + + {/* Share option */} + { + setDropdownOpen(false); + setTimeout(() => setShareDrawerOpen(true), 100); + }} + > + + Share + + + {/* View Raw option */} + { + setDropdownOpen(false); + setTimeout(() => setRawDrawerOpen(true), 100); + }} + > + + View Raw + + + + + {/* Share Drawer */} + + + + Share this Note + Share this Note with others. + + + + + Copy Link + + + + Copy Note ID + + + + + Close + + + + + + {/* Raw Event Drawer */} + + + + Raw Event + This shows the raw event data. + + + + + + + Close + + + + + > + ); +} diff --git a/components/KIND20Card.tsx b/components/KIND20Card.tsx index e839966..00ef43c 100644 --- a/components/KIND20Card.tsx +++ b/components/KIND20Card.tsx @@ -7,13 +7,12 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel" import ReactionButton from "@/components/ReactionButton" import { Avatar, AvatarImage } from "@/components/ui/avatar" -import ViewRawButton from "@/components/ViewRawButton" import ViewNoteButton from "./ViewNoteButton" import Link from "next/link" -import ViewCopyButton from "./ViewCopyButton" import type { Event as NostrEvent } from "nostr-tools" import ZapButton from "./ZapButton" import Image from "next/image" +import CardOptionsDropdown from "./CardOptionsDropdown" import { renderTextWithLinkedTags } from "@/utils/textUtils" // Function to extract all images from a kind 20 event's imeta tags @@ -103,8 +102,8 @@ const KIND20Card: React.FC = ({ <> - - + + @@ -125,6 +124,7 @@ const KIND20Card: React.FC = ({ + @@ -177,10 +177,6 @@ const KIND20Card: React.FC = ({ {showViewNoteCardButton && } - - - - diff --git a/components/NoteCard.tsx b/components/NoteCard.tsx index 9399c53..56cf85e 100644 --- a/components/NoteCard.tsx +++ b/components/NoteCard.tsx @@ -25,12 +25,11 @@ import { } from "@/components/ui/carousel" import ReactionButton from '@/components/ReactionButton'; import { Avatar, AvatarImage } from '@/components/ui/avatar'; -import ViewRawButton from '@/components/ViewRawButton'; import ViewNoteButton from './ViewNoteButton'; import Link from 'next/link'; -import ViewCopyButton from './ViewCopyButton'; import { Event as NostrEvent } from "nostr-tools"; import ZapButton from './ZapButton'; +import CardOptionsDropdown from './CardOptionsDropdown'; import { renderTextWithLinkedTags } from '@/utils/textUtils'; interface NoteCardProps { @@ -60,8 +59,8 @@ const NoteCard: React.FC = ({ pubkey, text, eventId, tags, event, return ( <> - - + + @@ -80,6 +79,7 @@ const NoteCard: React.FC = ({ pubkey, text, eventId, tags, event, + @@ -147,16 +147,12 @@ const NoteCard: React.FC = ({ pubkey, text, eventId, tags, event, - + {showViewNoteCardButton && } - - - -