[🏁 #4] Starter packs tab on profile (#4331)

* add a tab for starter packs

* replace with new card

* add icon to card

* rm log

* adjust padding

* add link wrapper

* fix params

* full width

* add QR code icon

src/screens/StarterPack/Main/index.tsx

@@ -8,11 +8,15 @@ import {CommonNavigatorParams} from 'lib/routes/types'
 import {isWeb} from 'platform/detection'
 import {PagerWithHeader} from 'view/com/pager/PagerWithHeader'
 import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader'
+import {EventStopper} from 'view/com/util/EventStopper'
 import {CenteredView} from 'view/com/util/Views'
 import {FeedsList} from '#/screens/StarterPack/Main/FeedsList'
 import {ProfilesList} from '#/screens/StarterPack/Main/ProfilesList'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
+import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox'
+import {QrCode_Stroke2_Corner0_Rounded as QrCode} from '#/components/icons/QrCode'
+import * as Menu from '#/components/Menu'
 
 /**
  * TEMPORARY CONTENT, DO NOT TRANSLATE
@@ -96,7 +100,7 @@ export function StarterPackScreen({}: NativeStackScreenProps<
   // const {id} = route.params
 
   return (
-    <CenteredView style={a.flex_1}>
+    <CenteredView style={[a.h_full_vh]}>
       <StarterPackScreenInner />
     </CenteredView>
   )
@@ -148,16 +152,48 @@ function Header({isOwn}: {isOwn: boolean}) {
         creator={undefined}
         avatarType="starter-pack">
         <View style={[a.flex_row, a.gap_sm]}>
-          <Button
-            label={_(msg`Share`)}
-            variant="solid"
-            color="primary"
-            size="small"
-            onPress={() => {}}>
-            <ButtonText>
-              <Trans>Share</Trans>
-            </ButtonText>
-          </Button>
+          <EventStopper onKeyDown={false}>
+            <Menu.Root>
+              <Menu.Trigger label={_(msg`Repost or quote post`)}>
+                {({props}) => {
+                  return (
+                    <Button
+                      label={_(msg`Share`)}
+                      variant="solid"
+                      color="primary"
+                      size="small"
+                      {...props}>
+                      <ButtonText>
+                        <Trans>Share</Trans>
+                      </ButtonText>
+                    </Button>
+                  )
+                }}
+              </Menu.Trigger>
+              <Menu.Outer style={{minWidth: 170}}>
+                <Menu.Group>
+                  <Menu.Item
+                    label={_(msg`Share link`)}
+                    testID="shareStarterPackLinkBtn"
+                    onPress={() => {}}>
+                    <Menu.ItemText>
+                      <Trans>Share link</Trans>
+                    </Menu.ItemText>
+                    <Menu.ItemIcon icon={ArrowOutOfBox} position="right" />
+                  </Menu.Item>
+                  <Menu.Item
+                    label={_(msg`Create QR code`)}
+                    testID="createQRCodeBtn"
+                    onPress={() => {}}>
+                    <Menu.ItemText>
+                      <Trans>Create QR code</Trans>
+                    </Menu.ItemText>
+                    <Menu.ItemIcon icon={QrCode} position="right" />
+                  </Menu.Item>
+                </Menu.Group>
+              </Menu.Outer>
+            </Menu.Root>
+          </EventStopper>
           {isOwn && (
             <Button
               label={_(msg`Edit`)}