Redo explore page (#4491)

* Redo explore page, wip

* Remove circle icons

* Load more styling

* Lower limit

* Some styling tweaks

* Abstract

* Add tab, query, factor out

* Revert unneeded change

* Revert unneeded change v2

* Update copy

* Load more styling

* Header styles

* The thin blue line

* Make sure it's hairline

* Update query keys

* Border

* Expand avis

* Very load more copy

src/state/queries/feed.ts

@@ -190,8 +190,10 @@ export const KNOWN_AUTHED_ONLY_FEEDS = [
 
 type GetPopularFeedsOptions = {limit?: number}
 
-export function createGetPopularFeedsQueryKey(...args: any[]) {
-  return ['getPopularFeeds', ...args]
+export function createGetPopularFeedsQueryKey(
+  options?: GetPopularFeedsOptions,
+) {
+  return ['getPopularFeeds', options]
 }
 
 export function useGetPopularFeedsQuery(options?: GetPopularFeedsOptions) {
@@ -299,6 +301,34 @@ export function useSearchPopularFeedsMutation() {
   })
 }
 
+const popularFeedsSearchQueryKeyRoot = 'popularFeedsSearch'
+export const createPopularFeedsSearchQueryKey = (query: string) => [
+  popularFeedsSearchQueryKeyRoot,
+  query,
+]
+
+export function usePopularFeedsSearch({
+  query,
+  enabled,
+}: {
+  query: string
+  enabled?: boolean
+}) {
+  const agent = useAgent()
+  return useQuery({
+    enabled,
+    queryKey: createPopularFeedsSearchQueryKey(query),
+    queryFn: async () => {
+      const res = await agent.app.bsky.unspecced.getPopularFeedGenerators({
+        limit: 10,
+        query: query,
+      })
+
+      return res.data.feeds
+    },
+  })
+}
+
 export type SavedFeedSourceInfo = FeedSourceInfo & {
   savedFeed: AppBskyActorDefs.SavedFeed
 }