[Onboarding] Add starterpacks step (#9007)

* add onboarding starterpacks step

* tweak starter pack cards

* fix web styling

* use new API

* add screen transitions to onboarding

* skip host account

* bump limit to 6

* tweak font weight

* rm commented out code

* fix yarn.lock

* limit starter packs experiment to english speakers

src/state/queries/useOnboardingSuggestedStarterPacksQuery.ts

@@ -0,0 +1,49 @@
+import {useQuery} from '@tanstack/react-query'
+
+import {
+  aggregateUserInterests,
+  createBskyTopicsHeader,
+} from '#/lib/api/feed/utils'
+import {getContentLanguages} from '#/state/preferences/languages'
+import {STALE} from '#/state/queries'
+import {usePreferencesQuery} from '#/state/queries/preferences'
+import {useAgent} from '#/state/session'
+
+export const createOnboardingSuggestedStarterPacksQueryKey = (
+  interests?: string[],
+) => ['onboarding-suggested-starter-packs', interests?.join(',')]
+
+export function useOnboardingSuggestedStarterPacksQuery({
+  enabled,
+  overrideInterests,
+}: {
+  enabled?: boolean
+  overrideInterests?: string[]
+}) {
+  const agent = useAgent()
+  const {data: preferences} = usePreferencesQuery()
+  const contentLangs = getContentLanguages().join(',')
+
+  return useQuery({
+    enabled: !!preferences && enabled !== false,
+    staleTime: STALE.MINUTES.THREE,
+    queryKey: createOnboardingSuggestedStarterPacksQueryKey(overrideInterests),
+    queryFn: async () => {
+      const {data} =
+        await agent.app.bsky.unspecced.getOnboardingSuggestedStarterPacks(
+          {limit: 6},
+          {
+            headers: {
+              ...createBskyTopicsHeader(
+                overrideInterests
+                  ? overrideInterests.join(',')
+                  : aggregateUserInterests(preferences),
+              ),
+              'Accept-Language': contentLangs,
+            },
+          },
+        )
+      return data
+    },
+  })
+}

src/state/queries/useSuggestedStarterPacksQuery.ts

@@ -9,11 +9,18 @@ import {STALE} from '#/state/queries'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {useAgent} from '#/state/session'
 
-export const createSuggestedStarterPacksQueryKey = () => [
+export const createSuggestedStarterPacksQueryKey = (interests?: string[]) => [
   'suggested-starter-packs',
+  interests?.join(','),
 ]
 
-export function useSuggestedStarterPacksQuery({enabled}: {enabled?: boolean}) {
+export function useSuggestedStarterPacksQuery({
+  enabled,
+  overrideInterests,
+}: {
+  enabled?: boolean
+  overrideInterests?: string[]
+}) {
   const agent = useAgent()
   const {data: preferences} = usePreferencesQuery()
   const contentLangs = getContentLanguages().join(',')
@@ -21,13 +28,17 @@ export function useSuggestedStarterPacksQuery({enabled}: {enabled?: boolean}) {
   return useQuery({
     enabled: !!preferences && enabled !== false,
     staleTime: STALE.MINUTES.THREE,
-    queryKey: createSuggestedStarterPacksQueryKey(),
-    async queryFn() {
+    queryKey: createSuggestedStarterPacksQueryKey(overrideInterests),
+    queryFn: async () => {
       const {data} = await agent.app.bsky.unspecced.getSuggestedStarterPacks(
         undefined,
         {
           headers: {
-            ...createBskyTopicsHeader(aggregateUserInterests(preferences)),
+            ...createBskyTopicsHeader(
+              overrideInterests
+                ? overrideInterests.join(',')
+                : aggregateUserInterests(preferences),
+            ),
             'Accept-Language': contentLangs,
           },
         },