2 files changed, 107 insertions, 10 deletions
diff --git a/src/screens/StarterPack/StarterPackLandingScreen.tsx b/src/screens/StarterPack/StarterPackLandingScreen.tsx
index df13885e8..12420333d 100644
--- a/src/screens/StarterPack/StarterPackLandingScreen.tsx
+++ b/src/screens/StarterPack/StarterPackLandingScreen.tsx
@@ -31,6 +31,7 @@ import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import * as FeedCard from '#/components/FeedCard'
+import {ChevronLeft_Stroke2_Corner0_Rounded} from '#/components/icons/Chevron'
 import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {ListMaybePlaceholder} from '#/components/Lists'
 import {Default as ProfileCard} from '#/components/ProfileCard'
@@ -58,7 +59,11 @@ export function LandingScreen({
   const moderationOpts = useModerationOpts()
   const activeStarterPack = useActiveStarterPack()
 
-  const {data: starterPack, isError: isErrorStarterPack} = useStarterPackQuery({
+  const {
+    data: starterPack,
+    isError: isErrorStarterPack,
+    isFetching,
+  } = useStarterPackQuery({
     uri: activeStarterPack?.uri,
   })
 
@@ -74,7 +79,7 @@ export function LandingScreen({
     }
   }, [isErrorStarterPack, setScreenState, isValid, starterPack])
 
-  if (!starterPack || !isValid || !moderationOpts) {
+  if (isFetching || !starterPack || !isValid || !moderationOpts) {
     return <ListMaybePlaceholder isLoading={true} />
   }
 
@@ -112,9 +117,6 @@ function LandingScreenLoaded({
   const listItemsCount = starterPack.list?.listItemCount ?? 0
 
   const onContinue = () => {
-    setActiveStarterPack({
-      uri: starterPack.uri,
-    })
     setScreenState(LoggedOutScreenState.S_CreateAccount)
   }
 
@@ -166,6 +168,31 @@ function LandingScreenLoaded({
               paddingTop: 100,
             },
           ]}>
+          <Pressable
+            style={[
+              a.absolute,
+              a.rounded_full,
+              a.align_center,
+              a.justify_center,
+              {
+                top: 10,
+                left: 10,
+                height: 35,
+                width: 35,
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+              },
+            ]}
+            onPress={() => {
+              setActiveStarterPack(undefined)
+            }}
+            accessibilityLabel={_(msg`Back`)}
+            accessibilityHint={_(msg`Go back to previous screen`)}>
+            <ChevronLeft_Stroke2_Corner0_Rounded
+              width={20}
+              height={20}
+              fill="white"
+            />
+          </Pressable>
           <View style={[a.flex_row, a.gap_md, a.pb_sm]}>
             <Logo width={76} fill="white" />
           </View>
diff --git a/src/screens/StarterPack/StarterPackScreen.tsx b/src/screens/StarterPack/StarterPackScreen.tsx
index aa0e75a23..679b3f2cb 100644
--- a/src/screens/StarterPack/StarterPackScreen.tsx
+++ b/src/screens/StarterPack/StarterPackScreen.tsx
@@ -28,15 +28,20 @@ import {HITSLOP_20} from 'lib/constants'
 import {makeProfileLink, makeStarterPackLink} from 'lib/routes/links'
 import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
 import {logEvent} from 'lib/statsig/statsig'
-import {getStarterPackOgCard} from 'lib/strings/starter-pack'
+import {
+  createStarterPackUri,
+  getStarterPackOgCard,
+} from 'lib/strings/starter-pack'
 import {isWeb} from 'platform/detection'
 import {updateProfileShadow} from 'state/cache/profile-shadow'
 import {useModerationOpts} from 'state/preferences/moderation-opts'
 import {useListMembersQuery} from 'state/queries/list-members'
+import {useResolvedStarterPackShortLink} from 'state/queries/resolve-short-link'
 import {useResolveDidQuery} from 'state/queries/resolve-uri'
 import {useShortenLink} from 'state/queries/shorten-link'
 import {useStarterPackQuery} from 'state/queries/starter-packs'
 import {useAgent, useSession} from 'state/session'
+import {useSetActiveStarterPack} from 'state/shell/starter-pack'
 import * as Toast from '#/view/com/util/Toast'
 import {PagerWithHeader} from 'view/com/pager/PagerWithHeader'
 import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader'
@@ -67,12 +72,77 @@ type StarterPackScreeProps = NativeStackScreenProps<
   CommonNavigatorParams,
   'StarterPack'
 >
+type StarterPackScreenShortProps = NativeStackScreenProps<
+  CommonNavigatorParams,
+  'StarterPackShort'
+>
 
 export function StarterPackScreen({route}: StarterPackScreeProps) {
+  return <StarterPackAuthCheck routeParams={route.params} />
+}
+
+export function StarterPackScreenShort({route}: StarterPackScreenShortProps) {
+  const {_} = useLingui()
+  const {
+    data: resolvedStarterPack,
+    isLoading,
+    isError,
+  } = useResolvedStarterPackShortLink({
+    code: route.params.code,
+  })
+
+  if (isLoading || isError || !resolvedStarterPack) {
+    return (
+      <ListMaybePlaceholder
+        isLoading={isLoading}
+        isError={isError}
+        errorMessage={_(msg`That starter pack could not be found.`)}
+        emptyMessage={_(msg`That starter pack could not be found.`)}
+      />
+    )
+  }
+  return <StarterPackAuthCheck routeParams={resolvedStarterPack} />
+}
+
+export function StarterPackAuthCheck({
+  routeParams,
+}: {
+  routeParams: StarterPackScreeProps['route']['params']
+}) {
+  const navigation = useNavigation<NavigationProp>()
+  const setActiveStarterPack = useSetActiveStarterPack()
+  const {currentAccount} = useSession()
+
+  React.useEffect(() => {
+    if (currentAccount) return
+
+    const uri = createStarterPackUri({
+      did: routeParams.name,
+      rkey: routeParams.rkey,
+    })
+
+    if (!uri) return
+    setActiveStarterPack({
+      uri,
+    })
+
+    navigation.goBack()
+  }, [routeParams, currentAccount, navigation, setActiveStarterPack])
+
+  if (!currentAccount) return null
+
+  return <StarterPackScreenInner routeParams={routeParams} />
+}
+
+export function StarterPackScreenInner({
+  routeParams,
+}: {
+  routeParams: StarterPackScreeProps['route']['params']
+}) {
+  const {name, rkey} = routeParams
   const {_} = useLingui()
   const {currentAccount} = useSession()
 
-  const {name, rkey} = route.params
   const moderationOpts = useModerationOpts()
   const {
     data: did,
@@ -113,16 +183,16 @@ export function StarterPackScreen({route}: StarterPackScreeProps) {
   }
 
   return (
-    <StarterPackScreenInner
+    <StarterPackScreenLoaded
       starterPack={starterPack}
-      routeParams={route.params}
+      routeParams={routeParams}
       listMembersQuery={listMembersQuery}
       moderationOpts={moderationOpts}
     />
   )
 }
 
-function StarterPackScreenInner({
+function StarterPackScreenLoaded({
   starterPack,
   routeParams,
   listMembersQuery,