UI tweaks and nits for starter packs (#4548)

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
Co-authored-by: Paul Frazee <pfrazee@gmail.com>
Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
fix truncation on native (#4575)

src/components/StarterPack/QrCodeDialog.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import {View} from 'react-native'
 import ViewShot from 'react-native-view-shot'
-import {setImageAsync} from 'expo-clipboard'
 import * as FS from 'expo-file-system'
 import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
+import * as Sharing from 'expo-sharing'
 import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -12,14 +12,14 @@ import {nanoid} from 'nanoid/non-secure'
 import {logger} from '#/logger'
 import {saveImageToMediaLibrary} from 'lib/media/manip'
 import {logEvent} from 'lib/statsig/statsig'
-import {isNative} from 'platform/detection'
+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 * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
+import {Loader} from '#/components/Loader'
 import {QrCode} from '#/components/StarterPack/QrCode'
-import {Text} from '#/components/Typography'
 
 export function QrCodeDialog({
   control,
@@ -29,6 +29,7 @@ export function QrCodeDialog({
   starterPack: AppBskyGraphDefs.StarterPackView
 }) {
   const {_} = useLingui()
+  const [isProcessing, setIsProcessing] = React.useState(false)
 
   const ref = React.useRef<ViewShot>(null)
 
@@ -75,6 +76,8 @@ export function QrCodeDialog({
           return
         }
       } else {
+        setIsProcessing(true)
+
         if (!AppBskyGraphStarterpack.isRecord(starterPack.record)) {
           return
         }
@@ -98,24 +101,25 @@ export function QrCodeDialog({
         shareType: 'qrcode',
         qrShareType: 'save',
       })
-      Toast.show(_(msg`QR code saved to your camera roll!`))
+      setIsProcessing(false)
+      Toast.show(
+        isWeb
+          ? _(msg`QR code has been downloaded!`)
+          : _(msg`QR code saved to your camera roll!`),
+      )
       control.close()
     })
   }
 
   const onCopyPress = async () => {
+    setIsProcessing(true)
     ref.current?.capture?.().then(async (uri: string) => {
-      if (isNative) {
-        const base64 = await FS.readAsStringAsync(uri, {encoding: 'base64'})
-        await setImageAsync(base64)
-      } else {
-        const canvas = await getCanvas(uri)
-        // @ts-expect-error web only
-        canvas.toBlob((blob: Blob) => {
-          const item = new ClipboardItem({'image/png': blob})
-          navigator.clipboard.write([item])
-        })
-      }
+      const canvas = await getCanvas(uri)
+      // @ts-expect-error web only
+      canvas.toBlob((blob: Blob) => {
+        const item = new ClipboardItem({'image/png': blob})
+        navigator.clipboard.write([item])
+      })
 
       logEvent('starterPack:share', {
         starterPack: starterPack.uri,
@@ -123,42 +127,62 @@ export function QrCodeDialog({
         qrShareType: 'copy',
       })
       Toast.show(_(msg`QR code copied to your clipboard!`))
+      setIsProcessing(false)
       control.close()
     })
   }
 
+  const onSharePress = async () => {
+    ref.current?.capture?.().then(async (uri: string) => {
+      control.close(() => {
+        Sharing.shareAsync(uri, {mimeType: 'image/png', UTI: 'image/png'}).then(
+          () => {
+            logEvent('starterPack:share', {
+              starterPack: starterPack.uri,
+              shareType: 'qrcode',
+              qrShareType: 'share',
+            })
+          },
+        )
+      })
+    })
+  }
+
   return (
     <Dialog.Outer control={control}>
       <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]}>
-          <Text style={[a.font_bold, a.text_xl, a.text_center]}>
-            Share this starter pack with friends!
-          </Text>
           <QrCode starterPack={starterPack} ref={ref} />
-          <View style={[a.flex_row, a.gap_md]}>
-            <Button
-              label={_(msg`Save QR code`)}
-              variant="solid"
-              color="primary"
-              size="medium"
-              onPress={onSavePress}>
-              <ButtonText>
-                <Trans>Save</Trans>
-              </ButtonText>
-            </Button>
-            <Button
-              label={_(msg`Copy QR code`)}
-              variant="solid"
-              color="primary"
-              size="medium"
-              onPress={onCopyPress}>
-              <ButtonText>
-                <Trans>Copy</Trans>
-              </ButtonText>
-            </Button>
-          </View>
+          {isProcessing ? (
+            <View>
+              <Loader size="xl" />
+            </View>
+          ) : (
+            <View style={[a.w_full, a.gap_md]}>
+              <Button
+                label={_(msg`Copy QR code`)}
+                variant="solid"
+                color="primary"
+                size="medium"
+                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="medium"
+                onPress={onSavePress}>
+                <ButtonText>
+                  <Trans>Save</Trans>
+                </ButtonText>
+              </Button>
+            </View>
+          )}
         </View>
       </Dialog.ScrollableInner>
     </Dialog.Outer>