Clean up dialogs (#8934)

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 [now] = useState(() => Date.now())
-    const name = profile.displayName || profile.handle
+  const daysOld = useMemo(() => {
-
-    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(() => {
     if (!createdAt) return Infinity
     return differenceInSeconds(now, new Date(createdAt)) / 86400
   }, [createdAt, now])
@@ -77,11 +59,48 @@ export function NewskieDialog({
         )}
       </Button>
 
-      <Dialog.Outer control={control}>
+      <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
         <Dialog.Handle />
+        <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({width: 'auto', maxWidth: 400, minWidth: 200})}>
+      style={web({maxWidth: 400})}>
       <View style={[a.gap_md]}>
         <View style={[a.align_center]}>
           <View
@@ -99,11 +118,7 @@ export function NewskieDialog({
             />
           </View>
           <Text style={[a.font_bold, a.text_xl]}>
-                {isMe ? (
+            {isMe ? <Trans>Welcome, friend!</Trans> : <Trans>Say hello!</Trans>}
-                  <Trans>Welcome, friend!</Trans>
-                ) : (
-                  <Trans>Say hello!</Trans>
-                )}
           </Text>
         </View>
         <Text style={[a.text_md, a.text_center, a.leading_snug]}>
@@ -122,9 +137,7 @@ export function NewskieDialog({
         {profile.joinedViaStarterPack ? (
           <StarterPackCard.Link
             starterPack={profile.joinedViaStarterPack}
-                onPress={() => {
+            onPress={() => control.close()}>
-                  control.close()
-                }}>
             <View
               style={[
                 a.w_full,
@@ -144,7 +157,6 @@ export function NewskieDialog({
         {isNative && (
           <Button
             label={_(msg`Close`)}
-                variant="solid"
             color="secondary"
             size="small"
             style={[a.mt_sm]}
@@ -158,7 +170,5 @@ export function NewskieDialog({
 
       <Dialog.Close />
     </Dialog.ScrollableInner>
-      </Dialog.Outer>
-    </View>
   )
 }

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
-}
+  ref: React.Ref<ViewShot>
-
+}) {
-export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
-  {starterPack, link},
-  ref,
-) {
   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

@@ -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, useBreakpoints} from '#/alf'
-import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {Button, 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(
+          Toast.show(_(msg`An error occurred while saving the QR code!`), {
-            _(msg`An error occurred while saving the QR code!`),
+            type: 'error',
-            'xmark',
+          })
-          )
           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]]}>
+                  style={[
+                    a.w_full,
+                    a.gap_md,
+                    gtMobile && [a.flex_row, a.justify_center, a.flex_wrap],
+                  ]}>
                   <Button
                     label={_(msg`Copy QR code`)}
-                      variant="solid"
+                    color="primary_subtle"
-                      color="secondary"
+                    size="large"
-                      size="small"
                     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`)}
-                      variant="solid"
                     color="secondary"
-                      size="small"
+                    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

@@ -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 {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+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={[!gtMobile && a.gap_lg]}>
-            <View style={[a.gap_sm, isTabletOrDesktop && a.pb_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}],
+                  transform: [{scale: gtMobile ? 0.85 : 1}],
-                  marginTop: isTabletOrDesktop ? -20 : 0,
+                  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="primary_subtle"
-                color="secondary"
+                size="large"
-                size="small"
-                style={[isWeb && a.self_center]}
                 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="primary_subtle"
-                color="secondary"
+                size="large"
-                size="small"
-                style={[isWeb && a.self_center]}
                 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"
+                  size="large"
-                  style={[isWeb && a.self_center]}
                   onPress={onSave}>
+                  <ButtonIcon icon={DownloadIcon} />
                   <ButtonText>
                     <Trans>Save image</Trans>
                   </ButtonText>

src/components/dialogs/EmbedConsent.tsx

@@ -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 '#/components/Typography'
-import {Text} from '../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

@@ -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`)}