Cody Tseng
1 year ago
committed by
GitHub
16 changed files with 416 additions and 185 deletions
@ -0,0 +1,152 @@
@@ -0,0 +1,152 @@
|
||||
import { Button } from '@/components/ui/button' |
||||
import { Drawer, DrawerContent, DrawerOverlay } from '@/components/ui/drawer' |
||||
import { |
||||
DropdownMenu, |
||||
DropdownMenuContent, |
||||
DropdownMenuItem, |
||||
DropdownMenuSeparator, |
||||
DropdownMenuTrigger |
||||
} from '@/components/ui/dropdown-menu' |
||||
import { getSharableEventId } from '@/lib/event' |
||||
import { pubkeyToNpub } from '@/lib/pubkey' |
||||
import { useMuteList } from '@/providers/MuteListProvider' |
||||
import { useNostr } from '@/providers/NostrProvider' |
||||
import { useScreenSize } from '@/providers/ScreenSizeProvider' |
||||
import { Bell, BellOff, Code, Copy, Ellipsis } from 'lucide-react' |
||||
import { Event } from 'nostr-tools' |
||||
import { useMemo, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import RawEventDialog from './RawEventDialog' |
||||
|
||||
export default function NoteOptions({ event, className }: { event: Event; className?: string }) { |
||||
const { t } = useTranslation() |
||||
const { isSmallScreen } = useScreenSize() |
||||
const { pubkey } = useNostr() |
||||
const [isRawEventDialogOpen, setIsRawEventDialogOpen] = useState(false) |
||||
const [isDrawerOpen, setIsDrawerOpen] = useState(false) |
||||
const { mutePubkey, unmutePubkey, mutePubkeys } = useMuteList() |
||||
const isMuted = useMemo(() => mutePubkeys.includes(event.pubkey), [mutePubkeys, event]) |
||||
|
||||
const trigger = ( |
||||
<button |
||||
className="flex items-center text-muted-foreground hover:text-foreground pl-3 h-full" |
||||
onClick={() => setIsDrawerOpen(true)} |
||||
> |
||||
<Ellipsis /> |
||||
</button> |
||||
) |
||||
|
||||
const rawEventDialog = ( |
||||
<RawEventDialog |
||||
event={event} |
||||
isOpen={isRawEventDialogOpen} |
||||
onClose={() => setIsRawEventDialogOpen(false)} |
||||
/> |
||||
) |
||||
|
||||
if (isSmallScreen) { |
||||
return ( |
||||
<div className={className} onClick={(e) => e.stopPropagation()}> |
||||
{trigger} |
||||
<Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}> |
||||
<DrawerOverlay onClick={() => setIsDrawerOpen(false)} /> |
||||
<DrawerContent hideOverlay> |
||||
<div className="py-2"> |
||||
<Button |
||||
onClick={() => { |
||||
setIsDrawerOpen(false) |
||||
navigator.clipboard.writeText(getSharableEventId(event)) |
||||
}} |
||||
className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5" |
||||
variant="ghost" |
||||
> |
||||
<Copy /> |
||||
{t('Copy event ID')} |
||||
</Button> |
||||
<Button |
||||
onClick={() => { |
||||
navigator.clipboard.writeText(pubkeyToNpub(event.pubkey) ?? '') |
||||
setIsDrawerOpen(false) |
||||
}} |
||||
className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5" |
||||
variant="ghost" |
||||
> |
||||
<Copy /> |
||||
{t('Copy user ID')} |
||||
</Button> |
||||
<Button |
||||
onClick={() => { |
||||
setIsDrawerOpen(false) |
||||
setIsRawEventDialogOpen(true) |
||||
}} |
||||
className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5" |
||||
variant="ghost" |
||||
> |
||||
<Code /> |
||||
{t('View raw event')} |
||||
</Button> |
||||
{pubkey && ( |
||||
<Button |
||||
onClick={() => { |
||||
setIsDrawerOpen(false) |
||||
if (isMuted) { |
||||
unmutePubkey(event.pubkey) |
||||
} else { |
||||
mutePubkey(event.pubkey) |
||||
} |
||||
}} |
||||
className="w-full p-6 justify-start text-destructive text-lg gap-4 [&_svg]:size-5 focus:text-destructive" |
||||
variant="ghost" |
||||
> |
||||
{isMuted ? <Bell /> : <BellOff />} |
||||
{isMuted ? t('Unmute user') : t('Mute user')} |
||||
</Button> |
||||
)} |
||||
</div> |
||||
</DrawerContent> |
||||
</Drawer> |
||||
{rawEventDialog} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<div className={className} onClick={(e) => e.stopPropagation()}> |
||||
<DropdownMenu> |
||||
<DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger> |
||||
<DropdownMenuContent collisionPadding={8} className="min-w-52"> |
||||
<DropdownMenuItem |
||||
onClick={() => navigator.clipboard.writeText(getSharableEventId(event))} |
||||
> |
||||
<Copy /> |
||||
{t('Copy event ID')} |
||||
</DropdownMenuItem> |
||||
<DropdownMenuItem |
||||
onClick={() => navigator.clipboard.writeText(pubkeyToNpub(event.pubkey) ?? '')} |
||||
> |
||||
<Copy /> |
||||
{t('Copy user ID')} |
||||
</DropdownMenuItem> |
||||
<DropdownMenuSeparator /> |
||||
<DropdownMenuItem onClick={() => setIsRawEventDialogOpen(true)}> |
||||
<Code /> |
||||
{t('View raw event')} |
||||
</DropdownMenuItem> |
||||
{pubkey && ( |
||||
<> |
||||
<DropdownMenuSeparator /> |
||||
<DropdownMenuItem |
||||
onClick={() => (isMuted ? unmutePubkey(event.pubkey) : mutePubkey(event.pubkey))} |
||||
className="text-destructive focus:text-destructive" |
||||
> |
||||
{isMuted ? <Bell /> : <BellOff />} |
||||
{isMuted ? t('Unmute user') : t('Mute user')} |
||||
</DropdownMenuItem> |
||||
</> |
||||
)} |
||||
</DropdownMenuContent> |
||||
</DropdownMenu> |
||||
{rawEventDialog} |
||||
</div> |
||||
) |
||||
} |
||||
@ -1,68 +0,0 @@
@@ -1,68 +0,0 @@
|
||||
import { |
||||
DropdownMenu, |
||||
DropdownMenuContent, |
||||
DropdownMenuItem, |
||||
DropdownMenuTrigger |
||||
} from '@/components/ui/dropdown-menu' |
||||
import { getSharableEventId } from '@/lib/event' |
||||
import { pubkeyToNpub } from '@/lib/pubkey' |
||||
import { useMuteList } from '@/providers/MuteListProvider' |
||||
import { useNostr } from '@/providers/NostrProvider' |
||||
import { Bell, BellOff, Code, Copy, Ellipsis } from 'lucide-react' |
||||
import { Event } from 'nostr-tools' |
||||
import { useMemo, useState } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import RawEventDialog from './RawEventDialog' |
||||
|
||||
export default function NoteOptions({ event }: { event: Event }) { |
||||
const { t } = useTranslation() |
||||
const { pubkey } = useNostr() |
||||
const [isRawEventDialogOpen, setIsRawEventDialogOpen] = useState(false) |
||||
const { mutePubkey, unmutePubkey, mutePubkeys } = useMuteList() |
||||
const isMuted = useMemo(() => mutePubkeys.includes(event.pubkey), [mutePubkeys, event]) |
||||
|
||||
return ( |
||||
<div className="h-4" onClick={(e) => e.stopPropagation()}> |
||||
<DropdownMenu> |
||||
<DropdownMenuTrigger> |
||||
<Ellipsis |
||||
size={16} |
||||
className="text-muted-foreground hover:text-foreground cursor-pointer" |
||||
/> |
||||
</DropdownMenuTrigger> |
||||
<DropdownMenuContent collisionPadding={8}> |
||||
<DropdownMenuItem |
||||
onClick={() => navigator.clipboard.writeText(getSharableEventId(event))} |
||||
> |
||||
<Copy /> |
||||
{t('Copy event ID')} |
||||
</DropdownMenuItem> |
||||
<DropdownMenuItem |
||||
onClick={() => navigator.clipboard.writeText(pubkeyToNpub(event.pubkey) ?? '')} |
||||
> |
||||
<Copy /> |
||||
{t('Copy user ID')} |
||||
</DropdownMenuItem> |
||||
<DropdownMenuItem onClick={() => setIsRawEventDialogOpen(true)}> |
||||
<Code /> |
||||
{t('View raw event')} |
||||
</DropdownMenuItem> |
||||
{pubkey && ( |
||||
<DropdownMenuItem |
||||
onClick={() => (isMuted ? unmutePubkey(event.pubkey) : mutePubkey(event.pubkey))} |
||||
className="text-destructive focus:text-destructive" |
||||
> |
||||
{isMuted ? <Bell /> : <BellOff />} |
||||
{isMuted ? t('Unmute user') : t('Mute user')} |
||||
</DropdownMenuItem> |
||||
)} |
||||
</DropdownMenuContent> |
||||
</DropdownMenu> |
||||
<RawEventDialog |
||||
event={event} |
||||
isOpen={isRawEventDialogOpen} |
||||
onClose={() => setIsRawEventDialogOpen(false)} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue