acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Clean up dialogs (#8934)

Browse Source
This commit is contained in:
Samuel Newman
2025-09-09 18:45:36 +03:00
committed by GitHub
parent 7574a745d1
commit 4a1b1f17f4
6 changed files with 222 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/NewskieDialog.tsx
+111 -101
View File
@@ -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({
)}
</Button>
<Dialog.Outer control={control}>
<Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
<Dialog.Handle />
<Dialog.ScrollableInner
label={_(msg`New user info dialog`)}
style={web({width: 'auto', maxWidth: 400, minWidth: 200})}>
<View style={[a.gap_md]}>
<View style={[a.align_center]}>
<View
style={[
{
height: 60,
width: 64,
},
]}>
<Newskie
width={64}
height={64}
fill="#FFC404"
style={[a.absolute, a.inset_0]}
/>
</View>
<Text style={[a.font_bold, a.text_xl]}>
{isMe ? (
<Trans>Welcome, friend!</Trans>
) : (
<Trans>Say hello!</Trans>
)}
</Text>
</View>
<Text style={[a.text_md, a.text_center, a.leading_snug]}>
{profile.joinedViaStarterPack ? (
<Trans>
{profileName} joined Bluesky using a starter pack{' '}
{timeAgo(createdAt, now, {format: 'long'})} ago
</Trans>
) : (
<Trans>
{profileName} joined Bluesky{' '}
{timeAgo(createdAt, now, {format: 'long'})} ago
</Trans>
)}
</Text>
{profile.joinedViaStarterPack ? (
<StarterPackCard.Link
starterPack={profile.joinedViaStarterPack}
onPress={() => {
control.close()
}}>
<View
style={[
a.w_full,
a.mt_sm,
a.p_lg,
a.border,
a.rounded_sm,
t.atoms.border_contrast_low,
]}>
<StarterPackCard.Card
starterPack={profile.joinedViaStarterPack}
/>
</View>
</StarterPackCard.Link>
) : null}
{isNative && (
<Button
label={_(msg`Close`)}
variant="solid"
color="secondary"
size="small"
style={[a.mt_sm]}
onPress={() => control.close()}>
<ButtonText>
<Trans>Close</Trans>
</ButtonText>
</Button>
)}
</View>
<Dialog.Close />
</Dialog.ScrollableInner>
<DialogInner profile={profile} createdAt={createdAt} now={now} />
</Dialog.Outer>
</View>
)
}
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 (
<Dialog.ScrollableInner
label={_(msg`New user info dialog`)}
style={web({maxWidth: 400})}>
<View style={[a.gap_md]}>
<View style={[a.align_center]}>
<View
style={[
{
height: 60,
width: 64,
},
]}>
<Newskie
width={64}
height={64}
fill="#FFC404"
style={[a.absolute, a.inset_0]}
/>
</View>
<Text style={[a.font_bold, a.text_xl]}>
{isMe ? <Trans>Welcome, friend!</Trans> : <Trans>Say hello!</Trans>}
</Text>
</View>
<Text style={[a.text_md, a.text_center, a.leading_snug]}>
{profile.joinedViaStarterPack ? (
<Trans>
{profileName} joined Bluesky using a starter pack{' '}
{timeAgo(createdAt, now, {format: 'long'})} ago
</Trans>
) : (
<Trans>
{profileName} joined Bluesky{' '}
{timeAgo(createdAt, now, {format: 'long'})} ago
</Trans>
)}
</Text>
{profile.joinedViaStarterPack ? (
<StarterPackCard.Link
starterPack={profile.joinedViaStarterPack}
onPress={() => control.close()}>
<View
style={[
a.w_full,
a.mt_sm,
a.p_lg,
a.border,
a.rounded_sm,
t.atoms.border_contrast_low,
]}>
<StarterPackCard.Card
starterPack={profile.joinedViaStarterPack}
/>
</View>
</StarterPackCard.Link>
) : null}
{isNative && (
<Button
label={_(msg`Close`)}
color="secondary"
size="small"
style={[a.mt_sm]}
onPress={() => control.close()}>
<ButtonText>
<Trans>Close</Trans>
</ButtonText>
</Button>
)}
</View>
<Dialog.Close />
</Dialog.ScrollableInner>
)
}
src/components/StarterPack/QrCode.tsx
+10 -10
View File
@@ -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<ViewShot, Props>(function QrCode(
{starterPack, link},
ref,
) {
ref: React.Ref<ViewShot>
}) {
const {record} = starterPack
if (
@@ -93,7 +93,7 @@ export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
</LinearGradientBackground>
</LazyViewShot>
)
})
}
export function QrCodeInner({link}: {link: string}) {
const t = useTheme()
src/components/StarterPack/QrCodeDialog.tsx
+62 -51
View File
@@ -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<ViewShot>(null)
const ref = useRef<ViewShot>(null)
const getCanvas = (base64: string): Promise<HTMLCanvasElement> => {
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 (
<Dialog.Outer control={control}>
<Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
<Dialog.Handle />
<Dialog.ScrollableInner
label={_(msg`Create a QR code for a starter pack`)}>
<View style={[a.flex_1, a.align_center, a.gap_5xl]}>
<React.Suspense fallback={<Loading />}>
<Suspense fallback={<Loading />}>
{!link ? (
<Loading />
) : (
<>
<QrCode starterPack={starterPack} link={link} ref={ref} />
{isProcessing ? (
<View>
<Loader size="xl" />
</View>
) : (
<View
style={[a.w_full, a.gap_md, isWeb && [a.flex_row_reverse]]}>
<Button
label={_(msg`Copy QR code`)}
variant="solid"
color="secondary"
size="small"
onPress={isWeb ? onCopyPress : onSharePress}>
<ButtonText>
{isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
</ButtonText>
</Button>
<Button
label={_(msg`Save QR code`)}
variant="solid"
color="secondary"
size="small"
onPress={onSavePress}>
<ButtonText>
<Trans>Save</Trans>
</ButtonText>
</Button>
</View>
)}
<View
style={[
a.w_full,
a.gap_md,
gtMobile && [a.flex_row, a.justify_center, a.flex_wrap],
]}>
<Button
label={_(msg`Copy QR code`)}
color="primary_subtle"
size="large"
onPress={isWeb ? onCopyPress : onSharePress}>
<ButtonIcon
icon={
isCopyProcessing
? Loader
: isWeb
? ChainLinkIcon
: ShareIcon
}
/>
<ButtonText>
{isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
</ButtonText>
</Button>
<Button
label={_(msg`Save QR code`)}
color="secondary"
size="large"
onPress={onSavePress}>
<ButtonIcon
icon={isSaveProcessing ? Loader : FloppyDiskIcon}
/>
<ButtonText>
<Trans>Save</Trans>
</ButtonText>
</Button>
</View>
</>
)}
</React.Suspense>
</Suspense>
</View>
<Dialog.Close />
</Dialog.ScrollableInner>
@@ -206,7 +217,7 @@ export function QrCodeDialog({
function Loading() {
return (
<View style={[a.align_center, a.p_xl]}>
<View style={[a.align_center, a.justify_center, {minHeight: 400}]}>
<Loader size="xl" />
</View>
)
src/components/StarterPack/ShareDialog.tsx
+30 -24
View File
@@ -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 (
<Dialog.Outer control={props.control}>
<Dialog.Outer
control={props.control}
nativeOptions={{preventExpansion: true}}>
<Dialog.Handle />
<ShareDialogInner {...props} />
</Dialog.Outer>
@@ -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({
<>
<Dialog.ScrollableInner label={_(msg`Share link dialog`)}>
{!imageLoaded || !link ? (
<View style={[a.p_xl, a.align_center]}>
<View style={[a.align_center, a.justify_center, {minHeight: 350}]}>
<Loader size="xl" />
</View>
) : (
<View style={[!isTabletOrDesktop && a.gap_lg]}>
<View style={[a.gap_sm, isTabletOrDesktop && a.pb_lg]}>
<View style={[!gtMobile && a.gap_lg]}>
<View style={[a.gap_sm, gtMobile && a.pb_lg]}>
<Text style={[a.font_bold, a.text_2xl]}>
<Trans>Invite people to this starter pack!</Trans>
</Text>
@@ -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({
<View
style={[
a.gap_md,
isWeb && [a.gap_sm, a.flex_row_reverse, {marginLeft: 'auto'}],
gtMobile && [
a.gap_sm,
a.justify_center,
a.flex_row,
a.flex_wrap,
],
]}>
<Button
label={isWeb ? _(msg`Copy link`) : _(msg`Share link`)}
variant="solid"
color="secondary"
size="small"
style={[isWeb && a.self_center]}
color="primary_subtle"
size="large"
onPress={onShareLink}>
<ButtonIcon icon={ChainLinkIcon} />
<ButtonText>
{isWeb ? <Trans>Copy Link</Trans> : <Trans>Share link</Trans>}
</ButtonText>
</Button>
<Button
label={_(msg`Share QR code`)}
variant="solid"
color="secondary"
size="small"
style={[isWeb && a.self_center]}
color="primary_subtle"
size="large"
onPress={() => {
control.close(() => {
qrDialogControl.open()
})
}}>
<ButtonIcon icon={QrCodeIcon} />
<ButtonText>
<Trans>Share QR code</Trans>
</ButtonText>
@@ -129,11 +136,10 @@ function ShareDialogInner({
{isNative && (
<Button
label={_(msg`Save image`)}
variant="ghost"
color="secondary"
size="small"
style={[isWeb && a.self_center]}
size="large"
onPress={onSave}>
<ButtonIcon icon={DownloadIcon} />
<ButtonText>
<Trans>Save image</Trans>
</ButtonText>
src/components/dialogs/EmbedConsent.tsx
+3 -3
View File
@@ -10,9 +10,9 @@ import {
} from '#/lib/strings/embed-player'
import {useSetExternalEmbedPref} from '#/state/preferences'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {Button, ButtonText} from '../Button'
import {Text} from '../Typography'
import {Text} from '#/components/Typography'
export function EmbedConsentDialog({
control,
@@ -48,7 +48,7 @@ export function EmbedConsentDialog({
}, [control, setExternalEmbedPref, source])
return (
<Dialog.Outer control={control}>
<Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
<Dialog.Handle />
<Dialog.ScrollableInner
label={_(msg`External Media`)}
src/screens/Settings/components/ExportCarDialog.tsx
+6 -7
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback, useState} from 'react'
import {View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@@ -18,14 +18,14 @@ import {Text} from '#/components/Typography'
export function ExportCarDialog({
control,
}: {
control: Dialog.DialogOuterProps['control']
control: Dialog.DialogControlProps
}) {
const {_} = useLingui()
const t = useTheme()
const agent = useAgent()
const [loading, setLoading] = React.useState(false)
const [loading, setLoading] = useState(false)
const download = React.useCallback(async () => {
const download = useCallback(async () => {
if (!agent.session) {
return // shouldnt ever happen
}
@@ -52,7 +52,7 @@ export function ExportCarDialog({
}, [_, control, agent])
return (
<Dialog.Outer control={control}>
<Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
<Dialog.Handle />
<Dialog.ScrollableInner
accessibilityDescribedBy="dialog-description"
@@ -63,7 +63,7 @@ export function ExportCarDialog({
</Text>
<Text
nativeID="dialog-description"
style={[a.text_sm, a.leading_normal, t.atoms.text_contrast_high]}>
style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_high]}>
<Trans>
Your account repository, containing all public data records, can
be downloaded as a "CAR" file. This file does not include media
@@ -73,7 +73,6 @@ export function ExportCarDialog({
</Text>
<Button
variant="solid"
color="primary"
size="large"
label={_(msg`Download CAR file`)}