Couple of starter packs tweaks (#4604)

4 files changed, 35 insertions, 29 deletions

diff --git a/src/components/StarterPack/QrCodeDialog.tsx b/src/components/StarterPack/QrCodeDialog.tsx
index 580c6cc7c..39eb3076d 100644
--- a/src/components/StarterPack/QrCodeDialog.tsx
+++ b/src/components/StarterPack/QrCodeDialog.tsx
@@ -1,16 +1,14 @@
 import React from 'react'
 import {View} from 'react-native'
 import ViewShot from 'react-native-view-shot'
-import * as FS from 'expo-file-system'
 import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
+import {createAssetAsync} from 'expo-media-library'
 import * as Sharing from 'expo-sharing'
 import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {nanoid} from 'nanoid/non-secure'
 
 import {logger} from '#/logger'
-import {saveImageToMediaLibrary} from 'lib/media/manip'
 import {logEvent} from 'lib/statsig/statsig'
 import {isNative, isWeb} from 'platform/detection'
 import * as Toast from '#/view/com/util/Toast'
@@ -65,13 +63,9 @@ export function QrCodeDialog({
           return
         }
 
-        const filename = `${FS.documentDirectory}/${nanoid(12)}.png`
-
         // Incase of a FS failure, don't crash the app
         try {
-          await FS.copyAsync({from: uri, to: filename})
-          await saveImageToMediaLibrary({uri: filename})
-          await FS.deleteAsync(filename)
+          await createAssetAsync(`file://${uri}`)
         } catch (e: unknown) {
           Toast.show(_(msg`An error occurred while saving the QR code!`))
           logger.error('Failed to save QR code', {error: e})
diff --git a/src/components/StarterPack/ShareDialog.tsx b/src/components/StarterPack/ShareDialog.tsx
index 23fa10fb3..61e238081 100644
--- a/src/components/StarterPack/ShareDialog.tsx
+++ b/src/components/StarterPack/ShareDialog.tsx
@@ -1,12 +1,10 @@
 import React from 'react'
 import {View} from 'react-native'
-import * as FS from 'expo-file-system'
 import {Image} from 'expo-image'
 import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
 import {AppBskyGraphDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {nanoid} from 'nanoid/non-secure'
 
 import {logger} from '#/logger'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
@@ -72,19 +70,8 @@ function ShareDialogInner({
       return
     }
 
-    const cachePath = await Image.getCachePathAsync(imageUrl)
-    const filename = `${FS.documentDirectory}/${nanoid(12)}.png`
-
-    if (!cachePath) {
-      Toast.show(_(msg`An error occurred while saving the image.`))
-      return
-    }
-
     try {
-      await FS.copyAsync({from: cachePath, to: filename})
-      await saveImageToMediaLibrary({uri: filename})
-      await FS.deleteAsync(filename)
-
+      await saveImageToMediaLibrary({uri: imageUrl})
       Toast.show(_(msg`Image saved to your camera roll!`))
       control.close()
     } catch (e: unknown) {
@@ -133,18 +120,18 @@ function ShareDialogInner({
                 isWeb && [a.gap_sm, a.flex_row_reverse, {marginLeft: 'auto'}],
               ]}>
               <Button
-                label="Share link"
+                label={isWeb ? _(msg`Copy link`) : _(msg`Share link`)}
                 variant="solid"
                 color="secondary"
                 size="small"
                 style={[isWeb && a.self_center]}
                 onPress={onShareLink}>
                 <ButtonText>
-                  {isWeb ? <Trans>Copy Link</Trans> : <Trans>Share Link</Trans>}
+                  {isWeb ? <Trans>Copy Link</Trans> : <Trans>Share link</Trans>}
                 </ButtonText>
               </Button>
               <Button
-                label="Create QR code"
+                label={_(msg`Share QR code`)}
                 variant="solid"
                 color="secondary"
                 size="small"
@@ -155,7 +142,7 @@ function ShareDialogInner({
                   })
                 }}>
                 <ButtonText>
-                  <Trans>Create QR code</Trans>
+                  <Trans>Share QR code</Trans>
                 </ButtonText>
               </Button>
               {isNative && (
diff --git a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
index bf250ac35..cf755e1bc 100644
--- a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+++ b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
@@ -58,6 +58,7 @@ export function WizardEditListDialog({
     state.currentStep === 'Profiles' ? (
       <WizardProfileCard
         profile={item}
+        btnType="remove"
         state={state}
         dispatch={dispatch}
         moderationOpts={moderationOpts}
@@ -65,6 +66,7 @@ export function WizardEditListDialog({
     ) : (
       <WizardFeedCard
         generator={item}
+        btnType="remove"
         state={state}
         dispatch={dispatch}
         moderationOpts={moderationOpts}
diff --git a/src/components/StarterPack/Wizard/WizardListCard.tsx b/src/components/StarterPack/Wizard/WizardListCard.tsx
index f1332011d..aa1b2cf9b 100644
--- a/src/components/StarterPack/Wizard/WizardListCard.tsx
+++ b/src/components/StarterPack/Wizard/WizardListCard.tsx
@@ -9,7 +9,7 @@ import {
   ModerationUI,
 } from '@atproto/api'
 import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
-import {msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {DISCOVER_FEED_URI} from 'lib/constants'
@@ -19,12 +19,14 @@ import {useSession} from 'state/session'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
 import * as Toggle from '#/components/forms/Toggle'
 import {Checkbox} from '#/components/forms/Toggle'
 import {Text} from '#/components/Typography'
 
 function WizardListCard({
   type,
+  btnType,
   displayName,
   subtitle,
   onPress,
@@ -34,6 +36,7 @@ function WizardListCard({
   moderationUi,
 }: {
   type: 'user' | 'algo'
+  btnType: 'checkbox' | 'remove'
   profile?: AppBskyActorDefs.ProfileViewBasic
   feed?: AppBskyFeedDefs.GeneratorView
   displayName: string
@@ -56,7 +59,7 @@ function WizardListCard({
           : _(msg`Add ${displayName} to starter pack`)
       }
       value={included}
-      disabled={disabled}
+      disabled={btnType === 'remove' || disabled}
       onChange={onPress}
       style={[
         a.flex_row,
@@ -85,17 +88,33 @@ function WizardListCard({
           {subtitle}
         </Text>
       </View>
-      <Checkbox />
+      {btnType === 'checkbox' ? (
+        <Checkbox />
+      ) : !disabled ? (
+        <Button
+          label={_(msg`Remove`)}
+          variant="solid"
+          color="secondary"
+          size="xsmall"
+          style={[a.self_center, {marginLeft: 'auto'}]}
+          onPress={onPress}>
+          <ButtonText>
+            <Trans>Remove</Trans>
+          </ButtonText>
+        </Button>
+      ) : null}
     </Toggle.Item>
   )
 }
 
 export function WizardProfileCard({
+  btnType,
   state,
   dispatch,
   profile,
   moderationOpts,
 }: {
+  btnType: 'checkbox' | 'remove'
   state: WizardState
   dispatch: (action: WizardAction) => void
   profile: AppBskyActorDefs.ProfileViewBasic
@@ -127,6 +146,7 @@ export function WizardProfileCard({
   return (
     <WizardListCard
       type="user"
+      btnType={btnType}
       displayName={displayName}
       subtitle={`@${sanitizeHandle(profile.handle)}`}
       onPress={onPress}
@@ -139,11 +159,13 @@ export function WizardProfileCard({
 }
 
 export function WizardFeedCard({
+  btnType,
   generator,
   state,
   dispatch,
   moderationOpts,
 }: {
+  btnType: 'checkbox' | 'remove'
   generator: GeneratorView
   state: WizardState
   dispatch: (action: WizardAction) => void
@@ -170,6 +192,7 @@ export function WizardFeedCard({
   return (
     <WizardListCard
       type="algo"
+      btnType={btnType}
       displayName={sanitizeDisplayName(generator.displayName)}
       subtitle={`Feed by @${sanitizeHandle(generator.creator.handle)}`}
       onPress={onPress}