Add KnownFollowers component to standard profile header (#4420)

* Add KnownFollowers component to standard profile header

* Prep for known followers screen

* Add known followers screen

* Tighten space

* Add pressed state

* Edit title

* Vertically center

* Don't show if no known followers

* Bump sdk

* Use actual followers.length to show

* Updates to show logic, space

* Prevent fresh data from applying to cached screens

* Tighten space

* Better label

* Oxford comma

* Fix count logic

* Add bskyweb route

* Useless ternary

* Minor spacing tweak

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 34 insertions, 0 deletions

diff --git a/src/state/queries/known-followers.ts b/src/state/queries/known-followers.ts
new file mode 100644
index 000000000..adcbf4b50
--- /dev/null
+++ b/src/state/queries/known-followers.ts
@@ -0,0 +1,34 @@
+import {AppBskyGraphGetKnownFollowers} from '@atproto/api'
+import {InfiniteData, QueryKey, useInfiniteQuery} from '@tanstack/react-query'
+
+import {useAgent} from '#/state/session'
+
+const PAGE_SIZE = 50
+type RQPageParam = string | undefined
+
+const RQKEY_ROOT = 'profile-known-followers'
+export const RQKEY = (did: string) => [RQKEY_ROOT, did]
+
+export function useProfileKnownFollowersQuery(did: string | undefined) {
+  const agent = useAgent()
+  return useInfiniteQuery<
+    AppBskyGraphGetKnownFollowers.OutputSchema,
+    Error,
+    InfiniteData<AppBskyGraphGetKnownFollowers.OutputSchema>,
+    QueryKey,
+    RQPageParam
+  >({
+    queryKey: RQKEY(did || ''),
+    async queryFn({pageParam}: {pageParam: RQPageParam}) {
+      const res = await agent.app.bsky.graph.getKnownFollowers({
+        actor: did!,
+        limit: PAGE_SIZE,
+        cursor: pageParam,
+      })
+      return res.data
+    },
+    initialPageParam: undefined,
+    getNextPageParam: lastPage => lastPage.cursor,
+    enabled: !!did,
+  })
+}