[Explore] Small fixes (#8145)

* Hover on sugg account

* Add subtle hover to all components except feed

* Use skeleton states for refetch on focus

* Empty results state for sugg users

* Filter out pinned posts from feed previews

* Add trending header if not top module

* Tighten up spacing

* Fetch 10 profiles

* Update interests copy

* Remove refetch on focus

* Add PTR

* use a map

* Update src/screens/Search/modules/ExploreInterestsCard.tsx

* fix web double border

---------

Co-authored-by: Hailey <me@haileyok.com>

src/screens/Search/modules/ExploreInterestsCard.tsx

@@ -40,14 +40,14 @@ export function ExploreInterestsCard() {
     <>
       <Prompt.Basic
         control={trendingPrompt}
-        title={_(msg`Your interests`)}
+        title={_(msg`Dismiss interests`)}
         description={_(
-          msg`You can adjust your interests at any time from your "Content and media" settings.`,
+          msg`You can adjust your interests at any time from "Content and media" settings.`,
         )}
         confirmButtonCta={_(
           msg({
-            message: `Copy that!`,
-            comment: `Confirm button text. Can be a short cheeky phrase that means "OK" e.g. "Copy that!"`,
+            message: `OK`,
+            comment: `Confirm button text.`,
           }),
         )}
         onConfirm={onConfirmClose}

src/screens/Search/modules/ExploreSuggestedAccounts.tsx

@@ -17,6 +17,7 @@ import {atoms as a} from '#/alf'
 import {Button} from '#/components/Button'
 import * as ProfileCard from '#/components/ProfileCard'
 import {boostInterests, Tabs} from '#/components/ProgressGuide/FollowDialog'
+import {SubtleHover} from '#/components/SubtleHover'
 import {Text} from '#/components/Typography'
 import type * as bsky from '#/types/bsky'
 
@@ -133,10 +134,7 @@ let Tab = ({
               a.py_sm,
               a.border,
               active || hovered || pressed || focused
-                ? [
-                    t.atoms.bg_contrast_25,
-                    {borderColor: t.atoms.bg_contrast_25.backgroundColor},
-                  ]
+                ? [t.atoms.bg_contrast_25, t.atoms.border_contrast_medium]
                 : [t.atoms.bg, t.atoms.border_contrast_low],
             ]}>
             <Text
@@ -186,47 +184,52 @@ let SuggestedProfileCard = ({
           {statsig: true},
         )
       }}>
-      <View
-        style={[
-          a.w_full,
-          a.py_lg,
-          a.px_lg,
-          a.border_t,
-          t.atoms.border_contrast_low,
-          a.flex_1,
-        ]}>
-        <ProfileCard.Outer>
-          <ProfileCard.Header>
-            <ProfileCard.Avatar
-              profile={profile}
-              moderationOpts={moderationOpts}
-            />
-            <ProfileCard.NameAndHandle
-              profile={profile}
-              moderationOpts={moderationOpts}
-            />
-            <ProfileCard.FollowButton
-              profile={profile}
-              moderationOpts={moderationOpts}
-              withIcon={false}
-              logContext="ExploreSuggestedAccounts"
-              onFollow={() => {
-                logger.metric(
-                  'suggestedUser:follow',
-                  {
-                    logContext: 'Explore',
-                    location: 'Card',
-                    recId,
-                    position,
-                  },
-                  {statsig: true},
-                )
-              }}
-            />
-          </ProfileCard.Header>
-          <ProfileCard.Description profile={profile} numberOfLines={2} />
-        </ProfileCard.Outer>
-      </View>
+      {s => (
+        <>
+          <SubtleHover hover={s.hovered || s.pressed} />
+          <View
+            style={[
+              a.flex_1,
+              a.w_full,
+              a.py_lg,
+              a.px_lg,
+              a.border_t,
+              t.atoms.border_contrast_low,
+            ]}>
+            <ProfileCard.Outer>
+              <ProfileCard.Header>
+                <ProfileCard.Avatar
+                  profile={profile}
+                  moderationOpts={moderationOpts}
+                />
+                <ProfileCard.NameAndHandle
+                  profile={profile}
+                  moderationOpts={moderationOpts}
+                />
+                <ProfileCard.FollowButton
+                  profile={profile}
+                  moderationOpts={moderationOpts}
+                  withIcon={false}
+                  logContext="ExploreSuggestedAccounts"
+                  onFollow={() => {
+                    logger.metric(
+                      'suggestedUser:follow',
+                      {
+                        logContext: 'Explore',
+                        location: 'Card',
+                        recId,
+                        position,
+                      },
+                      {statsig: true},
+                    )
+                  }}
+                />
+              </ProfileCard.Header>
+              <ProfileCard.Description profile={profile} numberOfLines={2} />
+            </ProfileCard.Outer>
+          </View>
+        </>
+      )}
     </ProfileCard.Link>
   )
 }

src/screens/Search/modules/ExploreTrendingTopics.tsx

@@ -17,6 +17,7 @@ import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Flame_Stroke2_Corner1_Rounded as FlameIcon} from '#/components/icons/Flame'
 import {Trending3_Stroke2_Corner1_Rounded as TrendingIcon} from '#/components/icons/Trending'
 import {Link} from '#/components/Link'
+import {SubtleHover} from '#/components/SubtleHover'
 import {Text} from '#/components/Typography'
 
 const TOPIC_COUNT = 5
@@ -28,10 +29,10 @@ export function ExploreTrendingTopics() {
 }
 
 function Inner() {
-  const {data: trending, error, isLoading} = useGetTrendsQuery()
+  const {data: trending, error, isLoading, isRefetching} = useGetTrendsQuery()
   const noTopics = !isLoading && !error && !trending?.trends?.length
 
-  return isLoading ? (
+  return isLoading || isRefetching ? (
     Array.from({length: TOPIC_COUNT}).map((__, i) => (
       <TrendingTopicRowSkeleton key={i} withPosts={i === 0} />
     ))
@@ -92,25 +93,23 @@ export function TrendRow({
       PressableComponent={Pressable}>
       {({hovered, pressed}) => (
         <>
-          <View
-            style={[
-              gutters,
-              a.w_full,
-              a.py_lg,
-              a.flex_row,
-              a.gap_2xs,
-              (hovered || pressed) && t.atoms.bg_contrast_25,
-            ]}>
+          <SubtleHover hover={hovered || pressed} />
+          <View style={[gutters, a.w_full, a.py_lg, a.flex_row, a.gap_2xs]}>
             <View style={[a.flex_1, a.gap_xs]}>
               <View style={[a.flex_row]}>
                 <Text
-                  style={[a.text_md, a.font_bold, a.leading_snug, {width: 20}]}>
+                  style={[
+                    a.text_md,
+                    a.font_bold,
+                    a.leading_tight,
+                    {width: 20},
+                  ]}>
                   <Trans comment='The trending topic rank, i.e. "1. March Madness", "2. The Bachelor"'>
                     {rank}.
                   </Trans>
                 </Text>
                 <Text
-                  style={[a.text_md, a.font_bold, a.leading_snug]}
+                  style={[a.text_md, a.font_bold, a.leading_tight]}
                   numberOfLines={1}>
                   {trend.displayName}
                 </Text>