witchsky.app / src / components / PostControls / ShareMenu / ShareMenuItems.web.tsx

import {memo, useMemo} from 'react'
import {AtUri} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'

import {useOpenLink} from '#/lib/hooks/useOpenLink'
import {makeProfileLink} from '#/lib/routes/links'
import {type NavigationProp} from '#/lib/routes/types'
import {shareText, shareUrl} from '#/lib/sharing'
import {getTerminology, TERMINOLOGY} from '#/lib/strings/terminology'
import {toShareUrl, toShareUrlBsky} from '#/lib/strings/url-helpers'
import {logger} from '#/logger'
import {isWeb} from '#/platform/detection'
import {useProfileShadow} from '#/state/cache/profile-shadow'
import {useTerminologyPreference} from '#/state/preferences'
import {useShowExternalShareButtons} from '#/state/preferences/external-share-buttons'
import {useSession} from '#/state/session'
import {useBreakpoints} from '#/alf'
import {useDialogControl} from '#/components/Dialog'
import {EmbedDialog} from '#/components/dialogs/Embed'
import {SendViaChatDialog} from '#/components/dms/dialogs/ShareViaChatDialog'
import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink'
import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
import {CodeBrackets_Stroke2_Corner0_Rounded as CodeBracketsIcon} from '#/components/icons/CodeBrackets'
import {PaperPlane_Stroke2_Corner0_Rounded as Send} from '#/components/icons/PaperPlane'
import {SquareArrowTopRight_Stroke2_Corner0_Rounded as ExternalIcon} from '#/components/icons/SquareArrowTopRight'
import * as Menu from '#/components/Menu'
import {useAgeAssurance} from '#/ageAssurance'
import {useDevMode} from '#/storage/hooks/dev-mode'
import {type ShareMenuItemsProps} from './ShareMenuItems.types'

let ShareMenuItems = ({
  post,
  record,
  timestamp,
  onShare: onShareProp,
}: ShareMenuItemsProps): React.ReactNode => {
  const {hasSession} = useSession()
  const {gtMobile} = useBreakpoints()
  const {_} = useLingui()
  const terminologyPreference = useTerminologyPreference()
  const navigation = useNavigation<NavigationProp>()
  const embedPostControl = useDialogControl()
  const sendViaChatControl = useDialogControl()
  const [devModeEnabled] = useDevMode()
  const aa = useAgeAssurance()
  const openLink = useOpenLink()

  const postUri = post.uri
  const postCid = post.cid
  const postAuthor = useProfileShadow(post.author)

  const href = useMemo(() => {
    const urip = new AtUri(postUri)
    return makeProfileLink(postAuthor, 'post', urip.rkey)
  }, [postUri, postAuthor])

  const hideInPWI = useMemo(() => {
    return !!postAuthor.labels?.find(
      label => label.val === '!no-unauthenticated',
    )
  }, [postAuthor])

  const onCopyLink = () => {
    logger.metric('share:press:copyLink', {}, {statsig: true})
    const url = toShareUrl(href)
    shareUrl(url)
    onShareProp()
  }

  const onCopyLinkBsky = () => {
    logger.metric('share:press:copyLink', {}, {statsig: true})
    const url = toShareUrlBsky(href)
    shareUrl(url)
    onShareProp()
  }

  const onSelectChatToShareTo = (conversation: string) => {
    logger.metric('share:press:dmSelected', {}, {statsig: true})
    navigation.navigate('MessagesConversation', {
      conversation,
      embed: postUri,
    })
  }

  const canEmbed = isWeb && gtMobile && !hideInPWI

  const onShareATURI = () => {
    shareText(postUri)
  }

  const onShareAuthorDID = () => {
    shareText(postAuthor.did)
  }

  const showExternalShareButtons = useShowExternalShareButtons()
  const isBridgedPost =
    !!post.record.bridgyOriginalUrl || !!post.record.fediverseId
  const originalPostUrl = (post.record.bridgyOriginalUrl ||
    post.record.fediverseId) as string | undefined

  const onOpenOriginalPost = () => {
    originalPostUrl && openLink(originalPostUrl, true)
  }

  const onOpenPostInPdsls = () => {
    openLink(`https://pdsls.dev/${post.uri}`, true)
  }

  const copyLinkItem = (
    <Menu.Group>
      <Menu.Item
        testID="postDropdownShareBtn"
        label={_(getTerminology(terminologyPreference, {
          skeet: msg`Copy link to skeet`,
          post: msg`Copy link to post`,
          spell: msg`Copy link to spell`,
        }))}
        onPress={onCopyLink}>
        <Menu.ItemText>
          <Trans>{_(getTerminology(terminologyPreference, {
            skeet: msg`Copy link to skeet`,
            post: msg`Copy link to post`,
            spell: msg`Copy link to spell`,
          }))}</Trans>
        </Menu.ItemText>
        <Menu.ItemIcon icon={ChainLinkIcon} position="right" />
      </Menu.Item>
      <Menu.Item
        testID="postDropdownShareBtn"
        label={_(msg`Copy link to post`)}
        onPress={onCopyLinkBsky}>
        <Menu.ItemText>
          <Trans>Copy via bsky.app</Trans>
        </Menu.ItemText>
        <Menu.ItemIcon icon={ChainLinkIcon} position="right" />
      </Menu.Item>
    </Menu.Group>
  )

  return (
    <>
      <Menu.Outer>
        {copyLinkItem}

        {showExternalShareButtons && isBridgedPost && (
          <Menu.Item
            testID="postDropdownOpenOriginalPost"
            label={_(getTerminology(terminologyPreference, {
              skeet: msg`Open original skeet`,
              post: msg`Open original post`,
              spell: msg`Open original spell`,
            }))}
            onPress={onOpenOriginalPost}>
            <Menu.ItemText>
              <Trans>{_(getTerminology(terminologyPreference, {
                skeet: msg`Open original skeet`,
                post: msg`Open original post`,
                spell: msg`Open original spell`,
              }))}</Trans>
            </Menu.ItemText>
            <Menu.ItemIcon icon={ExternalIcon} position="right" />
          </Menu.Item>
        )}

        {showExternalShareButtons && (
          <Menu.Item
            testID="postDropdownOpenInPdsls"
            label={_(getTerminology(terminologyPreference, {
              skeet: msg`Open skeet in PDSls`,
              post: msg`Open post in PDSls`,
              spell: msg`Open spell in PDSls`,
            }))}
            onPress={onOpenPostInPdsls}>
            <Menu.ItemText>
              <Trans>{_(getTerminology(terminologyPreference, {
                skeet: msg`Open skeet in PDSls`,
                post: msg`Open post in PDSls`,
                spell: msg`Open spell in PDSls`,
              }))}</Trans>
            </Menu.ItemText>
            <Menu.ItemIcon icon={ExternalIcon} position="right" />
          </Menu.Item>
        )}

        {hasSession && aa.state.access === aa.Access.Full && (
          <Menu.Item
            testID="postDropdownSendViaDMBtn"
            label={_(msg`Send via direct message`)}
            onPress={() => {
              logger.metric('share:press:openDmSearch', {}, {statsig: true})
              sendViaChatControl.open()
            }}>
            <Menu.ItemText>
              <Trans>Send via direct message</Trans>
            </Menu.ItemText>
            <Menu.ItemIcon icon={Send} position="right" />
          </Menu.Item>
        )}

        {canEmbed && (
          <Menu.Item
            testID="postDropdownEmbedBtn"
            label={_(getTerminology(terminologyPreference, {
              skeet: msg`Embed skeet`,
              post: msg`Embed post`,
              spell: msg`Embed spell`,
            }))}
            onPress={() => {
              logger.metric('share:press:embed', {}, {statsig: true})
              embedPostControl.open()
            }}>
            <Menu.ItemText>{_(getTerminology(terminologyPreference, {
              skeet: msg`Embed skeet`,
              post: msg`Embed post`,
              spell: msg`Embed spell`,
            }))}</Menu.ItemText>
            <Menu.ItemIcon icon={CodeBracketsIcon} position="right" />
          </Menu.Item>
        )}

        {false && hideInPWI && (
          <>
            {hasSession && <Menu.Divider />}
            {copyLinkItem}
            <Menu.LabelText style={{maxWidth: 220}}>
              <Trans>{_(getTerminology(terminologyPreference, {
                skeet: msg`Note: This skeet is only visible to logged-in users.`,
                post: msg`Note: This post is only visible to logged-in users.`,
                spell: msg`Note: This spell is only visible to logged-in users.`,
              }))}</Trans>
            </Menu.LabelText>
          </>
        )}

        {devModeEnabled && (
          <>
            <Menu.Divider />
            <Menu.Item
              testID="postAtUriShareBtn"
              label={_(getTerminology(terminologyPreference, {
                skeet: msg`Copy skeet at:// URI`,
                post: msg`Copy post at:// URI`,
                spell: msg`Copy spell at:// URI`,
              }))}
              onPress={onShareATURI}>
              <Menu.ItemText>
                <Trans>{_(getTerminology(terminologyPreference, {
                  skeet: msg`Copy skeet at:// URI`,
                  post: msg`Copy post at:// URI`,
                  spell: msg`Copy spell at:// URI`,
                }))}</Trans>
              </Menu.ItemText>
              <Menu.ItemIcon icon={ClipboardIcon} position="right" />
            </Menu.Item>
            <Menu.Item
              testID="postAuthorDIDShareBtn"
              label={_(msg`Copy author DID`)}
              onPress={onShareAuthorDID}>
              <Menu.ItemText>
                <Trans>Copy author DID</Trans>
              </Menu.ItemText>
              <Menu.ItemIcon icon={ClipboardIcon} position="right" />
            </Menu.Item>
          </>
        )}
      </Menu.Outer>

      {canEmbed && (
        <EmbedDialog
          control={embedPostControl}
          postCid={postCid}
          postUri={postUri}
          record={record}
          postAuthor={postAuthor}
          timestamp={timestamp}
        />
      )}

      <SendViaChatDialog
        control={sendViaChatControl}
        onSelectChat={onSelectChatToShareTo}
      />
    </>
  )
}
ShareMenuItems = memo(ShareMenuItems)
export {ShareMenuItems}