From 4a1b1f17f46de9f8dde2766d61edc02c2267b14b Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 9 Sep 2025 18:45:36 +0300 Subject: Clean up dialogs (#8934) --- src/components/NewskieDialog.tsx | 210 +++++++++++---------- src/components/StarterPack/QrCode.tsx | 20 +- src/components/StarterPack/QrCodeDialog.tsx | 113 ++++++----- src/components/StarterPack/ShareDialog.tsx | 54 +++--- src/components/dialogs/EmbedConsent.tsx | 6 +- .../Settings/components/ExportCarDialog.tsx | 13 +- 6 files changed, 221 insertions(+), 195 deletions(-) (limited to 'src') diff --git a/src/components/NewskieDialog.tsx b/src/components/NewskieDialog.tsx index 0644ba704..30f70f549 100644 --- a/src/components/NewskieDialog.tsx +++ b/src/components/NewskieDialog.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import {useMemo, useState} from 'react' import {View} from 'react-native' import {type AppBskyActorDefs, moderateProfile} from '@atproto/api' import {msg, Trans} from '@lingui/macro' @@ -27,30 +27,12 @@ export function NewskieDialog({ disabled?: boolean }) { const {_} = useLingui() - const t = useTheme() - const moderationOpts = useModerationOpts() - const {currentAccount} = useSession() - const timeAgo = useGetTimeAgo() const control = useDialogControl() - const isMe = profile.did === currentAccount?.did const createdAt = profile.createdAt as string | undefined - const profileName = React.useMemo(() => { - const name = profile.displayName || profile.handle - - if (isMe) { - return _(msg`You`) - } - - if (!moderationOpts) return name - const moderation = moderateProfile(profile, moderationOpts) - - return sanitizeDisplayName(name, moderation.ui('displayName')) - }, [_, isMe, moderationOpts, profile]) - - const [now] = React.useState(() => Date.now()) - const daysOld = React.useMemo(() => { + const [now] = useState(() => Date.now()) + const daysOld = useMemo(() => { if (!createdAt) return Infinity return differenceInSeconds(now, new Date(createdAt)) / 86400 }, [createdAt, now]) @@ -77,88 +59,116 @@ export function NewskieDialog({ )} - + - - - - - - - - {isMe ? ( - Welcome, friend! - ) : ( - Say hello! - )} - - - - {profile.joinedViaStarterPack ? ( - - {profileName} joined Bluesky using a starter pack{' '} - {timeAgo(createdAt, now, {format: 'long'})} ago - - ) : ( - - {profileName} joined Bluesky{' '} - {timeAgo(createdAt, now, {format: 'long'})} ago - - )} - - {profile.joinedViaStarterPack ? ( - { - control.close() - }}> - - - - - ) : null} + + + + ) +} - {isNative && ( - - )} +function DialogInner({ + profile, + createdAt, + now, +}: { + profile: AppBskyActorDefs.ProfileViewDetailed + createdAt: string + now: number +}) { + const control = Dialog.useDialogContext() + const {_} = useLingui() + const t = useTheme() + const moderationOpts = useModerationOpts() + const {currentAccount} = useSession() + const timeAgo = useGetTimeAgo() + const isMe = profile.did === currentAccount?.did + + const profileName = useMemo(() => { + const name = profile.displayName || profile.handle + + if (isMe) { + return _(msg`You`) + } + + if (!moderationOpts) return name + const moderation = moderateProfile(profile, moderationOpts) + + return sanitizeDisplayName(name, moderation.ui('displayName')) + }, [_, isMe, moderationOpts, profile]) + + return ( + + + + + + + {isMe ? Welcome, friend! : Say hello!} + + + + {profile.joinedViaStarterPack ? ( + + {profileName} joined Bluesky using a starter pack{' '} + {timeAgo(createdAt, now, {format: 'long'})} ago + + ) : ( + + {profileName} joined Bluesky{' '} + {timeAgo(createdAt, now, {format: 'long'})} ago + + )} + + {profile.joinedViaStarterPack ? ( + control.close()}> + + + + + ) : null} - - - - + {isNative && ( + + )} + + + + ) } diff --git a/src/components/StarterPack/QrCode.tsx b/src/components/StarterPack/QrCode.tsx index 86f1aa1e6..4c28a41c5 100644 --- a/src/components/StarterPack/QrCode.tsx +++ b/src/components/StarterPack/QrCode.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import {lazy} from 'react' import {View} from 'react-native' // @ts-expect-error missing types import QRCode from 'react-native-qrcode-styled' @@ -15,20 +15,20 @@ import {LinearGradientBackground} from '#/components/LinearGradientBackground' import {Text} from '#/components/Typography' import * as bsky from '#/types/bsky' -const LazyViewShot = React.lazy( +const LazyViewShot = lazy( // @ts-expect-error dynamic import () => import('react-native-view-shot/src/index'), ) -interface Props { +export function QrCode({ + starterPack, + link, + ref, +}: { starterPack: AppBskyGraphDefs.StarterPackView link: string -} - -export const QrCode = React.forwardRef(function QrCode( - {starterPack, link}, - ref, -) { + ref: React.Ref +}) { const {record} = starterPack if ( @@ -93,7 +93,7 @@ export const QrCode = React.forwardRef(function QrCode( ) -}) +} export function QrCodeInner({link}: {link: string}) { const t = useTheme() diff --git a/src/components/StarterPack/QrCodeDialog.tsx b/src/components/StarterPack/QrCodeDialog.tsx index 6a66e92bd..4c40ccb10 100644 --- a/src/components/StarterPack/QrCodeDialog.tsx +++ b/src/components/StarterPack/QrCodeDialog.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import {Suspense, useRef, useState} from 'react' import {View} from 'react-native' import type ViewShot from 'react-native-view-shot' import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker' @@ -8,16 +8,18 @@ import {type AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {logEvent} from '#/lib/statsig/statsig' import {logger} from '#/logger' import {isNative, isWeb} from '#/platform/detection' -import * as Toast from '#/view/com/util/Toast' -import {atoms as a} from '#/alf' -import {Button, ButtonText} from '#/components/Button' +import {atoms as a, useBreakpoints} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import {type DialogControlProps} from '#/components/Dialog' +import {ArrowOutOfBoxModified_Stroke2_Corner2_Rounded as ShareIcon} from '#/components/icons/ArrowOutOfBox' +import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink' +import {FloppyDisk_Stroke2_Corner0_Rounded as FloppyDiskIcon} from '#/components/icons/FloppyDisk' import {Loader} from '#/components/Loader' import {QrCode} from '#/components/StarterPack/QrCode' +import * as Toast from '#/components/Toast' import * as bsky from '#/types/bsky' export function QrCodeDialog({ @@ -30,9 +32,11 @@ export function QrCodeDialog({ control: DialogControlProps }) { const {_} = useLingui() - const [isProcessing, setIsProcessing] = React.useState(false) + const {gtMobile} = useBreakpoints() + const [isSaveProcessing, setIsSaveProcessing] = useState(false) + const [isCopyProcessing, setIsCopyProcessing] = useState(false) - const ref = React.useRef(null) + const ref = useRef(null) const getCanvas = (base64: string): Promise => { return new Promise(resolve => { @@ -68,15 +72,14 @@ export function QrCodeDialog({ try { await createAssetAsync(`file://${uri}`) } catch (e: unknown) { - Toast.show( - _(msg`An error occurred while saving the QR code!`), - 'xmark', - ) + Toast.show(_(msg`An error occurred while saving the QR code!`), { + type: 'error', + }) logger.error('Failed to save QR code', {error: e}) return } } else { - setIsProcessing(true) + setIsSaveProcessing(true) if ( !bsky.validate( @@ -101,12 +104,12 @@ export function QrCodeDialog({ link.click() } - logEvent('starterPack:share', { + logger.metric('starterPack:share', { starterPack: starterPack.uri, shareType: 'qrcode', qrShareType: 'save', }) - setIsProcessing(false) + setIsSaveProcessing(false) Toast.show( isWeb ? _(msg`QR code has been downloaded!`) @@ -117,7 +120,7 @@ export function QrCodeDialog({ } const onCopyPress = async () => { - setIsProcessing(true) + setIsCopyProcessing(true) ref.current?.capture?.().then(async (uri: string) => { const canvas = await getCanvas(uri) // @ts-expect-error web only @@ -126,13 +129,13 @@ export function QrCodeDialog({ navigator.clipboard.write([item]) }) - logEvent('starterPack:share', { + logger.metric('starterPack:share', { starterPack: starterPack.uri, shareType: 'qrcode', qrShareType: 'copy', }) Toast.show(_(msg`QR code copied to your clipboard!`)) - setIsProcessing(false) + setIsCopyProcessing(false) control.close() }) } @@ -142,7 +145,7 @@ export function QrCodeDialog({ control.close(() => { Sharing.shareAsync(uri, {mimeType: 'image/png', UTI: 'image/png'}).then( () => { - logEvent('starterPack:share', { + logger.metric('starterPack:share', { starterPack: starterPack.uri, shareType: 'qrcode', qrShareType: 'share', @@ -154,49 +157,57 @@ export function QrCodeDialog({ } return ( - + - }> + }> {!link ? ( ) : ( <> - {isProcessing ? ( - - - - ) : ( - - - - - )} + + + + )} - + @@ -206,7 +217,7 @@ export function QrCodeDialog({ function Loading() { return ( - + ) diff --git a/src/components/StarterPack/ShareDialog.tsx b/src/components/StarterPack/ShareDialog.tsx index c159b42dd..32932fe2d 100644 --- a/src/components/StarterPack/ShareDialog.tsx +++ b/src/components/StarterPack/ShareDialog.tsx @@ -4,16 +4,18 @@ import {type AppBskyGraphDefs} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {useSaveImageToMediaLibrary} from '#/lib/media/save-image' import {shareUrl} from '#/lib/sharing' -import {logEvent} from '#/lib/statsig/statsig' import {getStarterPackOgCard} from '#/lib/strings/starter-pack' +import {logger} from '#/logger' import {isNative, isWeb} from '#/platform/detection' -import {atoms as a, useTheme} from '#/alf' -import {Button, ButtonText} from '#/components/Button' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {type DialogControlProps} from '#/components/Dialog' import * as Dialog from '#/components/Dialog' +import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink' +import {Download_Stroke2_Corner0_Rounded as DownloadIcon} from '#/components/icons/Download' +import {QrCode_Stroke2_Corner0_Rounded as QrCodeIcon} from '#/components/icons/QrCode' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' @@ -27,7 +29,9 @@ interface Props { export function ShareDialog(props: Props) { return ( - + @@ -43,14 +47,14 @@ function ShareDialogInner({ }: Props) { const {_} = useLingui() const t = useTheme() - const {isTabletOrDesktop} = useWebMediaQueries() + const {gtMobile} = useBreakpoints() const imageUrl = getStarterPackOgCard(starterPack) const onShareLink = async () => { if (!link) return shareUrl(link) - logEvent('starterPack:share', { + logger.metric('starterPack:share', { starterPack: starterPack.uri, shareType: 'link', }) @@ -67,12 +71,12 @@ function ShareDialogInner({ <> {!imageLoaded || !link ? ( - + ) : ( - - + + Invite people to this starter pack! @@ -89,8 +93,8 @@ function ShareDialogInner({ a.rounded_sm, { aspectRatio: 1200 / 630, - transform: [{scale: isTabletOrDesktop ? 0.85 : 1}], - marginTop: isTabletOrDesktop ? -20 : 0, + transform: [{scale: gtMobile ? 0.85 : 1}], + marginTop: gtMobile ? -20 : 0, }, ]} accessibilityIgnoresInvertColors={true} @@ -98,30 +102,33 @@ function ShareDialogInner({