diff --git a/src/components/ProfileOptions/index.tsx b/src/components/ProfileOptions/index.tsx index 205576c..8b825d3 100644 --- a/src/components/ProfileOptions/index.tsx +++ b/src/components/ProfileOptions/index.tsx @@ -1,4 +1,5 @@ import { Button } from '@/components/ui/button' +import { Drawer, DrawerContent, DrawerOverlay } from '@/components/ui/drawer' import { DropdownMenu, DropdownMenuContent, @@ -8,56 +9,138 @@ import { import { pubkeyToNpub } from '@/lib/pubkey' import { useMuteList } from '@/providers/MuteListProvider' import { useNostr } from '@/providers/NostrProvider' +import { useScreenSize } from '@/providers/ScreenSizeProvider' import { Bell, BellOff, Copy, Ellipsis } from 'lucide-react' -import { useMemo } from 'react' +import { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' export default function ProfileOptions({ pubkey }: { pubkey: string }) { const { t } = useTranslation() + const { isSmallScreen } = useScreenSize() const { pubkey: accountPubkey } = useNostr() const { mutePubkeySet, mutePubkeyPrivately, mutePubkeyPublicly, unmutePubkey } = useMuteList() + const [isDrawerOpen, setIsDrawerOpen] = useState(false) const isMuted = useMemo(() => mutePubkeySet.has(pubkey), [mutePubkeySet, pubkey]) if (pubkey === accountPubkey) return null + const trigger = ( + { + if (isSmallScreen) { + setIsDrawerOpen(true) + } + }} + > + + + ) + + if (isSmallScreen) { + return ( + <> + {trigger} + + setIsDrawerOpen(false)} /> + + + { + setIsDrawerOpen(false) + navigator.clipboard.writeText(pubkeyToNpub(pubkey) ?? '') + }} + className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5" + variant="ghost" + > + + {t('Copy user ID')} + + {accountPubkey ? ( + isMuted ? ( + { + setIsDrawerOpen(false) + unmutePubkey(pubkey) + }} + className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5 text-destructive focus:text-destructive" + variant="ghost" + > + + {t('Unmute user')} + + ) : ( + <> + { + setIsDrawerOpen(false) + mutePubkeyPrivately(pubkey) + }} + className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5 text-destructive focus:text-destructive" + variant="ghost" + > + + {t('Mute user privately')} + + { + setIsDrawerOpen(false) + mutePubkeyPublicly(pubkey) + }} + className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5 text-destructive focus:text-destructive" + variant="ghost" + > + + {t('Mute user publicly')} + + > + ) + ) : null} + + + + > + ) + } + return ( - - - - - + {trigger} navigator.clipboard.writeText(pubkeyToNpub(pubkey) ?? '')}> {t('Copy user ID')} - {isMuted ? ( - unmutePubkey(pubkey)} - className="text-destructive focus:text-destructive" - > - - {t('Unmute user')} - - ) : ( - <> + {accountPubkey ? ( + isMuted ? ( mutePubkeyPrivately(pubkey)} + onClick={() => unmutePubkey(pubkey)} className="text-destructive focus:text-destructive" > - - {t('Mute user privately')} + + {t('Unmute user')} - mutePubkeyPublicly(pubkey)} - className="text-destructive focus:text-destructive" - > - - {t('Mute user publicly')} - - > - )} + ) : ( + <> + mutePubkeyPrivately(pubkey)} + className="text-destructive focus:text-destructive" + > + + {t('Mute user privately')} + + mutePubkeyPublicly(pubkey)} + className="text-destructive focus:text-destructive" + > + + {t('Mute user publicly')} + + > + ) + ) : null} )